Angular Router - Lazy loading without lost a url segment

There are 3 possible solutions (workarounds) I know of:

1. Separate lazy module into 2 lazy modules with separate routing - different urls usually mean that those components do separate things, and should be in their own modules
2. Add a prefix before those components - instead of url/crisis-admin and url/crisis-user you could do url/crisis/admin and url/crisis/user. (or url/crisis/crisis-admin if that looks nicer to you)
3. Route / to module, so you can declare further routing there (you probably don't want to do it)

In the example with pages you should separate it like this:

url/page //base url
----url/page/30
----url/page/31

Or even better:

url/page?number=30
url/page?number=31

And fit those pages into single component (if that is feasible for you)

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

You can have a router config like this one:

const routes: any = [{
    path: "crisis-center",
    loadChildren: "crisis.module#CrisisModule"
}, 
{ 
    path: "crisis-admin", 
    loadChildren: "crisis.module#CrisisModule"
}];
export const appRoutes: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: false});

In your child router config (must be imported by your crisis-center module):

const routes: Routes = [{
    path: "crisis-center",
    component: CrisisListComponent,
    pathMatch: "full"
},{
    path: "crisis-admin",
    component: CrisisAdminComponent,
    pathMatch: "full"
}];

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

This is just a long shoot, I didn't tried it yet.