[Fixed] Angular2 Router – not able to make resetConfig work


I am trying to add some configuration to Angular2 Router at runtime.

What I am doing is very simple. In the AppModule I load the initial configuration of the Router as per guidelines:


  declarations: [
  imports: [
  providers: [appRoutingProviders],
  bootstrap: [AppComponent]
export class AppModule { }

appRoutes — app.routes.ts

const appRoutes: Routes = [
        { path: '', component: PocWelcomeComponent },
        { path: '**', component: PageNotFoundComponent }
    export const appRoutingProviders: any[] = [
    export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Then in the AppComponent onInit() method I add some routes like this


export class AppComponent implements OnInit {

    private router: Router
  ) {}

  ngOnInit() {
    let routes = this.router.config;
    routes.push({ path: 'function1', component: Function1Component });

When I now try to navigate to function1 with the code this.router.navigate(['/payment']); I am routed to the PageNotFoundComponent.

On the contrary, if I put the configuration of the path to function1 in the configuration of AppModule, everything works.

I am also using Angular-CLI.

Any help is very much appreciated. Thanks in advance


Try this code:

let r: Route = {
    path: 'pop',
    component: PopupComponent

this.router.resetConfig([r, ...this.router.config]);

Leave a Reply

(*) Required, Your email will not be published