Angular/Angular9初始化前动态创建路由的实现方案问询

你遇到的问题在Angular里是很典型的场景——因为Angular的路由系统在应用初始化阶段就完成了基础配置，直接访问动态路由时，应用还没来得及加载API数据并更新路由，就会触发404。下面是一套完整的解决方案，完美对应你在AngularJS里的延迟初始化思路：

核心思路 #

利用Angular的APP_INITIALIZER提供者，在应用启动（bootstrap）之前就获取API返回的动态路由数据，合并到基础路由配置后，再手动触发初始导航。这样不管用户是访问基础路由还是动态路由，都能正确匹配。

步骤1：创建动态路由服务 #

先写一个服务负责获取API数据，并把返回的路由名称转换成Angular的Route格式：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Route } from '@angular/router';
import { AppListComponent } from './app-list/app-list.component';
import { AppSingleComponent } from './app-single/app-single.component';

@Injectable({ providedIn: 'root' })
export class DynamicRouteService {
  dynamicRoutes: Route[] = [];

  constructor(private http: HttpClient) {}

  fetchDynamicRoutes(): Observable<any> {
    return this.http.get('/api/apps/getAvailableApps').pipe(
      tap((response: any) => {
        // 把API返回的appList转换成Angular路由配置
        this.dynamicRoutes = response.appList.flatMap(appName => [
          { path: appName, component: AppListComponent },
          { path: `${appName}/new`, component: AppSingleComponent },
          { path: `${appName}/view/:itemNumber`, component: AppSingleComponent }
        ]);
      })
    );
  }
}

步骤2：配置APP_INITIALIZER和路由 #

在根模块（AppModule）中，我们需要完成三件事：

1. 定义通用基础路由
2. 禁用自动初始导航（避免提前触发404）
3. 配置APP_INITIALIZER预加载动态路由，更新路由配置后手动触发导航

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes, Router, ExtraOptions } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { SettingsComponent } from './settings/settings.component';
import { ErrorComponent } from './error/error.component';
import { DynamicRouteService } from './dynamic-route.service';

// 所有用户通用的基础路由
const baseRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'home', component: HomeComponent },
  { path: 'settings', component: SettingsComponent },
  { path: '**', component: ErrorComponent }
];

// 路由配置选项：禁用自动初始导航
const routerConfig: ExtraOptions = {
  initialNavigation: 'disabled'
};

// APP_INITIALIZER工厂函数：确保动态路由加载完成后再启动应用
export function loadDynamicRoutes(dynamicRouteService: DynamicRouteService, router: Router) {
  return () => {
    return dynamicRouteService.fetchDynamicRoutes().toPromise().then(() => {
      // 合并基础路由和动态路由
      const mergedRoutes = [...baseRoutes, ...dynamicRouteService.dynamicRoutes];
      // 更新路由配置
      router.resetConfig(mergedRoutes);
      // 手动触发初始导航（匹配当前用户访问的URL）
      router.navigateByUrl(router.url);
    }).catch(error => {
      // 处理API请求失败的情况，比如跳转到首页
      console.error('加载动态路由失败:', error);
      router.navigateByUrl('/');
    });
  };
}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    SettingsComponent,
    ErrorComponent,
    AppListComponent,
    AppSingleComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(baseRoutes, routerConfig)
  ],
  providers: [
    DynamicRouteService,
    {
      provide: APP_INITIALIZER,
      useFactory: loadDynamicRoutes,
      deps: [DynamicRouteService, Router],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

方案解析 #

• APP_INITIALIZER的作用：它会在Angular初始化根组件之前执行我们的工厂函数，直到函数返回的Promise完成，才会继续启动应用。这和你在AngularJS中延迟angular.bootstrap的思路完全对应。
• 禁用自动初始导航：默认情况下Angular会在启动时立即根据当前URL导航，但此时动态路由还没加载，会触发通配符路由返回404。关闭自动导航后，我们可以在路由配置更新完成后手动触发，确保所有路由都已就绪。
• 路由合并与重置：把基础路由和动态路由合并后，用router.resetConfig()更新路由表，再调用router.navigateByUrl(router.url)匹配当前用户访问的URL，不管是基础路由还是动态路由都能正确加载。

可选优化：懒加载动态路由组件 #

如果动态路由对应的组件体积较大，可以改用懒加载模块来优化初始加载速度：

// 在DynamicRouteService中修改路由转换逻辑
this.dynamicRoutes = response.appList.flatMap(appName => [
  { 
    path: appName, 
    loadChildren: () => import('./app-list/app-list.module').then(m => m.AppListModule) 
  },
  { 
    path: `${appName}/new`, 
    loadChildren: () => import('./app-single/app-single.module').then(m => m.AppSingleModule) 
  },
  { 
    path: `${appName}/view/:itemNumber`, 
    loadChildren: () => import('./app-single/app-single.module').then(m => m.AppSingleModule) 
  }
]);

这样只有当用户访问对应的动态路由时，才会加载对应的模块，减少初始包体积。

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