I'm setting up a new Angular7 application and I want that the root url point to one module and the /admin point to another one.
const appRoutes: Routes = [
{
path: '',
component: AppComponent,
loadChildren: '../registration/registration.module#RegistrationModule'
},
{
path: 'admin',
component: AppComponent,
loadChildren: '../admin/admin.module#AdminModule'
}
];
What I want to achieve is that the Registration module should be loaded when www.xy.com called and the admin module is loaded when www.xy.com/admin is called.
Right now the registration module is loaded for each endpoint.
You guys have any idea how this could be resolved?
When you're lazy loading a module, there is no need for the component attribute on the root routing. The lazy loaded modules will contain their own set of child routes which will determine which component to display. You're routing would look like this.
const appRoutes: Routes = [
{
path: '',
loadChildren: './registration/registration.module#RegistrationModule'
},
{
path: 'admin',
loadChildren: './admin/admin.module#AdminModule'
}
];
I also put together a stackblitz of a working example of how you might structure something like this.