Dynamic imports doesn't work with latest Angular and UIRouterUpgradeModule

[ViieeS]

I try to setup lazy loading using webpack with AngularCompilerPlugin, but get error.

export const testFutureState: NgHybridStateDeclaration = {
    name: 'test.**',
    url: '/',
    loadChildren: './test.module#TestModule',
};

export const testState: NgHybridStateDeclaration = {
    name: 'test',
    url: '/',
    component: TestComponent
};

ERROR in ../$$_lazy_route_resource lazy namespace object
Module not found: Error: Can't resolve '/my-app/src/app/test.module.ngfactory.js' in '/my-app/$$_lazy_route_resource'

If I declare dynamic import - all works, even if I never call this function:

const loadTestModule = () => {
    return import('./test.module').then(mod => {
        console.log(mod);
        return mod.TestModule;
    });
};

However this fails in run-time:

export const testFutureState: NgHybridStateDeclaration = {
    name: 'test.**',
    url: '/',
    loadChildren: loadTestModule
};

with error:

TypeError: factory.create is not a function
    at createModule (lazyLoadNgModule.js:47)
    at ZoneDelegate.../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17289)
    at ZoneDelegate.../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at ZoneDelegate.../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17280)
    at ZoneDelegate.../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)

All dependencies is up to date.

[ViieeS]

I found the problem. It was this line in my tsconfig.json:

"files": [
    "src/main.ts"
  ],

Now this works:

export const testFutureState: NgHybridStateDeclaration = {
    name: 'test.**',
    url: '/',
    loadChildren: './test.module#TestModule',
};

but this still not:

export const testFutureState: NgHybridStateDeclaration = {
    name: 'test.**',
    url: '/',
    loadChildren: () => import('./test.module').then(mod => mod.TestModule);
};

[WreckItRalph]

@ViieeS have a look at loading module using service

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. This does not mean that the issue is invalid. Valid issues may be reopened. Thank you for your contributions.