Menu
I have multiple components in one module. I want to show the components based on routing path. for http://localhost:4200/account I want to show account component. for http://localhost:4200/setting I want to show settings component ..etc
app.routing.module.ts
{
path: 'account',
loadChildren: './modules/settings/settings.module#SettingsModule',
},
{
path: 'settings',
loadChildren:'./modules/settings/settings.module#SettingsModule',
},
settings.routing.module.ts
export const routes: Routes = [
{
path: 'account',
component: accountComponent
},
{
path: 'account/edit',
component: accountEditComponent
},
{
path: 'settings',
component: settingsComponent
},
{
path: 'settings/edit',
component: settingsEditComponent
}
];
what changes I do in settings.routing.module.ts to show those components.
567
Notice that the lazy-loading syntax uses loadChildren followed by a function that uses the browser's built-in import('...') syntax for dynamic imports. The import path is the relative path to the module.
The bundle sizes for Lazy 1 and 2 are different, too. Lazy 1 only has a single component, so it is smaller than Lazy 2 (which contains three components).
Lazy loading is an approach to limit the modules that are loaded to the ones that the user currently needs. This can improve your application's performance and reduce the initial bundle size. By default, Angular uses eager loading to load modules.
Lazy loading is the technique used in optimizing your web and mobile apps, this works by rendering only needed or critical user interface items first, then quietly rendering the non-critical items later. As we build code components the application grows, and the bundle gets very cumbersome in size.
One way is to have settings as the default path (component) for this module, and all other components as a child route.
Simple DEMO
app.routing.module.ts
{
path: 'settings/account',
loadChildren: './modules/settings/settings.module#SettingsModule',
},
{
path: 'settings',
loadChildren:'./modules/settings/settings.module#SettingsModule',
},
settings.routing.module.ts
export const routes: Routes = [
{
path: '',
component: settingsComponent
},
{
path: 'edit',
component: settingsEditComponent
},
{
path: 'account',
component: accountComponent
},
{
path: 'account/edit',
component: accountEditComponent
}
];
http://localhost:4200/setting will show settings component.
http://localhost:4200/settings/account will show account component.
..etc
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
