Setting dynamic routes using router.config.unshift() only works if its used from `AppComponent app.component.ts`

Question

I am using Angular 4 and I am trying to set the routes dynamically using some external data. Based on some of solutions provided over the internet I am trying to load the routes dynamically by invoking : this.router.config.unshift({path:'base',component:BaseComponent,data:this.rcs.getRouteData('base')});
here rcs is just a service - (provider) of some data to be passed to the component being invoked on this path.

However if I try to set the same route paths dynamically from some other component (i.e, by invoking router->config->unshift method from some other component other than AppComponent (app.component.ts) ) the routes dont work. In this case if I try to route to paths which are set dynamically, it takes be back to the component which is set of "**" (basically to the component that should be displayed when no matching path configurations are found.

Am i missing something here, how can i load angular paths dynamically from any other component other than AppComponent.

Code: app.component.ts :

import {Component} from '@angular/core';
import{DataService} from './services/data.service';
import {Item} from './components/item/item';
import {BaseComponent}from './components/base/base.component';
import {ItemData} from './components/item/item-data';
import {ProcessContextService} from './services/context/process-context.service';
import {RouteCfgService} from './services/routing/route-cfg.service';
import {Router} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  public  constructor(private pcs:ProcessContextService,private dataservice:DataService, private router:Router,private rcs: RouteCfgService){
  this.rcs.setRoutes();
  alert("datatosetis ROOTC CONTROLLER:"+JSON.stringify(this.rcs.getRouteData('base')));
  this.router.config.unshift({path:'base',component:BaseComponent,data:this.rcs.getRouteData('base')});
  console.log("THE ROUTER CONFIG IS:");
  console.log(this.router.config);
    }

}

app.component.html

<router-outlet></router-outlet>

the Routing module

    import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {PageNotFoundComponent} from '../../components/page-not-found/page-not-found.component';
import {RootcComponent}from '../../components/rootc/rootc.component';
import {IdeComponent}from '../../components/architect/ide/ide.component'
import { MngOrgComponent } from '../../components/architect/mng-org/mng-org.component';
import {BaseComponent}from '../../components/base/base.component';
import { DataStoreViewComponent } from '../../components/architect/data-store-view/data-store-view.component';

const routes: Routes = [
      {
       path:'login',
       component:RootcComponent
      },  {
           path:'ide',
           component:IdeComponent,
           children:[
                     {
                         path: 'setuporg',
                         component: MngOrgComponent,
                         outlet: 'ideolet'
                       }, {
                            path: 'datastoreview',
                            component: DataStoreViewComponent,
                            // outlet: 'ideolet'
                          },
                           // {
                           //     path: 'basecomponent',
                           //     component: BaseComponent,
                           //     // outlet: 'ideolet'
                           //   }
                    ]
    },
  {
    path: '',
    redirectTo:'/login',
    pathMatch:'full'
  },
   {
      path: '**',
      component:PageNotFoundComponent,
      pathMatch:'full'
    },


];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class ApprouteRoutingModule { }

@Vivek i have edited the question to add the code. basically if i palce the logic that is getting executed above from the constructor of `AppComponent` into `RootcComponent` and if i first traverse to `http://localhost:4200/login` it `alerts/console-logs` the router-config with the entry for the `base path routing` however after that if i go to `http://localhost:4200/base` path it opens the `component:PageNotFoundComponent` . But if i have the above code, the path `http://localhost:4200/base` routes correctly to the `BaseComponent` — Tarun Patel, Oct 18 '18 at 20:13
When you have the logic in `RootComponent`, could you try `/login/base`? I'm suspecting, may be it is appending path as child. — Aragorn, Oct 18 '18 at 20:32
@Vivek :i tried moving the login to `RootcComponent`, but the path `login/base` still ends up on the `component:PageNotFoundComponent' . NOTE: router-config when printed which having logic in `AppComponent or RootcComponent` is the same as below. ** Console-log for router config registered is: ** `(5) [{…}, {…}, {…}, {…}, {…}] 0: {path: "base/toolbar", component: ƒ} 1: {path: "base", component: ƒ, data: Item} 2: {path: "login", component: ƒ} 3: {path: "", redirectTo: "/login", pathMatch: "full"} 4: {path: "**", component: ƒ} length: 5 __proto__: Array(0)` — Tarun Patel, Oct 19 '18 at 10:30

Setting dynamic routes using router.config.unshift() only works if its used from `AppComponent app.component.ts`

0 Answers0