Utilizing Angular Resolve for Route Data Retrieval

Understand how to leverage Angular Resolve to fetch necessary data before route activation, enhancing user experience.

0 likes
43 views

Rule Content

Title: Utilizing Angular Resolve for Route Data Retrieval

Description: Understand how to leverage Angular Resolve to fetch necessary data before route activation, enhancing user experience.

Category: Angular Cursor Rules

Rule:

{
  "name": "use-angular-resolve-for-route-data",
  "description": "Ensure that Angular Resolve is used to pre-fetch data before route activation to improve user experience.",
  "category": "Angular Cursor Rules",
  "severity": "warning",
  "applyTo": ["*.ts"],
  "patterns": [
    {
      "pattern": "RouterModule\\.forRoot\\(\\[([\\s\\S]*?)\\]\\)",
      "message": "Consider using Angular Resolve to pre-fetch data before route activation for better user experience.",
      "examples": {
        "bad": [
          {
            "code": "RouterModule.forRoot([\n  { path: 'dashboard', component: DashboardComponent }\n])"
          }
        ],
        "good": [
          {
            "code": "RouterModule.forRoot([\n  { path: 'dashboard', component: DashboardComponent, resolve: { data: DashboardResolver } }\n])"
          }
        ]
      }
    }
  ]
}