2

I'm trying to set the router config(containing the allowed urls etc) based on data from a REST API. In this case, the url /test2 should end up at the HomeComponent. Url test2 is not present in the initial route config, it is added by a promise.

So far the approach I have used is the following:

    RouterModule.forRoot([
  {
    path: '',
    component: HomeComponent
  },
  {
    path: '**',
    resolve: {
      route: RouteResolver
    },
    component: ErrorComponent
  }
])

Where the Resolver is responsible for adding new routes.

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
return new Promise((resolve, reject) => { // just to fake api call
  console.log(this.router.config);
  this.router.config.push(
    {
      path: 'test2',
      component: HomeComponent
    }
  );
  this.router.resetConfig(this.router.config);
  console.log(this.router);
  resolve();
});

}

Problem with this approach it seems i'm one step too late. The new route does get added to the route config, and the config does get reset. But during the resolver execution the application doesn't seem aware of this yet. So I still end up at the ErrorComponent.

Any idea's how to get this done? Perhaps im searching in the wrong area for a solution :(

enf0rcer
  • 545
  • 2
  • 11
  • Are you aware of the order the router matches it's routes? Because if you push your new route to the configuration, the wildcard route `**` is before your added route and will get matched first. – cyr_x Aug 22 '17 at 22:16
  • @user3492940 can u please provide the full code to implement dynamic route . I still struck with many issues – Sulu.MeanStack Mar 08 '18 at 13:24
  • @Sulu.MeanStack, I'm using the same technique as being used in the plunker from cyrix. If you can tell me what problem you are having I will investigate it in my project. – enf0rcer Mar 10 '18 at 13:39

1 Answers1

2

As stated in my comment you have to place the dynamic routes before the wildcard routes and then you can use Router.navigateByUrl to navigate to the added route, but you have to check if the route you want to go is part of your dynamic routes. Because otherwise you would end up in an endless loop.

I made a plunker with an example.

Note: The example adds routes each time the CanActivate guard is invoked, so you have to filter out existing routes upon adding new ones.

cyr_x
  • 13,987
  • 2
  • 32
  • 46
  • Cyrix, I can't thank you enough for your great explanation and the plunkr you made. Great job! I indeed was not aware of the fact the first route it matches gets picked first, but thinking about it now it does make sense. Also the other point you mentioned regarding the loop is something I did encounter while experimenting. So it's great you have also tackled this problem. Now I hope I can get this all to work together with Angular Universal :-) hehe. – enf0rcer Aug 23 '17 at 07:13
  • Just another update Cyrix, it is working flawless thanks to your help :-) – enf0rcer Feb 08 '18 at 11:18