Angular 5 使用 Angular Universal 从 API 设置路由答案

【问题标题】：Angular 5 set routes from API with Angular UniversalAngular 5 使用 Angular Universal 从 API 设置路由
【发布时间】：2018-04-25 22:53:44
【问题描述】：

我在我的应用程序中使用Angular Universal Starter，并尝试从 API 构建动态路由系统。我想在应用程序引导之前配置我的路由系统。为此，我使用了APP_INITIALISER。我采用了不同的方式，尤其是这种方式：Angular 5 Build routes from API data at startup

我的问题来自我的 app.module.ts 文件：

export function initRoutes(routes: RouterService) {
    return () => routes.browse();
}

@NgModule({
    imports: [
        BrowserModule.withServerTransition({appId: 'universal'}),
        BrowserAnimationsModule,
        RouterModule.forRoot([]),
        TransferHttpCacheModule,
        HttpClientModule,
        InjectorModule,
        HomeModule,
    ],
    declarations: [
        AppComponent,
    ],
    entryComponents: [
        HomeComponent
    ],
    providers: [
        NetworkService,
        RouterService,
        {
            'provide': APP_INITIALIZER,
            'useFactory': initRoutes,
            'deps': [ RouterService ],
            'multi': true,
        },
        Title,
        MenuService
    ],
    bootstrap: [AppComponent]
})

当我导入 TransferHttpCacheModule（一个拦截器，它可以避免客户端上的重复 HttpClient 请求，对于在服务器端呈现应用程序时已经发出的请求），我收到以下错误：

enter image description here

我的问题是：是否可以发送 JSON（带有路由列表）来在 SSR 应用程序上配置我的路由系统？

【问题讨论】：

标签： angular angular-router angular-universal

【解决方案1】：

你可以使用这样的数组：

export const appRoutes: Routes = [
  {
    path: 'aRoute',
    component: NameComponent
  },
  ...
]

并在 NgModule 导入中添加：

RouterModule.forRoot(appRoutes),

那么如果你去aRoute这个路径，NameComponent就会被渲染出来。

【讨论】：

是的，但我想在应用程序引导之前从服务动态加载路由列表（最好在服务器上）。路由列表是从 API 构建的（由 CMS 管理）
可能你的问题和here一样
并非如此。我的问题来自使用 APP_INITIALIZER 导入 TransferHttpCacheModule（为 Angular Universal 定义）
如果你取消导入这个问题就消失了吗？我试图重现你的问题，但对我来说是不可能的，你能创建一个 plunkr 吗？
是的，如果我取消导入，问题就消失了。但我需要它来避免重复的 HttpClient 请求