Dynamic Setting of the Router

Question

I have an Angular 5 app that retrieves content from Contentful. Some of this content is routes. I would like to set these inside a child RoutingModule as follows:

const myRoutes: Routes = [
  { path: '', component: BaseComponent },
  { path: '**', component: FailComponent }
];

@NgModule({ 
  RouterModule.forChild(myRoutes),
  ... 
})

export class MyRoutingModule {
  routesFromContentful = retrieveRoutesFromContentful();
  routes.forEach((route:string) => {
    myRoutes.push({ path: route, component: GenericComponent }); 
  }
}

To be clear:

I am mapping all routes to the same component, GenericComponent. This is intended.
I have no problem retrieving the routes from Contentful.
The issue is that the new routes I push into myRoutes are not recognized.

Is there a way to have these routes recognized? Are they not recognized because the exported class comes after @NgModule?

Check this answer: https://stackoverflow.com/questions/47686638/featuremodule-fails-during-an-aot-build-when-static-forroot-has-arguments — Michael Kang, Apr 10 '18 at 03:02

score 1 · Accepted Answer · answered Apr 10 '18 at 02:36

1

For pushing routes to current route configuration, you could push those routes in by calling resetConfig method on router dependency instance like below.

export class MyRoutingModule {
  constructor(private router: Router){
     this.loadRoutes();
  }

  loadRoutes(){
     routesFromContentful = retrieveRoutesFromContentful();
     routes.forEach((route:string) => {
        myRoutes.push({ path: route, component: GenericComponent }); 
     }
     //reseting router configuration
     this.router.resetConfig(routes);
  } 
}

or You can directly push new routes inside router.config object.

export class MyRoutingModule {
  constructor(private router: Router){
     this.loadRoutes();
  }

  loadRoutes(){
     routesFromContentful = retrieveRoutesFromContentful();
     routes.forEach((route:string) => {
        //adding routes to existing to configuration.
        this.router.config.push({ path: route, component: GenericComponent }); 
     }
  } 
}

answered Apr 10 '18 at 02:36

Pankaj Parkar

134,766
23
234
299

Excellent! Thank you very much! I wasn't expecting two answers haha! – Alex Verzea Apr 10 '18 at 13:49
@AlexVerzea I tried covering every possible way, thanks mate ;) – Pankaj Parkar Apr 10 '18 at 14:24
Suppose that you have a situation where the router is actually a child router. You also need to use the ** route at the end for an error page. The solution you gave would fail as the extra routes would be added after the ** one and lead to the error page. Would it be possible to change it for that? – Alex Verzea Apr 10 '18 at 23:34
Also, I get an error for the `GenericComponent` when I try to add it as above: `Error: No component factory found for GenericComponent. Did you add it to @NgModule.entryComponents?` The component is already added to the `declarations` and `entryComponents`, to no effect. – Alex Verzea Apr 11 '18 at 02:13
@AlexVerzea for your 1st comment you can easily pluck `error` route, and put it at the end of `routes` array. – Pankaj Parkar Apr 11 '18 at 09:33
@AlexVerzea I don't understand your second comment, where `GenericComponent` resides? – Pankaj Parkar Apr 11 '18 at 09:34
@Panjak Parkar: I don't understand what you mean by the `error` route. Everywhere I looked, people use the `'**'` route to set the error. For the structure, I have a `GenericParentComponent`, which has the `GenericComponent` as a child. The above code is for the `MyRoutingModule`, which has both `GenericParentComponent` and `GenericComponent` inside `declarations`. – Alex Verzea Apr 11 '18 at 13:43
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168745/discussion-between-pankaj-parkar-and-alex-verzea). – Pankaj Parkar Apr 11 '18 at 14:01

Dynamic Setting of the Router

1 Answers1