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 ?