Angular 5 条路线 API 与 Angular 通用

Question

我正在为我的应用程序使用 Angular Universal Starter，我尝试从 API 构建一个动态路由系统。我想在应用程序引导之前配置我的路由系统。为此，我使用了 APP_INITIALISER. I followed different way, especially this one :

我的问题出在我的 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 应用程序上配置我的路由系统？

Answer 1

您可以使用这样的数组：

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

并在 NgModule 导入中添加：

RouterModule.forRoot(appRoutes),

然后如果您转到路径 aRoute，NameComponent 将被渲染。

Angular 5 条路线 API 与 Angular 通用

Angular 5 set routes from API with Angular Universal

angular-universal

angular

angular-router