An Empirical Evaluation of Code Smell Detection in Angular Applications

Original 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.