Why is Angular Lazy loading and routing not working after migrating to Angular 6?

87 views Asked by At

In my application , lazy loading was perfectly working in Angular 4 and 5 . However , after I migrated to Angular 6 , the lazy loading and routing has stopped working when I use ng serve.

The routes for the application are defined in app.module.ts like this :

 RouterModule.forRoot([
      { path: 'info/:gitCode/:pemCode/:getRtComponent', component: RedComponent },
      { path: 'info/:gitCode/:pemCode/:getFaq/:getRtComponent', component: RedComponent },
      { path: 'loadGuardsInfo/:gitCode/:pemCode/:getRtComponent', component: RedComponent },
      { path: 'loadGuardsInfo/:getRtComponent', component: RedComponent },
      { path: 'recDet', component: RecDetComponent },
      { path: 'SlaveComponent/:pfScreen', loadChildren: './ally/slave/slave.module#SlaveModule' },
      { path: 'MasterComponent/:pfScreen', loadChildren: './ally/master/master.module#MasterModule' },
      { path: 'DashedComponent/:pfScreen', loadChildren: './ally/dashed/dashed.module#DashedModule' }
      ])
  ],
  providers: [ReqService, { provide: APP_BASE_HREF, useValue: './' }, {
    provide: ErrorHandler,
    useClass: GlobalErrorHandler
  }, { provide: LocationStrategy, useClass: HashLocationStrategy }],
  bootstrap: [AppComponent],
  exports: []

I have gone through a lot of articles on the internet about this and tried out a lot of things , but none worked . While migrating from angular 5 to 6, a lot of configurations in the old code got changed like : angular-cli.json got changed to angular.json . Lot of packages in package.json got upgraded and 2 new packages got introduced : @angular-devkit/build-angular and rxjs-compat . The package : @angular-devkit/build-angular seems to be utilized by the angular.json for build and serve . I am not understanding why the migration has broken the routing and lazy loading .

Can someone please help me out here ?

0

There are 0 answers