Multiple Components from Same Lazy Route Not Working

问题

Question - can I have multiple routes point to the same lazy loaded module (and associated router?). I keep getting "Error: Cannot match any routes: 'Page30'".

Here is my app.routing.ts that sets up the lazy loading:

const appRoutes: Routes = [
  { path: '', component: Page1Component },                          // <-- default page
  { path: 'Page1', component: Page1Component },
  { path: 'Page2', component: Page2Component },
  { path: 'Page3', component: Page3Component },
  { path: 'Page30', loadChildren: './+lazy/lazy.module#LazyModule' },
  { path: 'Page31', loadChildren: './+lazy/lazy.module#LazyModule' },

  // { path: '**', component: PageNotFoundComponent }           // <-- route not found
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Here is the +lazy/lazy.routing.ts:

import { Page30Component } from './page30/page30.component';
import { Page31Component } from './page31/page31.component';

const routes: Routes = [

  { path: '', component: Page30Component },
  {path: 'Page30', component: Page30Component},
  {path: 'Page31', component: Page31Component}

];

export const routing: ModuleWithProviders =   RouterModule.forChild(routes);

Here are the associated routerLinks. (P1 is eager, 30 & 31 are lazy):

{ label: 'Take Payment', icon: 'ui-icon-assignment-ind', routerLink: ['/Page1'] },
{ label: 'Loss Mitigation', icon: 'ui-icon-announcement', routerLink: ['/Page31'] },
{ label: 'Bankruptcy', icon: 'ui-icon-create', routerLink: ['/Page30'] }

If I remove the '' default path in the lazy routing, I get the "Error: Cannot match any routes: 'Page30'". The routeLinks look right as they change to /Page30 and /Page31 - but for some reason they are not being correctly routed. Any help appreciated. FWIW, I'm using Angular CLI with Web Pack.

回答1:

So is it working with { path: '', component: Page30Component }? If so, I imagine it's because Page30 is setup as the parent route that points to the module, and within the child roots the child route is set to Page30. So www.asdf.com/Page30/Page30 and www.asdf.com/Page31/Page30 would be equivalent.

So the app routes would be:

const appRoutes: Routes = [
  { path: '', component: Page1Component },                          // <-- default page
  { path: 'Page1', component: Page1Component },
  { path: 'Page2', component: Page2Component },
  { path: 'Page3', component: Page3Component },
  { path: 'Lazy', loadChildren: './+lazy/lazy.module#LazyModule' },

  // { path: '**', component: PageNotFoundComponent }           // <-- route not found
];

and the child routes could be:

const routes: Routes = [    
  {path: 'Page30', component: Page30Component},
  {path: 'Page31', component: Page31Component}    
];

which you would access via www.asdf.com/Lazy/Page30 and www.asdf.com/Lazy/Page31

回答2:

I was trying the same thing and I have found a solution.

In app.module routing you can do something like

{
 path: '',
 component: UserLayoutComponent,
 children: [
 {path: '', component: HomeComponent},
 {
  path: '',
  loadChildren:'app/user/user/user.module#UserModule'
 }
 ]
 }

Now the UserModule is lazy loaded

and in User Module routing can go like this

const routes: Routes = [
 { path: 'profile', component: ProfileComponent },
 { path: 'edit', component: EditProfileComponent} 
];

likewise profile and edit will work like : localhost:8080/profile and localhost:8080/edit

To check if the module is actually lazy loading put some console.log() inside module's constructor.

Hope this helps, thanks

来源：https://stackoverflow.com/questions/40246430/multiple-components-from-same-lazy-route-not-working

标签

angular

angular2-routing