Search code examples
angularroutesangular-routingangular4-router

Angular routing child lazy module


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);

Solution

  • Finally I figured it out just change

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

    in app.routing.ts solves my problem.