Building Micro-Frontend Architectures with Angular

{
  "title": "Building Micro-Frontend Architectures with Angular",
  "description": "Strategies for decomposing large Angular applications into smaller, independent micro-frontends to enhance scalability and maintainability.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-microfrontend-domain-separation",
      "description": "Ensure each micro-frontend corresponds to a distinct business domain or subdomain to maintain clear boundaries and reduce interdependencies.",
      "severity": "error",
      "tags": ["architecture", "modularity"],
      "check": {
        "type": "module",
        "criteria": [
          {
            "type": "dependency",
            "condition": "cross-domain",
            "message": "Module should not depend on components or services from other business domains."
          }
        ]
      }
    },
    {
      "id": "angular-microfrontend-independent-deployment",
      "description": "Design micro-frontends to be independently deployable, allowing teams to develop, test, and deploy without affecting other parts of the application.",
      "severity": "warning",
      "tags": ["deployment", "independence"],
      "check": {
        "type": "ci-cd",
        "criteria": [
          {
            "type": "pipeline",
            "condition": "independent",
            "message": "Micro-frontend should have its own CI/CD pipeline."
          }
        ]
      }
    },
    {
      "id": "angular-microfrontend-shared-libraries",
      "description": "Utilize shared libraries for common functionalities across micro-frontends to promote consistency and reduce redundancy.",
      "severity": "info",
      "tags": ["code-reuse", "consistency"],
      "check": {
        "type": "import",
        "criteria": [
          {
            "type": "library",
            "condition": "shared",
            "message": "Consider using shared libraries for common functionalities."
          }
        ]
      }
    },
    {
      "id": "angular-microfrontend-module-federation",
      "description": "Implement Webpack Module Federation to dynamically load and share modules between micro-frontends at runtime.",
      "severity": "error",
      "tags": ["module-federation", "dynamic-loading"],
      "check": {
        "type": "webpack-config",
        "criteria": [
          {
            "type": "plugin",
            "condition": "module-federation",
            "message": "Webpack configuration should include Module Federation Plugin."
          }
        ]
      }
    },
    {
      "id": "angular-microfrontend-routing",
      "description": "Configure each micro-frontend with its own routing and integrate with a global router to manage navigation seamlessly.",
      "severity": "warning",
      "tags": ["routing", "navigation"],
      "check": {
        "type": "routing",
        "criteria": [
          {
            "type": "module",
            "condition": "lazy-loaded",
            "message": "Micro-frontend modules should be lazy-loaded."
          }
        ]
      }
    },
    {
      "id": "angular-microfrontend-communication",
      "description": "Establish clear communication protocols between micro-frontends using event-driven architecture or shared state management solutions.",
      "severity": "warning",
      "tags": ["communication", "state-management"],
      "check": {
        "type": "service",
        "criteria": [
          {
            "type": "event-emitter",
            "condition": "shared",
            "message": "Use shared event emitters for inter-micro-frontend communication."
          }
        ]
      }
    },
    {
      "id": "angular-microfrontend-security",
      "description": "Implement security best practices, including input validation and secure communication channels, to protect each micro-frontend.",
      "severity": "error",
      "tags": ["security", "best-practices"],
      "check": {
        "type": "security",
        "criteria": [
          {
            "type": "input-validation",
            "condition": "implemented",
            "message": "Ensure input validation is implemented to prevent security vulnerabilities."
          }
        ]
      }
    },
    {
      "id": "angular-microfrontend-performance",
      "description": "Optimize performance by implementing lazy loading, code splitting, and efficient caching strategies within each micro-frontend.",
      "severity": "info",
      "tags": ["performance", "optimization"],
      "check": {
        "type": "performance",
        "criteria": [
          {
            "type": "lazy-loading",
            "condition": "enabled",
            "message": "Lazy loading should be enabled to improve performance."
          }
        ]
      }
    },
    {
      "id": "angular-microfrontend-testing",
      "description": "Ensure comprehensive testing strategies, including unit, integration, and end-to-end tests, are in place for each micro-frontend.",
      "severity": "warning",
      "tags": ["testing", "quality-assurance"],
      "check": {
        "type": "testing",
        "criteria": [
          {
            "type": "coverage",
            "condition": "sufficient",
            "message": "Test coverage should meet the project's quality standards."
          }
        ]
      }
    },
    {
      "id": "angular-microfrontend-documentation",
      "description": "Maintain clear and up-to-date documentation for each micro-frontend, detailing APIs, dependencies, and deployment processes.",
      "severity": "info",
      "tags": ["documentation", "maintainability"],
      "check": {
        "type": "documentation",
        "criteria": [
          {
            "type": "completeness",
            "condition": "adequate",
            "message": "Documentation should be comprehensive and current."
          }
        ]
      }
    }
  ]
}