Angular运行报错：路由''配置无效，数组不能被指定，求协助排查

Hey there, let's sort out this routing error you're running into. The root cause is a misconfiguration in your app.router.ts file—you're passing the wrong value to RouterModule.forRoot().

What's going wrong? #

Looking at your code, you created APP_ROUTES_PROVIDERS using provideRoutes(APP_ROUTES), then passed this provider array to RouterModule.forRoot(). But here's the thing: RouterModule.forRoot() expects a Routes array directly, not a provider array. Angular doesn't recognize that provider array as valid route configuration, which is why you're seeing the "Array cannot be specified" error.

Fixed Code for app.router.ts #

Replace your current app.router.ts with this corrected version:

import { RouterModule } from "@angular/router"
import { Routes } from "@angular/router";
import { RecipesComponent } from "./recipes/recipes.component";
import { ShoppingListComponent } from "./shopping-list/shopping-list.component";

export const APP_ROUTES: Routes = [
 {path: '', redirectTo: '/recipes', pathMatch: 'full' },
 { path: 'recipes', component: RecipesComponent },
 { path: 'shopping-list', component: ShoppingListComponent }
];

// Pass the Routes array directly to forRoot()
export const routing = RouterModule.forRoot(APP_ROUTES);

What changed? #

• I removed the unnecessary provideRoutes call and APP_ROUTES_PROVIDERS variable. RouterModule.forRoot() automatically handles registering the required route providers when you pass it the Routes array—you don't need to do this manually.
• Now you're passing the valid APP_ROUTES array directly to RouterModule.forRoot(), which is exactly what Angular expects.

Your app.module.ts is already set up correctly to import the routing module, so no changes are needed there. After making this fix, the error should vanish, and your routing should work as intended.

内容的提问来源于stack exchange，提问作者Ömer