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

[kunal00731]

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 ?

My Package.json dependencies are listed below :

	"dependencies": {
		"@angular/animations": "^6.1.10",
		"@angular/common": "^6.1.10",
		"@angular/compiler": "^6.1.10",
		"@angular/core": "^6.1.10",
		"@angular/forms": "^6.1.10",
		"@angular/http": "^6.1.10",
		"@angular/platform-browser": "^6.1.10",
		"@angular/platform-browser-dynamic": "^6.1.10",
		"@angular/platform-server": "^6.1.10",
		"@angular/router": "^6.1.10",
		"@ng-idle/core": "^6.0.0-beta.5",
		"@ng-idle/keepalive": "^6.0.0-beta.5",
		"ag-grid": "14.2.0",
		"ag-grid-angular": "14.2.0",
		"angular-polyfills": "1.0.1",
		"angular2-uuid": "1.1.1",
		"bootstrap": "3.3.7",
		"core-js": "2.5.3",
		"exceljs": "1.0.0",
		"file-saver": "1.3.3",
		"font-awesome": "4.7.0",
		"http-proxy": "1.16.2",
		"primeng": "4.3.0",
		"rxjs": "^6.6.3",
		"rxjs-compat": "^6.2.0",
		"ts-helpers": "1.1.2",
		"xlsx": "0.10.9",
		"zone.js": "^0.8.29"
	  },
	  "devDependencies": {
		"@angular-devkit/build-angular": "~0.8.0",
		"@angular/cli": "^6.2.9",
		"@angular/compiler-cli": "^6.1.10",
		"@types/jasmine": "2.8.6",
		"@types/node": "7.0.57",
		"@types/systemjs": "0.20.6",
		"codelyzer": "^6.0.0",
		"jasmine-core": "2.6.4",
		"jasmine-spec-reporter": "4.2.1",
		"jquery": "3.3.1",
		"jquery-ui": "1.12.1",
		"karma": "1.3.0",
		"karma-chrome-launcher": "2.1.1",
		"karma-cli": "1.0.1",
		"karma-html-reporter": "0.1.3",
		"karma-htmlfile-reporter": "0.3.5",
		"karma-jasmine": "1.1.1",
		"karma-remap-istanbul": "0.2.2",
		"karma-story-reporter": "0.3.1",
		"protractor": "4.0.14",
		"ts-node": "3.0.4",
		"tslint": "5.9.1",
		"typescript": "^2.7.2"
	  }

[destus90]

Hasn't loadChildren: './ally/slave/slave.module#SlaveModule' been deprecated? You should use loadChildren: () => import('./ally/slave/slave.module').then(m => m.SlaveModule) instead.

[kunal00731]

@destus90 Isn't that a feature introduced in angular 8 and 9? Will it work for angular 6?
URL : https://update.angular.io/?l=3&v=7.0-8.0
In angular.io, they specifically mention that this is something to be done when migrating to angular 8 or 9. Thoughts?

[geromegrignon]

@kunal00731 would you have a repo to share in order to test it?

[kunal00731]

@geromegrignon Unfortunately , I cannot as it's restricted code . However, I can provide excerpts if required .
One thing I noted is that , before the upgrade ng serve used to take quite a bit of time as it used to compile all the modules one by one . After the upgrade , ng serve happens very quickly . And the application that loads is now blank and nothing is rendered .

Before the upgrade :

After the upgrade :

[alan-agius4]

Hi @kunal00731,

Without a minimal reproduction it hard to tell what is the cause of the problem you are experiencing.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

It's also important to point out Angular version 6 is no longer under support https://angular.io/guide/releases#support-policy-and-schedule. The current LTS version is version 8 which will end in November 28, 2020.

[kunal00731]

@alan-agius4 @destus90 @geromegrignon
One thing that I just found out now , by trying to upgrade the packages one by one is that :
The below 2 configurations in package.json for angular-devkit and angular-cli are causing issues :

    "@angular-devkit/build-angular": "0.8.0",
    "@angular/cli": "6.2.9",

The devkit used in angular.json for doing build and serve is causing some kind of issue in compilation . It is not compiling in a lazy loaded fashion and the compilation is extremely fast (the app is quite big; in Angular 4 it took some time to cmpile the lazy loaded modules). However I am not getting any error .

[alan-agius4]

@kunal00731, since version 6 which was released 2 years ago a lot has changed. The issue you are experiencing might very well the fixed in a more recent version.

Without a reproduction we cannot determine what’s the root cause or if the issue has been already been solved.

My recommendation at this point is to update to a more recent version (make sure to use ng update) which will also update lazy loading paths to using import syntax and migrate you off deprecated behaviour.

If you cannot update to a more recent version, try to make a minimal reproduction of the problem using ng new and seek support on StackOverflow.

As mentioned previously Angular 6 is no longer supported by the Angular team the current LTS version is 8.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}