title: LazyLoad Mode angular 8
body: <p>I developed the routes by using LazyMode in angular 8. I create the different modules (auth, pages and app) and in every components.html: (auth, pages and app.html) I put .
  I execute the command: npm run build
  but When I charged the page I don't se the chunk file, why? I forgot to do somethings?</p>
  
  <p><strong>auth.module.ts :</strong></p>
  
  <pre><code>@NgModule({
      declarations: [
          AuthComponent,
          LoginComponent,
          RegisterComponent,
          ForgotPasswordComponent,
          ResetPasswordComponent
      ],
      exports: [],
      imports: [
          FormsModule,
          CommonModule,
          AuthRoutingModule
      ]
  })
  export class AuthModule { }
  </code></pre>
  
  <p><strong>auth-routes.modules.ts</strong></p>
  
  <pre><code>const authRoutes: Routes = [
      {
          path: "login", component: LoginComponent, data: { title: "Login" }
      },
      {
          path: "register", component: RegisterComponent, data: { title: "Register" }
      },
      {
          path: "forgot/password", component: ForgotPasswordComponent, data: { title: "Forgot Password" }
      },
      {
          path: "reset/password", component: ResetPasswordComponent, data: { title: "Reset Password" }
      }
  ];
  @NgModule({
     imports: [RouterModule.forChild(authRoutes)],
     exports: [RouterModule]
  })
  export class AuthRoutingModule { }
  </code></pre>
  
  <p><strong>pages.module.ts</strong></p>
  
  <pre><code>@NgModule({
      declarations: [
          PagesComponent,
          AllUsersComponent,
          AllUsersComponent,
          TestrouteComponent
      ],
      exports: [],
      imports: [
          PagesRoutingModule,
          AuthModule,
          CommonModule,
          RouterModule
      ]
  })
  </code></pre>
  
  <p><strong>pages.routes.ts</strong></p>
  
  <pre><code>const pagesRoutes: Routes = [
      {
          path: "users", component: AllUsersComponent, data: { title: "Users" }
      },
      {
          path: "orders", component: AllOrdersComponent, data: { title: "Orders" }
      },
      {
          path: "protect", component: TestrouteComponent, data: { title: "Protect" }, canActivate: [AuthGuard]
      }
  ];
  @NgModule({
      imports: [RouterModule.forChild(pagesRoutes)],
      exports: [RouterModule]
  })
  export class PagesRoutingModule { }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
       BrowserModule,
       CommonModule,
       HttpClientModule,
       FormsModule,
       ReactiveFormsModule,
       AppRoutingModule,
       AuthModule,
       PagesModule,
       ServiceModule
    ],
    providers: [
      {
        provide: HTTP_INTERCEPTORS,
        useClass: JwtInterceptor,
        multi: true
      },
      {
        provide: HTTP_INTERCEPTORS,
        useClass: ErrorInterceptor,
        multi: true
      }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      loadChildren: './pages/auth/auth.module#AuthModule'
    },
    {
      path: '', component: PagesComponent, loadChildren: '../app/pages/pages.module.ts#PagesModule'
    },
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>