An Empirical Evaluation of Code Smell Detection in Angular Applications

2026-04-30

AI Summary

This study addresses the lack of systematic approaches for identifying and detecting code smells specific to the Angular framework, a gap that hinders the maintainability of large-scale front-end projects. Through a gray literature review, the authors construct the first comprehensive catalog of Angular-specific code smells, distilling eleven distinct types and organizing them into a structured taxonomy—six of which represent cross-framework anti-patterns. Building on this classification, they develop a static analysis tool to automate detection. Evaluated on a manually validated dataset, the tool demonstrates strong performance, achieving an accuracy above 0.88 and F1 scores ranging from 0.89 to 1.00. It effectively identifies prevalent issues such as component overloading and duplicated logic, thereby validating the feasibility and practical utility of the proposed methodology.

Abstract

Angular is one of the most widely adopted frameworks for developing large-scale, dynamic web applications. As projects increase in scope and complexity, developers face growing challenges in managing architecture and maintaining clean, modular code. These challenges often lead to design flaws, commonly referred to as code smells. While React-specific smells have been cataloged in prior studies, limited knowledge exists regarding Angular-specific smells and how they manifest. This study investigates Angular code smells through a grey literature review, consolidating community knowledge and technical discussions. From the collected sources, 11 distinct Angular code smells were identified, 6 of which also occur in React-based systems, suggesting that some issues are cross-framework. Each smell was analyzed, exemplified, and grouped according to its technical characteristics. Based on the resulting catalog, we implemented an automated static analysis tool to detect Angular code smells. The tool was empirically evaluated using a manually validated dataset, and its effectiveness was assessed through standard information retrieval metrics. The evaluation results indicate high detection performance across all smells, achieving accuracy values above 0.88 and F1-scores ranging from 0.89 to 1.00. The findings reveal recurring issues such as component overloading, duplicated logic, and inefficient template bindings, reinforcing the relevance of systematic detection support. This study presents the first catalog of Angular-specific code smells derived from grey literature and demonstrates the feasibility and effectiveness of automated detection, providing a solid foundation for future empirical studies and tool development aimed at improving front-end code quality.

Problem

• code smells
• Angular
• web applications
• software quality
• front-end development

Innovation

• Angular code smells
• grey literature review
• static analysis tool
• empirical evaluation
• cross-framework smells