AOT broken when using loadChildren and a function : Replace modules import by modules factories ?

When I try to build my app with AOT since I’m using loadChildren with a function it breaks (not at compilation but when running the app in the browser, complaining that r.create is not a function).

According to https://github.com/angular/angular/pull/13909 it seems that instead of having

we should rather import the factory (which is not available when coding, only when building) :

SamVerschueren asked if it could be replaced at build time (and opened an issue https://github.com/angular/angular/issues/14005 for that).

mhevery explained why it can’t be handled at build time by angular https://github.com/angular/angular/pull/13909#issuecomment-274650555.

I’m wondering if this can be done by angular-cli ? Or as soon as we use loadChildren with a function (don’t want AOT or AOT is broken due to some other bugs for example) we have to manually do that ?

[Meligy]

I have been involved in attempts to get something like this working. The core team guys suggest it’s a tough nut to crack. It’s something I imagine the compiler-cli should be doing, changing the output of the compilation, it is compilation (translation) when you think about it.

For now, the workaround is to change the loadChildren assignment to a string (lazy loading), but keep the function around to make the module get included in the same bundle instead of a separate one. Keeping the exported function not just the import makes sure it doesn’t get tree shaked / minified.

Like:

import { ProfileModule } from './profile/profile.module';

// Do not delete. Used to ensure ProfileModule is loaded in the same bundle.
// Referencing the function directly in `loadChildren` breaks AoT compiler.
export function loadProfileModule() {
    return ProfileModule;
}

export const routes: Routes = [
    // ... other routes ...
    { path: 'profile', loadChildren: './profile/profile.module#ProfileModule' }
];

Check the app-routing.module.ts in my routing test project for a working example:

https://github.com/meligy/routing-angular-cli

Specifically:

https://github.com/Meligy/routing-angular-cli/blob/deep-lazy-loading/src/app/app-routing.module.ts#L18

[wctiger]

Function with loadChildren is still not working with AOT as of 9/6/2018, CLI version 6.1.1 - have to switch to lazy loaded path to enable AOT and bypass error of ‘Runtime compiler is not loaded’.