Best Practices for Angular Router Configuration

{
  "title": "Best Practices for Angular Router Configuration",
  "description": "Understand how to configure Angular Router effectively, including route guards and lazy loading for optimized navigation.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "name": "Consistent Naming Conventions",
      "description": "Ensure all routes, components, and route parameters follow a clear and consistent naming convention to enhance readability and maintainability.",
      "examples": [
        {
          "bad": "const routes: Routes = [{ path: 'prd/:id', component: PrdCmp }];",
          "good": "const routes: Routes = [{ path: 'product/:productId', component: ProductComponent }];"
        }
      ]
    },
    {
      "name": "Implement Lazy Loading",
      "description": "Utilize lazy loading to split the application into feature modules, loading them only when needed to improve initial load times and overall performance.",
      "examples": [
        {
          "bad": "const routes: Routes = [{ path: 'products', component: ProductsComponent }];",
          "good": "const routes: Routes = [{ path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) }];"
        }
      ]
    },
    {
      "name": "Use Route Guards for Protection",
      "description": "Employ route guards like CanActivate and CanDeactivate to protect sensitive areas, such as admin sections or user profiles, by implementing authentication and authorization checks.",
      "examples": [
        {
          "bad": "const routes: Routes = [{ path: 'admin', component: AdminComponent }];",
          "good": "const routes: Routes = [{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }];"
        }
      ]
    },
    {
      "name": "Organize with Child Routes",
      "description": "Use child routes to organize related routes, creating a more maintainable route configuration and allowing for nested navigation structures.",
      "examples": [
        {
          "bad": "const routes: Routes = [{ path: 'dashboard', component: DashboardComponent }, { path: 'dashboard/overview', component: OverviewComponent }];",
          "good": "const routes: Routes = [{ path: 'dashboard', component: DashboardComponent, children: [{ path: 'overview', component: OverviewComponent }] }];"
        }
      ]
    },
    {
      "name": "Handle Wildcard Routes Appropriately",
      "description": "Use wildcard routes to catch undefined paths and redirect users to a designated 404 page or the home page.",
      "examples": [
        {
          "bad": "const routes: Routes = [{ path: '**', redirectTo: '/' }];",
          "good": "const routes: Routes = [{ path: '**', component: PageNotFoundComponent }];"
        }
      ]
    },
    {
      "name": "Avoid Hard-Coded URLs",
      "description": "Avoid hard-coding URLs in templates or components; instead, use the Router service or routerLink directive to ensure URLs are generated based on the routing configuration.",
      "examples": [
        {
          "bad": "<a href='/products'>Products</a>",
          "good": "<a routerLink='/products'>Products</a>"
        }
      ]
    },
    {
      "name": "Manage State with Route Parameters",
      "description": "Use route parameters and query parameters to manage state across navigation, ensuring users can bookmark URLs or refresh the page without losing context.",
      "examples": [
        {
          "bad": "const routes: Routes = [{ path: 'product', component: ProductComponent }];",
          "good": "const routes: Routes = [{ path: 'product/:id', component: ProductComponent }];"
        }
      ]
    },
    {
      "name": "Keep Router Guards Organized",
      "description": "Organize all top-level guards under a dedicated folder and use consistent naming conventions to maintain a clean and organized codebase.",
      "examples": [
        {
          "bad": "src/app/auth.guard.ts",
          "good": "src/app/_guards/auth.can-activate.guard.ts"
        }
      ]
    },
    {
      "name": "Use Barrel Exports for Guards",
      "description": "Create an index.ts file in the guards directory to export all guards, simplifying imports and maintaining clean code organization.",
      "examples": [
        {
          "bad": "import { AuthCanActivateGuard } from 'src/app/_guards/auth.can-activate.guard';",
          "good": "import { AuthCanActivateGuard } from 'src/app/_guards';"
        }
      ]
    },
    {
      "name": "Implement Route Resolvers",
      "description": "Use route resolvers to fetch data before activating a route, ensuring necessary data is available when the component loads.",
      "examples": [
        {
          "bad": "ngOnInit() { this.route.params.subscribe(params => { this.loadData(params['id']); }); }",
          "good": "const routes: Routes = [{ path: 'product/:id', component: ProductComponent, resolve: { product: ProductResolver } }];"
        }
      ]
    }
  ]
}