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);
Finally I figured it out just change
{ path: '', loadChildren: './lazy.module#LazyModule' },
{ path: '**', redirectTo: '' }
in app.routing.ts
solves my problem.