How to add additional Routes dynamically in Angular

Question

I'm using Angular 5.2.2 (typescript) with Angular-CLI and .NET Core 2.0.

I'm trying to add additional Routes dynamically to my application.

The idea is that I get my routes dynamically from a server which checks what modules should be available to the user. But I cant seem to get the routes to become available.

I've tried to add them using RouterModule.forRoot but that did not work.

I've tried using Router.resetConfig but I can't seem to get that working. I try to use dependency injection to get it in the function I've created but I end up with a cyclic dependency:

Uncaught Error: Provider parse errors:
Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

Here is a bit of the code I have:

app-routing.module.ts

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';

var routes: Routes = [{ path: '', loadChildren: "../app/modules/f2p-dashboard/f2p-dashboard.module#F2PDashboardModule" }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: AppConfigServiceFactory,
      deps: [F2PModuleService, Router ],
      multi: true
    }
  ]
})

export function AppConfigServiceFactory(moduleService: F2PModuleService, 
router:Router) {
  return () => {
    return moduleService.Init().subscribe((result) => {
      let additionalRoutes = moduleService.GetRoutes()
      routes = routes.concat(additionalRoutes);
      console.log(routes);
      //routes is filled
  router.resetConfig(routes);
  //RouterModule.forRoot(routes);
});

edit: All the routes I'm trying to add make use of loadChildren

https://stackoverflow.com/questions/34842536/implementing-dynamic-routing-in-angular2-typescript you can refer this, if this help — Brijesh Mavani, Feb 06 '18 at 15:06
Those solutions are deprecated, the comments state another solution but that also seems deprecated (or perhaps its a bug in Angular) So its not an answer to my problems. Even so thank you for your response — D. Berg, Feb 07 '18 at 10:04
@D Berg https://stackoverflow.com/questions/42928030/is-it-possible-to-build-add-routes-dynamically-in-angular-2 this will definitely help you..! — Brijesh Mavani, Feb 07 '18 at 10:18
Thank you for your response, its been a while since ive last responded. Ive been busy with other tasks in the meantime. As i couldnt get this to work. Im not going to invest more time in this problem for now. Thank your for your help though. — D. Berg, Feb 27 '18 at 10:49

score 15 · Answer 1 · answered Aug 15 '18 at 14:39

One of the ways to do this is by pushing the route into the router and using resetConfig.

Example :
constructor(private router: Router, private route: ActivatedRoute) {}
   const config = this.router.config;
   config.push({
            path: 'dynamicRoutePath',
            component: DynamicRouteComponent,
        });
        this.router.resetConfig(config);
        this.router.navigate(['dynamicRoutePath'], {relativeTo: this.route});

This should work.

How to add additional Routes dynamically in Angular

1 Answers1