2

I just noticed that Angular 8 (which will be released soon), has deprecated "string-typed router loadChildren". (ticket)

Do I understand correctly that they are refering to ...

const routes = [
  {
    path: 'production',
    loadChildren: './production/production.module#ProductionModule' // <<--this
  }],

To migrate to Angular 8, what is the solution ?

In the ticket they are refering to "dynamic imports". Am I correct that this refers to the following proposal:

let module = await import('/modules/my-module.js');

Could somebody give a preview of what the routing file should actually look like if we wanted to use lazy loading in the future ?

bvdb
  • 22,839
  • 10
  • 110
  • 123

2 Answers2

6

As loadChildren:string is deprecated in angular 8 Change your loadChildren declarations

From

loadChildren: './production/production.module#ProductionModule'

To

loadChildren: () => import('./production/production.module').then(m => m.ProductionModule)

For more you can ref angular official git link and commit

Srikrushna
  • 4,366
  • 2
  • 39
  • 46
2

Apparently, it's not the entire "loadChildren" : ... which is deprecated. It just will no longer accept strings. Instead you have to specify a function now.

The documentation is already available here.

It comes down to:

const routes = [
  {
    path: 'lazy',
    loadChildren : () => import('./production/production.module').then(m => m.ProductionModule),
  }
];
bvdb
  • 22,839
  • 10
  • 110
  • 123
  • With the loadChildren string, you could name the lazy loaded chunk with `loadChildren: './production/production.module#ProductionModule'?chunkName=production` will we be able to do that in any way going forward? I'd like the names of the javascript files to have meaning and file names like 1.js and 2.js are meaningless. – nephiw Jan 17 '20 at 21:20
  • @nephiw Maybe you just need to update your angular version to the latest. I found this github bug report about this: https://github.com/angular/angular-cli/issues/14251 and there actually was a fix here: https://github.com/angular/angular-cli/commit/3019ad5a56d2be8fcc69092d5935edba0e56de8c – bvdb Jan 17 '20 at 22:03
  • Thanks @bvdb - currently, my build is based on webpack not the CLI; I have a very large legacy project that is a hybrid angularjs + Angular 7 and I have not figured out how to get to the CLI yet. However, I maybe able to use that issue to build a solution that will work. Thanks for the info. – nephiw Jan 20 '20 at 22:58