Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular4 How to load a module in an eager way [duplicate]

Tags:

angular

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).

like image 801
Scipion Avatar asked Oct 14 '17 21:10

Scipion


People also ask

How do I load an eager module?

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.

How do you lazy load a module in Angular?

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) } ];

What is difference between eager and lazy loading?

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.

How do you use a lazy load module without routing?

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.


1 Answers

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 {
}
like image 175
omeralper Avatar answered Oct 20 '22 11:10

omeralper