无模块Angular应用中如何通过ROUTES注入令牌提供生成路由？

核心思路 #

在Angular独立组件模式下，用provideRouter替代RoutingModule，同时保留基于GfConfigService的动态路由生成逻辑，将静态懒加载路由（如/admin）与动态路由合并，由Angular自动处理路由匹配和懒加载。

具体实现步骤 #

1. 在应用启动时配置路由提供者

直接在main.ts（或应用入口文件）中使用provideRouter，混合传入静态懒加载路由和动态路由的工厂提供者：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Route } from '@angular/router';
import { AppComponent } from './app/app.component';
import { GfConfigService } from './app/services/gf-config.service';

// 静态懒加载路由（保持官方独立组件写法）
const STATIC_ROUTES: Route[] = [
  { path: 'admin', loadChildren: () => import('./app/admin/routes') },
  // 其他静态路由（如首页、404等）
];

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter([
      // 先注册静态懒加载路由
      ...STATIC_ROUTES,
      // 再注册动态路由工厂（保留依赖GfConfigService的逻辑）
      {
        provide: Route,
        useFactory: (gfConfigService: GfConfigService) => gfConfigService.createRoutes(),
        deps: [GfConfigService],
        multi: true, // 允许合并多个路由数组
      }
    ]),
    // 确保GfConfigService被注入
    GfConfigService
  ]
});

2. 保留Admin模块的懒加载路由结构

admin/routes.ts继续使用官方推荐的默认导出写法，无需修改：

import { Route } from '@angular/router';
import { AdminHomeComponent } from './admin-home.component';
import { AdminUsersComponent } from './admin-users.component';

export default [
  { path: 'home', component: AdminHomeComponent },
  { path: 'users', component: AdminUsersComponent },
  // 其他Admin子路由
] as Route[];

关键说明 #

• provideRouter支持混合传入Route[]和路由提供者，Angular会自动合并所有路由数组
• 动态路由的multi: true配置保留，确保基于GfConfigService生成的路由能和静态路由合并生效
• 路由顺序需注意：如果动态路由包含通配符（**），需放在静态路由之后，避免拦截懒加载路由的匹配

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