angular2 lazy loading module routes

Question

I got this on my main route module:

 { 
    path: 'alpha/aaa', 
    loadChildren: 'app/connection/connection.module#ConnectionModule'
  },

  { 
    path: 'num/123', 
    loadChildren: 'app/connection/connection.module#ConnectionModule'
  },

  { 
    path: 'rand/a2b1', 
    loadChildren: 'app/connection/connection.module#ConnectionModule'
  },

The routes are different but they are in one module because they have the same templates and functionalities.

My question is how would I map the defined paths above in the sub module's route if those are the exact path that I need? So I tried the following but didn't work:

const routes: Routes = [
  { path: 'alpha/aaa', pathMatch:'full', component: Component1 },
  { path: 'num/123', pathMatch:'full', component: Component2 },
  { path: 'rand/a2b1', pathMatch:'full', component: Component3 }
];

Would this work? { path: '', component: WeAreSharingComponent } — DeborahK
– DeborahK, Commented Mar 28, 2017 at 17:50
How about this : { path: '/alpha/aaa', component: Component1 } Slash at the front for a non-relative path? — DeborahK
– DeborahK, Commented Mar 28, 2017 at 18:46
Tried but didn't work. I can separate each to have their own module and create a common module for the three. I was just thinking that there must be a way to make it work. I can't believe that someone hasn't had the same problem. — dmb
– dmb, Commented Mar 29, 2017 at 3:44

Agorilla · Accepted Answer · 2017-08-30 11:15:54Z

1

Unfortunately that's not possible to do, but you can achieve something similar if you change your routes and give a common route for the whole module. ie:

{ 
    path: 'connection', 
    loadChildren: 'app/connection/connection.module#ConnectionModule'
}

and then as you do now

const routes: Routes = [
  { path: 'alpha/aaa', component: Component1 },
  { path: 'num/123', component: Component2 },
  { path: 'rand/a2b1', component: Component3 }
];

You would then access them like

/connection/alpha/aaa 
/connection/num/123
/connection/rand/a2b1

answered Aug 30, 2017 at 11:15

Agorilla

3231 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular2 lazy loading module routes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related