angular: Unable to AOT compile when loading a component with TypeScript 2.4 Dynamic Import Expressions

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

AOT compiler appears to ignore lazy routes when imported using Dynamic Import Expressions

{ path: '', loadChildren: async () => (await import('./home/home.module')).HomeModule }

Expected behavior

AOT could compile those local imported sources

Minimal reproduction of the problem with instructions

https://github.com/patrickmichalina/fusebox-angular-universal-starter/blob/master/src/client/app/app-routing.module.ts

What is the motivation / use case for changing the behavior?

I would like to be able to use AOT w/ Lazy Loading w/ latest typescript features.

For reference, I am using the FuseBox bundler (not webpack)

Environment

Angular version: 5.2.0

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 15 (7 by maintainers)

Most upvoted comments

@patrickmichalina yes. I use this format, and replace with loader at build time. All works.

Delagen on Jan 14, 2018

You’ll need two transformers to achieve that lazy-loading process:

1. Wrap the arrow function to local exported function:

from:

const routes = [
  { path: '', loadChildren: () => import('./lazy.module').then(m => m.LazyModule) }
]

to:

export function loadChildren_1() {
  return import('./lazy.module').then(m => m.LazyModule)
}

export const routes = [
  { path: '', loadChildren: loadChildren_1 }
]

This is similar to the metadata lowering process, must be done before AOT compilation.

2. Mapping NgModule to corresponding NgFactory:

from:

export function loadChildren_1() {
  return import('./lazy.module').then(m => m.LazyModule)
}

export const routes = [
  { path: '', loadChildren: loadChildren_1 }
]

to:

export function loadChildren_1() {
  return import('./lazy.module.ngfactory').then(m => m.LazyModuleNgFactory)
}

export const routes = [
  { path: '', loadChildren: loadChildren_1 }
]

The real path mapping depends on where you generate the factory files, should still be done before (or during) AOT compilation, since dynamic import is still under type-checking.

The first one is valid feature request for more general metadata lowering support, but the second one is tooling specific and does not belong to this repo. So you still need to write your own loader after arrow function being supported.

trotyl on Jan 14, 2018