Adopting Standalone Components in Angular for Simplified Module Management

Guidelines for utilizing standalone components to reduce module complexity and enhance code maintainability in Angular projects.

0 likes
7 views

Rule Content

{
  "title": "Adopting Standalone Components in Angular for Simplified Module Management",
  "description": "Guidelines for utilizing standalone components to reduce module complexity and enhance code maintainability in Angular projects.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-standalone-component-usage",
      "description": "Ensure all new components are created as standalone to simplify module management and improve maintainability.",
      "severity": "error",
      "condition": {
        "not": {
          "property": "standalone",
          "value": true
        }
      },
      "actions": [
        {
          "type": "addProperty",
          "property": "standalone",
          "value": true
        }
      ]
    },
    {
      "id": "angular-standalone-imports",
      "description": "Verify that standalone components import their dependencies directly within the 'imports' array to maintain modularity.",
      "severity": "warning",
      "condition": {
        "not": {
          "property": "imports",
          "type": "array",
          "minLength": 1
        }
      },
      "actions": [
        {
          "type": "addProperty",
          "property": "imports",
          "value": []
        }
      ]
    },
    {
      "id": "angular-standalone-bootstrap",
      "description": "Ensure the application bootstraps using a standalone component to leverage the benefits of standalone architecture.",
      "severity": "error",
      "condition": {
        "not": {
          "property": "bootstrap",
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "standalone": {
                "const": true
              }
            }
          }
        }
      },
      "actions": [
        {
          "type": "replaceProperty",
          "property": "bootstrap",
          "value": [
            {
              "standalone": true
            }
          ]
        }
      ]
    },
    {
      "id": "angular-standalone-lazy-loading",
      "description": "Encourage the use of lazy loading with standalone components to enhance application performance.",
      "severity": "info",
      "condition": {
        "not": {
          "property": "lazyLoad",
          "value": true
        }
      },
      "actions": [
        {
          "type": "addProperty",
          "property": "lazyLoad",
          "value": true
        }
      ]
    }
  ]
}