Question

我正在为我的应用程序使用Angular Universal Starter，我尝试从API构建动态路由系统。我想在应用程序bootrap之前配置我的路由系统。为此，我使用了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应用程序上的路由系统？

Answer 1

你可以使用这样的数组：

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

并在NgModule导入中添加：

RouterModule.forRoot(appRoutes),

然后，如果你转到路径aRoute，将呈现NameComponent。

Angular 5通过API与Angular Universal设置路由

1 个答案: