Angular routing child lazy module

Question

I am using Angular 4 with routing for Lazy/shared module.

Here How can I use path without my lazy module name appended in URL?

Currently my partner component accessible with http://localhost:4200/#/main/partner but I want to use same with URL http://localhost:4200/#/partner. Without appending /main to my compenent.

Same for dashboard, employeelist and addemployee, I want to access directly with localhost:4200/#/dashboard and so.

Here below is my App-Routing and lazy-Routing files.

app.routing.ts

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'emailLogin/forgotpassword', component: ForgotPasswordComponent },
  { path: 'forgotpassword', component: ForgotPasswordComponent },
  { path: 'login', redirectTo: '', component: LoginComponent },
  { path: 'main', loadChildren: './lazy.module#LazyModule' },
  { path: '**', redirectTo: '/main' }
];

export const routing = RouterModule.forRoot(routes, { useHash: true });

lazy.routing.ts

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthguardGuardPartnerUser] },
  { path: 'partner', component: PartnerComponent, canActivate: [AuthguardGuard] },
  { path: 'employeelist', component: EmployeeComponent, canActivate: [AuthguardGuardPartnerUser] },
  { path: 'addemployee', component: AddemployeeComponent, canActivate: [AuthguardGuardPartnerUser] },
  { path: 'newsurvey/:neworcopy', component: NewsurveyComponent, canActivate: [AuthguardGuardAdminPartner] },
  // .... Other components
  { path: '404pageNotFound', component: NotfoundComponent },
  { path: '**', redirectTo: '/404pageNotFound' }
];

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

Yogen Darji · Accepted Answer · 2018-03-08 07:05:30Z

1

Finally I figured it out just change

{ path: '', loadChildren: './lazy.module#LazyModule' },
{ path: '**', redirectTo: '' }

in app.routing.ts solves my problem.

answered Mar 8, 2018 at 7:05

Yogen Darji

3,31018 silver badges31 bronze badges

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

Comments

rmcsharry · Accepted Answer · 2018-03-07 09:57:27Z

I assume you know that you cannot have the same route load two different things, so you need to restructure. There are 3 ways you could do this that I can think of.

Option 1

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'emailLogin/forgotpassword', component: ForgotPasswordComponent },
  { path: 'forgotpassword', component: ForgotPasswordComponent },
  { path: 'login', redirectTo: '', component: LoginComponent },
  { path: 'partner', loadChildren: './lazy.module#LazyModule' },
  { path: '**', redirectTo: '/main' }
];

export const routing = RouterModule.forRoot(routes, { useHash: true });

const routes: Routes = [
  { path: '', component: PartnerComponent, canActivate: [AuthguardGuard] },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthguardGuardPartnerUser] },
  { path: '404pageNotFound', component: NotfoundComponent },
  { path: '**', redirectTo: '/404pageNotFound' }
];

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

This will load the lazy module at /partner, and then since the first route inside your lazy module is now '', it will load the partner component. But obviously this means your dashboard is now /partner/dashboard.

Option 2

Alternatively, move the partner component out of the lazy module and into your app module:

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'emailLogin/forgotpassword', component: ForgotPasswordComponent },
  { path: 'forgotpassword', component: ForgotPasswordComponent },
  { path: 'login', redirectTo: '', component: LoginComponent },
  { path: 'partner', component: PartnerComponent, canActivate: [AuthguardGuard] },
  { path: 'main', loadChildren: './lazy.module#LazyModule' },
  { path: '**', redirectTo: '/main' }
];

export const routing = RouterModule.forRoot(routes, { useHash: true });

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthguardGuardPartnerUser] },
  { path: '404pageNotFound', component: NotfoundComponent },
  { path: '**', redirectTo: '/404pageNotFound' }
];

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

Option 3

Or just move the partner component into its own module:

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'emailLogin/forgotpassword', component: ForgotPasswordComponent },
  { path: 'forgotpassword', component: ForgotPasswordComponent },
  { path: 'login', redirectTo: '', component: LoginComponent },
  { path: 'main', loadChildren: './lazy.module#LazyModule' },
  { path: 'partner', loadChildren: './partner.module#PartnerModule' },
  { path: '**', redirectTo: '/main' }
];

export const routing = RouterModule.forRoot(routes, { useHash: true });

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthguardGuardPartnerUser] },
  { path: '404pageNotFound', component: NotfoundComponent },
  { path: '**', redirectTo: '/404pageNotFound' }
];

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

partner.module.ts

const routes: Routes = [
  { path: '', component: PartnerComponent, canActivate: [AuthguardGuard] },
];

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

I suspect the 3rd option is probably most suitable as it keeps all your current routes the same, and provides a bit more flexibility going forward.

in Option 1, Can I restructure to use /partner for partner and /dashboard for dashboard module?
Yes, just move the /dashboard route and component into your app module and out of the lazy module. Or create a dashboard module (which is what I would do, as you will most likely add more components to the dashboard module later)

Collectives™ on Stack Overflow

Angular routing child lazy module

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related