Creating Multi-Module Angular Applications

{
  "title": "Creating Multi-Module Angular Applications",
  "description": "Understand how to structure a multi-module Angular application to keep your project organized and scalable.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-multi-module-structure",
      "description": "Organize your Angular application into Core, Shared, and Feature modules to enhance maintainability and scalability.",
      "recommendation": [
        "Create a CoreModule for singleton services and global configurations, ensuring it's imported only in the AppModule.",
        "Develop a SharedModule for reusable components, directives, and pipes, importing it into FeatureModules as needed.",
        "Design FeatureModules for distinct application features, encapsulating related components, services, and routing configurations."
      ],
      "references": [
        {
          "text": "Best Practices for Architecting Large-Scale Angular Applications",
          "url": "https://wslisam.medium.com/best-practices-for-architecting-large-scale-angular-applications-0759dcdbcad4"
        },
        {
          "text": "Angular Project Structure: Essential Best Practices to Follow",
          "url": "https://www.halfnine.com/blog/post/angular-project-structure"
        }
      ]
    },
    {
      "id": "angular-lazy-loading",
      "description": "Implement lazy loading for FeatureModules to improve application performance by loading modules only when needed.",
      "recommendation": [
        "Configure lazy loading in your routing by using the loadChildren property to load FeatureModules asynchronously.",
        "Ensure that each FeatureModule has its own routing module to manage its routes independently."
      ],
      "references": [
        {
          "text": "Angular Best Practices - Suggestions How to Write Better Angular Apps",
          "url": "https://code-maze.com/angular-best-practices/"
        },
        {
          "text": "Modular Architecture in Angular: Best Practices for Large Projects!",
          "url": "https://jsschools.com/javascript/modular-architecture-in-angular-best-practices-fo/"
        }
      ]
    },
    {
      "id": "angular-folder-structure",
      "description": "Establish a clear and consistent folder structure to enhance code organization and maintainability.",
      "recommendation": [
        "Organize your application with a src/app directory containing core/, shared/, and features/ subdirectories.",
        "Place global services and configurations in core/, reusable components and utilities in shared/, and feature-specific modules in features/."
      ],
      "references": [
        {
          "text": "Best Practices for Creating Scalable Angular Applications",
          "url": "https://angulardive.com/blog/best-practices-for-creating-scalable-angular-applications/"
        },
        {
          "text": "Angular Modules Best Practices 2021 - DEV Community",
          "url": "https://dev.to/this-is-angular/angular-modules-best-practices-2021-3lo5"
        }
      ]
    },
    {
      "id": "angular-service-architecture",
      "description": "Adopt a service-oriented architecture to separate business logic from UI components, enhancing testability and maintainability.",
      "recommendation": [
        "Create services to handle business logic and data management, keeping components focused on presentation and user interaction.",
        "Provide global services in the CoreModule and feature-specific services in their respective FeatureModules."
      ],
      "references": [
        {
          "text": "Best Practices for Architecting Large-Scale Angular Applications",
          "url": "https://wslisam.medium.com/best-practices-for-architecting-large-scale-angular-applications-0759dcdbcad4"
        },
        {
          "text": "Angular Best Practices: Flexible and Reliable Libraries",
          "url": "https://www.bigscal.com/blogs/frontend/angular-best-practices/"
        }
      ]
    },
    {
      "id": "angular-state-management",
      "description": "Implement a state management solution like NgRx for complex applications to manage state predictably and efficiently.",
      "recommendation": [
        "Use NgRx to centralize application state, making state changes predictable and easier to debug.",
        "Evaluate the complexity of your application to determine if a state management library is necessary or if simpler solutions suffice."
      ],
      "references": [
        {
          "text": "Best Practices for Architecting Large-Scale Angular Applications",
          "url": "https://wslisam.medium.com/best-practices-for-architecting-large-scale-angular-applications-0759dcdbcad4"
        },
        {
          "text": "10 Best Practices for Building Scalable Angular Applications — With examples",
          "url": "https://medium.com/@mattias.trnqvist/10-best-practices-for-building-scalable-angular-applications-with-examples-efdfe2a5b4e8"
        }
      ]
    },
    {
      "id": "angular-code-optimization",
      "description": "Optimize your Angular application by implementing code splitting and performance enhancements.",
      "recommendation": [
        "Utilize Angular's Ahead-of-Time (AOT) compilation to improve load times and performance.",
        "Implement tree shaking to remove unused code during the build process, reducing bundle sizes."
      ],
      "references": [
        {
          "text": "Best Practices for Creating Scalable Angular Applications",
          "url": "https://angulardive.com/blog/best-practices-for-creating-scalable-angular-applications/"
        },
        {
          "text": "Angular Best Practices - Suggestions How to Write Better Angular Apps",
          "url": "https://code-maze.com/angular-best-practices/"
        }
      ]
    }
  ]
}