Optimizing Angular Applications with Ahead-of-Time (AOT) Compilation

{
  "title": "Optimizing Angular Applications with Ahead-of-Time (AOT) Compilation",
  "description": "Best practices for utilizing AOT compilation to improve performance and reduce runtime errors in Angular applications.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "name": "Enable AOT Compilation",
      "description": "Ensure AOT compilation is enabled in your Angular project to enhance performance and detect template errors at build time.",
      "implementation": [
        {
          "type": "file",
          "pattern": "angular.json",
          "checks": [
            {
              "type": "json",
              "path": "$.projects.*.architect.build.configurations.production.aot",
              "expected": true,
              "message": "AOT compilation should be enabled in the production build configuration."
            }
          ]
        }
      ]
    },
    {
      "name": "Test with AOT Compilation",
      "description": "Regularly test your application with AOT compilation to catch and resolve template binding errors early.",
      "implementation": [
        {
          "type": "command",
          "command": "ng serve --aot",
          "message": "Run 'ng serve --aot' to test your application with AOT compilation."
        }
      ]
    },
    {
      "name": "Use Pure Component Methods",
      "description": "Ensure that methods called from templates are pure and free of side effects to maintain predictable behavior.",
      "implementation": [
        {
          "type": "code",
          "language": "typescript",
          "pattern": ".*\\.component\\.ts$",
          "checks": [
            {
              "type": "function",
              "criteria": "methods called from templates should not modify component state or perform side effects",
              "message": "Methods used in templates should be pure and free of side effects."
            }
          ]
        }
      ]
    },
    {
      "name": "Avoid Dynamic HTML Generation",
      "description": "Use Angular's structural directives like *ngIf and *ngFor instead of dynamically generating HTML to improve performance and maintainability.",
      "implementation": [
        {
          "type": "code",
          "language": "html",
          "pattern": ".*\\.component\\.html$",
          "checks": [
            {
              "type": "regex",
              "pattern": "<script>|<style>|document\\.write\\(",
              "not": true,
              "message": "Avoid using <script>, <style>, or document.write() in templates; use Angular's structural directives instead."
            }
          ]
        }
      ]
    },
    {
      "name": "Declare All Template Variables",
      "description": "Ensure all properties and methods used in templates are properly declared in the corresponding component to prevent runtime errors.",
      "implementation": [
        {
          "type": "code",
          "language": "typescript",
          "pattern": ".*\\.component\\.ts$",
          "checks": [
            {
              "type": "variable",
              "criteria": "all variables and methods used in the template should be declared in the component class",
              "message": "Declare all template variables and methods in the component class."
            }
          ]
        }
      ]
    },
    {
      "name": "Enable Strict Type Checking",
      "description": "Enable strict type checking in your Angular project to catch potential errors during development.",
      "implementation": [
        {
          "type": "file",
          "pattern": "tsconfig.json",
          "checks": [
            {
              "type": "json",
              "path": "$.angularCompilerOptions.strictTemplates",
              "expected": true,
              "message": "Strict template type checking should be enabled in tsconfig.json."
            }
          ]
        }
      ]
    },
    {
      "name": "Use Lazy Loading for Modules",
      "description": "Implement lazy loading for feature modules to reduce initial load time and improve application performance.",
      "implementation": [
        {
          "type": "code",
          "language": "typescript",
          "pattern": ".*\\.routing\\.module\\.ts$",
          "checks": [
            {
              "type": "regex",
              "pattern": "loadChildren: \\(\\) => import\\('.*'\\)\\.then\\(m => m\\..*Module\\)",
              "message": "Use lazy loading syntax for feature modules in routing configurations."
            }
          ]
        }
      ]
    },
    {
      "name": "Optimize ngFor with trackBy",
      "description": "Use the trackBy function with ngFor to optimize rendering performance by reducing unnecessary DOM manipulations.",
      "implementation": [
        {
          "type": "code",
          "language": "html",
          "pattern": ".*\\.component\\.html$",
          "checks": [
            {
              "type": "regex",
              "pattern": "\\*ngFor=\"let .* of .*; trackBy: .*\"",
              "message": "Ensure ngFor directives include a trackBy function to optimize rendering."
            }
          ]
        }
      ]
    },
    {
      "name": "Avoid Unnecessary Imports",
      "description": "Only import necessary modules and components to minimize the size of the compiled bundles and improve performance.",
      "implementation": [
        {
          "type": "code",
          "language": "typescript",
          "pattern": ".*\\.module\\.ts$",
          "checks": [
            {
              "type": "import",
              "criteria": "import only the modules and components that are used in the module",
              "message": "Remove unnecessary imports to reduce bundle size."
            }
          ]
        }
      ]
    },
    {
      "name": "Sanitize User Inputs",
      "description": "Use Angular's built-in sanitization functions to prevent XSS attacks and ensure application security.",
      "implementation": [
        {
          "type": "code",
          "language": "typescript",
          "pattern": ".*\\.component\\.ts$",
          "checks": [
            {
              "type": "function",
              "criteria": "use Angular's DomSanitizer to sanitize user inputs before rendering",
              "message": "Sanitize user inputs using Angular's DomSanitizer to prevent XSS attacks."
            }
          ]
        }
      ]
    }
  ]
}