Following this tutorial: https://angular.io/guide/lazy-loading-ngmodules#create-a-feature-module-with-routing
I wanted to make the following:
When I go to /customers, I want to be accessing a new module where I will store all customer-related components.
I want to have a menu bar(in that new module), that says Subpage1, Subpage2 etc. and that is there all the time(important).
In app.module I know that I can put anything in app.component.html, before , and it will be there no matter on which page I am. Also, in app-routing.module.ts I never specify that the path for '' should be AppComponent, it is automatically loaded as default.
How can I achieve the same with another module, that I load with:
const routes: Routes = [
{ path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) }
];
CodePudding user response:
I didn't know what children means, so with adding:
path: '',
component: CustomersComponent,
children:[
{
path: 'home1',
component: Hom1Component
},
{
path: 'home2',
component: Hom2Component
}
]
with this, router-outlet in customerComponent will show it's own components, and keep stuff from customer.component.html in place all the time.
CodePudding user response:
1-first you need to define the routes in costumers module like so :
path: '',
component: CustomersComponent,
children:[
{
path: 'anything1',
component: anything1Component
},
{
path: 'anything2',
component: anything2Component
},
{
path:'YourMenu',
component:YourMenucomponent,
children:[
{
path: ' Subpage1',
component: Subpage1component
},
{
path: ' Subpage2',
component: Subpage2component
}
]
]
2-you need to have another router-oulet in costumers.component.html inorder to load yourmenu component.
3-and dont forget to define yourmenu component in costumers module!