Angular 5 set routes from API with Angular Universal

Question

I'm using Angular Universal Starter for my application and I try to build a dynamic routing system from an API. I would like to configure my routing system before the application bootsrap. To do this, I used the APP_INITIALISER. I followed different way, especially this one : Angular 5 Build routes from API data at startup

My problem come on my app.module.ts file :

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]
})

When I import TransferHttpCacheModule (an interceptor that avoids duplicate HttpClient requests on the client, for requests that were already made when the application was rendered on the server side), I'm getting the following error :

enter image description here

My question is : Is it possible to send a JSON (with a routes list) to configure my routing system on an SSR application ?

score 0 · Accepted Answer · answered Apr 25 '18 at 22:59

0

You can use an array like this:

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

and in the NgModule imports add this:

RouterModule.forRoot(appRoutes),

then if you go to the path aRoute, NameComponent will be rendered.

answered Apr 25 '18 at 22:59

Julián Esteban Salomón Torres

268
2
8

1

Yes but I would like to load the routes list dynimacally from a service before the application bootstrap (idealy on the server). The routes list is build from an API (administrated with a CMS) – JUNNNN Apr 25 '18 at 23:16
Possible your problem is the same as [here](https://stackoverflow.com/questions/39767019/app-initializer-raises-cannot-instantiate-cyclic-dependency-applicationref-w) – Julián Esteban Salomón Torres Apr 26 '18 at 01:03
Not really. My problem come from the import of TransferHttpCacheModule (define for angular Universal) with the use of APP_INITIALIZER – JUNNNN Apr 26 '18 at 11:59
1

If you unimport this the problem is gone? I tried to reproduce your problem but was impossible for me, can you create a plunkr? – Julián Esteban Salomón Torres Apr 26 '18 at 13:08
Yes, if I unimport this the problem is gone. But I need it to avoid duplicate HttpClient requests – JUNNNN Apr 26 '18 at 15:32
Look at [this](https://github.com/angular/universal/issues/901), It suggest use Injector for the HttpClient in the APP_INITIALIZER `get http() { return this.injector.get(HttpClient); }`, hope it helps! – Julián Esteban Salomón Torres Apr 26 '18 at 16:08

Angular 5 set routes from API with Angular Universal

1 Answers1