Menu
In Angular4, you can lazy load your module using the loadChildren attribute in your routing config with pathToMyModule#MyModule. I was wondering if there was any attribute I could specify to always load my module (so basically disabling the lazy loading).
801
Eager loading: To load a feature module eagerly, we need to import it into application module using imports metadata of @NgModule decorator. Eager loading is useful in small size applications. In eager loading, all the feature modules will be loaded before the application starts.
To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule routes configuration as follows. content_copy const routes: Routes = [ { path: 'items', loadChildren: () => import('./items/items.module').then(m => m.ItemsModule) } ];
While lazy loading delays the initialization of a resource, eager loading initializes or loads a resource as soon as the code is executed. Eager loading also involves pre-loading related entities referenced by a resource.
define where we want to load our component in the template with the ng-template tag, define its view query through ViewChild decorator, which gives us access to the DOM and defines the container to which the component will be added, finally, dynamic import the component and add it to the container.
import all the modules in the module that you bootstrap when you start the application. In general it is called AppModule. It is the default way though. Then don't use loadChrildren. The modules should import each other hierarchically, then all modules will be imported eagerly.
@NgModule({
imports: [
AppRoutingModule,
LoginModule,
//here you should import all other modules, or other the modules should import each other hierarchically
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
@NgModule({
imports: [
RouterModule.forRoot([
{path: '', component: SomeComponent}
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
}
@NgModule({
imports: [
LoginRoutingModule
]
})
export class LoginModule {
}
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'login',
children: [
{path: '', pathMatch: 'full', redirectTo: 'somepath'},
{path: 'somepath', component: SomeOtherComponent},
]
}
])
],
exports: [
RouterModule
]
})
export class LoginRoutingModule {
}
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
