Optimizing Angular Applications with Functional Dependency Injection

{
  "title": "Optimizing Angular Applications with Functional Dependency Injection",
  "description": "Techniques for implementing functional dependency injection to improve code readability and flexibility in Angular projects.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-functional-di",
      "description": "Utilize the `inject` function for dependency injection within components, directives, and services to enhance code clarity and reduce boilerplate.",
      "recommendation": "Replace constructor-based injection with the `inject` function where applicable.",
      "examples": {
        "bad": [
          {
            "code": "import { Component } from '@angular/core';\nimport { AuthService } from './auth.service';\n\n@Component({\n  selector: 'app-login',\n  template: `<p>Login works!</p>`\n})\nexport class LoginComponent {\n  constructor(private authService: AuthService) {}\n\n  login() {\n    this.authService.authenticate();\n  }\n}"
          }
        ],
        "good": [
          {
            "code": "import { Component, inject } from '@angular/core';\nimport { AuthService } from './auth.service';\n\n@Component({\n  selector: 'app-login',\n  template: `<p>Login works!</p>`\n})\nexport class LoginComponent {\n  private authService = inject(AuthService);\n\n  login() {\n    this.authService.authenticate();\n  }\n}"
          }
        ]
      },
      "references": [
        {
          "title": "Angular — Advanced Dependency Injection Techniques",
          "url": "https://medium.com/@babatundelamidi/angular-advanced-dependency-injection-techniques-0e1a3f6a1ca4"
        },
        {
          "title": "My new Angular Coding Style - Angular Experts",
          "url": "https://angularexperts.io/blog/new-angular-coding-style/"
        }
      ]
    },
    {
      "id": "angular-injection-token",
      "description": "Use `InjectionToken` for non-class dependencies to ensure uniqueness and type safety.",
      "recommendation": "Define and use `InjectionToken` for injecting configuration values or other non-class dependencies.",
      "examples": {
        "bad": [
          {
            "code": "import { NgModule } from '@angular/core';\n\n@NgModule({\n  providers: [\n    { provide: 'API_URL', useValue: 'https://api.example.com' }\n  ]\n})\nexport class AppModule {}"
          }
        ],
        "good": [
          {
            "code": "import { NgModule, InjectionToken } from '@angular/core';\n\nexport const API_URL = new InjectionToken<string>('apiUrl');\n\n@NgModule({\n  providers: [\n    { provide: API_URL, useValue: 'https://api.example.com' }\n  ]\n})\nexport class AppModule {}"
          }
        ]
      },
      "references": [
        {
          "title": "Use InjectionToken for Dependency Injection",
          "url": "https://github.com/avivharuzi/angular-best-practices"
        }
      ]
    },
    {
      "id": "angular-singleton-services",
      "description": "Provide services at the root level using `providedIn: 'root'` to create singleton instances and enable tree-shaking.",
      "recommendation": "Use `providedIn: 'root'` in the `@Injectable` decorator for services that should have a single instance across the application.",
      "examples": {
        "bad": [
          {
            "code": "import { Injectable } from '@angular/core';\n\n@Injectable()\nexport class AuthService {\n  // Service logic\n}"
          }
        ],
        "good": [
          {
            "code": "import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class AuthService {\n  // Service logic\n}"
          }
        ]
      },
      "references": [
        {
          "title": "Mastering Angular Dependency Injection: A Comprehensive Guide",
          "url": "https://medium.com/@silwal.prayas/mastering-angular-dependency-injection-a-comprehensive-guide-165ea6d3e0e5"
        }
      ]
    },
    {
      "id": "angular-avoid-multiple-instances",
      "description": "Avoid providing services in component `providers` arrays unless a separate instance is explicitly required.",
      "recommendation": "Provide services at the module or root level to prevent unintended multiple instances.",
      "examples": {
        "bad": [
          {
            "code": "import { Component } from '@angular/core';\nimport { AuthService } from './auth.service';\n\n@Component({\n  selector: 'app-login',\n  providers: [AuthService],\n  template: `<p>Login works!</p>`\n})\nexport class LoginComponent {\n  constructor(private authService: AuthService) {}\n\n  login() {\n    this.authService.authenticate();\n  }\n}"
          }
        ],
        "good": [
          {
            "code": "import { Component } from '@angular/core';\nimport { AuthService } from './auth.service';\n\n@Component({\n  selector: 'app-login',\n  template: `<p>Login works!</p>`\n})\nexport class LoginComponent {\n  constructor(private authService: AuthService) {}\n\n  login() {\n    this.authService.authenticate();\n  }\n}"
          }
        ]
      },
      "references": [
        {
          "title": "Best Practices for Angular Services and Dependency Injection",
          "url": "https://bestpractices.net/best-practices-for-angular-services-and-dependency-injection/"
        }
      ]
    }
  ]
}