Search code examples
webpackangular-routingangular-routerangular7

In Angular 7 version Lazy Loading is not working


I have updated my angular 6 version to angular 7 version. Now I am getting error when I try to navigate to 'http://localhost:4200/pages'. I am use lazy loading route concept in my application.

Error:-

core.js:12584 ERROR Error: Uncaught (in promise): Error: Cannot find module './Pages/Test/Test.module' Error: Cannot find module './Pages/Test/Test.module' at $_lazy_route_resource lazy namespace object:5 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:14143) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) at zone.js:872 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:14134) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at $_lazy_route_resource lazy namespace object:5 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:14143) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)

app-routing.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes} from '@angular/router';

export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 }
 {
  path: 'test',
  loadChildren: './Pages/test/test.module#TestModule'
 }      
]

Tell me, how to solved this error.


Solution

  • After trying many changes, I found that my app.routing.ts should be like this:-

    import { TestModule } from './Pages/test/test.module';
    
     export const AppRoutes : Routes = [
     {
      path : '',
      redirectTo: 'test',
      pathMatch: 'full',
     }
     {
      path: 'test',
      loadChildren: () =>  TestModule
     }      
    ]
    

    After changes this works perfect for me.