Angular 5 Router with Lazy Loading Modules not working

Question

I have an app and I make the structure to have feature modules with owns routes:

// Here is the Feature Module

RouterModule.forChild([
    {
        path: ':cube_id/import-data',
        component: ImportDataComponent,
        canActivate: [CUBE_GUARD]
    },
    {
        path: ':cube_id/consolidation',
        component: ConsolidationComponent,
        canActivate: [CUBE_GUARD]
    }
     ....

// App routing:

const appRoutes: Routes = [

    {
        path: 'epic',
        loadChildren: './traitement/traitement.module#TraitementModule'
    },
    { 
        path: 'not-authorized', 
        component: NotAuthorizedComponent 
    },
    {
        path: '',
        component: HomeComponent,
        pathMatch: 'full',
        canActivate: [ HOME_GUARD ],
        children: [

        ]
    }
];


@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes, { 
            useHash: true
        })
    ],
    providers: [
        CurrentUserService,
        GuardFactory.createGuard(HOME_GUARD, homeGuard)
    ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {

}

And in root app module I have imported the AppRoutingModule.

When I try to access the item from menu, I get this error:

core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'epic/import-data'
Error: Cannot match any routes. URL Segment: 'epic/import-data'

If I import Features Modules in Root Module everything works fine. Any ideas what I'm doing wrong?

isn't path declared in route is epic/<cube_id>/import-data? — Sarthak Aggarwal
– Sarthak Aggarwal, Commented Nov 16, 2018 at 10:41

Sunil · Accepted Answer · 2018-11-16 10:49:11Z

3

As per your configuration, routing is expecting dynamic value :cube_id. So basically your path should be as -

epic/1/import-data

Check your routerLink and pass the value for cube_id.

ex :

<a [routerLink]="['/epic', id, 'import-data']">Home</a>

edited Nov 16, 2018 at 10:49

answered Nov 16, 2018 at 10:42

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

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

2 Comments

Carnaru Valentin Over a year ago

I have a Cube, so it's 3 drop down items in menu with same sub items so we use same component for 3 different menu items. And it's set like this: <a [routerLink]= "['epic', 'consolidation']" id="c_epic"> <i class="fa fa-angle-right"></i> {{ 'MENU.epic.consolidation' | translate }} </a><a [routerLink]= "['prev', 'consolidation']" id="c_epic"> <i class="fa fa-angle-right"></i> {{ 'MENU.epic.consolidation' | translate }} </a>

Sunil Over a year ago

yeah, here you are not passing cube_id however as per your configuration it is mendatory.

vinS · Accepted Answer · 2018-11-16 14:45:05Z

1

Try adding "cube_id" after /epic as your route configuration contains id. So your URL will become epic/{{id}}/import-data. If you don't want to pass any id, just create another route without id.If you want to handle such errors related to routing just add this code to app-routing.module.ts file.

export class AppRoutingModule{ 
  constructor(private router : Router){
    this.router.errorHandler = (error: any) =>{
      showSomeErrorPage();`enter code here`
      return false;
    }
  }
}

edited Nov 16, 2018 at 14:45

vinS

1,4755 gold badges25 silver badges39 bronze badges

answered Nov 16, 2018 at 11:56

Pooja Pawar

112 bronze badges

Comments

Carnaru Valentin · Accepted Answer · 2018-11-16 12:07:41Z

0

Thanks to Sunil Singh and Pooja Pawar I solve it adding this:

const appRoutes: Routes = [

    {
        path: ':cube_id',
        loadChildren: './traitement/traitement.module#TraitementModule'
    },

And in view:

  <li routerLinkActive="current-item" *requiresAuthorization="['prof', 'journal']">
    <a [routerLink]="['prof', 'prof', 'journal']" id="j_prof">
      <i class="fa fa-angle-right"></i> 
      {{ 'MENU.prof.journal' | translate }}
    </a>
  </li>

answered Nov 16, 2018 at 12:07

Carnaru Valentin

1,92524 silver badges28 bronze badges

Collectives™ on Stack Overflow

Angular 5 Router with Lazy Loading Modules not working

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related