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
188 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
}
]
}
]
}