> For the complete documentation index, see [llms.txt](https://bharat-tiwari.gitbook.io/our-tech-journal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bharat-tiwari.gitbook.io/our-tech-journal/angular-4/preloading.md).

# Preloading

Preloading is similar to lazy-loading except that these modules get loaded immediately after the required eager modules are loaded whereas lazy-loaded modules get loaded only when user navigates to their routes. Thus Preloading modules can be used to load the modules faster compared to lazy-loaded modules while still giving us the benefit that lazy-loading modules provide i.e. faster initial loading of the app by not having to load those modules during initial rendering of the app.

To Preload all the modules that are configured to be lazy-loaded, use the `PreloadAllModules` as strategy for preloading in the root app module's as shown below:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { Route, RouterModule, PreloadAllModules } from '@angular/router';

import { AppComponent } from './app.component';
import { LoginComponent } from '../login';
import { HomeComponent } from '../home';   
import { PhotoService, UserService } from '../../services';



const ROUTES: Route[] = [
  { path: '', component: LoginComponent},
  { path: 'home', component: HomeComponent},
  { path: 'photos', loadChildren: './photos/photos.module#PhotosModule' }
]

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot(ROUTES, { preloadingStrategy: PreloadAllModules })
  ],
  providers: [
    PhotoService,
    UserService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

With `PreloadAllModules` strategy used above, all the lazy-loaded modules would be 'preloaded' thereby saving us from the bit of network latency that lazy-loading would have costed us.

If you want to have some selected modules, that are not usually used by the user, still lazy-loaded , some custom configuration can be used for configuring few modules to be preloading and few to be lazy-loading.