Search papers, labs, and topics across Lattice.
This paper identifies and catalogs 11 distinct Angular-specific code smells derived from grey literature, highlighting common design flaws in large-scale web applications. They then developed a static analysis tool to automatically detect these smells. Empirical evaluation on a manually validated dataset demonstrates high detection performance, with accuracy above 0.88 and F1-scores ranging from 0.89 to 1.00, proving the feasibility of automated detection.
Angular apps are riddled with hidden design flaws: this study surfaces 11 common "code smells" and shows how to automatically sniff them out.
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.
