Angular 2
एक मॉड्यूल लोड हो रहा है आलसी

आलसी लोडिंग उदाहरण

आलसी लोडिंग मॉड्यूल हमें स्टार्टअप समय को कम करने में मदद करता है। आलसी लोडिंग के साथ हमारे एप्लिकेशन को एक ही बार में सब कुछ लोड करने की आवश्यकता नहीं है, यह केवल उस लोड करने की आवश्यकता है जो उपयोगकर्ता यह देखने की उम्मीद करता है कि ऐप पहले लोड कब करता है। उपयोगकर्ता जो उनके मार्गों पर नेविगेट करते हैं, वे मॉड्यूल केवल लोड किए गए हैं।

एप्लिकेशन / app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { EagerComponent } from './eager.component';
import { routing } from './app.routing';
@NgModule({
  imports: [
    BrowserModule,
    routing
  ],
  declarations: [
    AppComponent,
    EagerComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

एप्लिकेशन / app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `<h1>My App</h1>    <nav>
      <a routerLink="eager">Eager</a>
      <a routerLink="lazy">Lazy</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {}

एप्लिकेशन / app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EagerComponent } from './eager.component';
const routes: Routes = [
  { path: '', redirectTo: 'eager', pathMatch: 'full' },
  { path: 'eager', component: EagerComponent },
  { path: 'lazy', loadChildren: './lazy.module' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

एप्लिकेशन / eager.component.ts

import { Component } from '@angular/core';
@Component({
  template: '`<p>Eager Component</p>`'
})
export class EagerComponent {}

इसमें LazyModule के अलावा कुछ खास नहीं है क्योंकि इसकी अपनी रूटिंग और LazyComponent नामक एक घटक है (लेकिन आपके मॉड्यूल या simliar को नाम देना आवश्यक नहीं है)।

एप्लिकेशन / lazy.module.ts

import { NgModule } from '@angular/core';
import { LazyComponent }   from './lazy.component';
import { routing } from './lazy.routing';
@NgModule({
  imports: [routing],
  declarations: [LazyComponent]
})
export class LazyModule {}

एप्लिकेशन / lazy.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LazyComponent } from './lazy.component';
const routes: Routes = [
  { path: '', component: LazyComponent }
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);

एप्लिकेशन / lazy.component.ts

import { Component } from '@angular/core';
@Component({
  template: `<p>Lazy Component</p>`
})
export class LazyComponent {}