Routes defined by loadChildren with a factory function do not get compiled by AOT

[babeal]

Bug Report or Feature Request (mark with an x)

[x ] bug report

Versions.

Angular CLI: 1.5.0
Node: 6.9.1
OS: darwin x64

Repro steps.

When compiling an app AOT, modules that are loaded using a function for loadChildren do not get compiled properly. We need this functionality to properly load routes from modules. We cannot use the lazy load string syntax because these modules exist as packages in the node_module folders and lazy loaded routes inside of a node module package are not supported by the CLI yet.

export function loadChildModule() {
    return ChildModule;
}

export const routes: Routes = [
    {
        path: '',
        component: ParentComponent,
        children: [
            {
                path: '',
                loadChildren: loadChildModule
            }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

The log given by the failure.

vendor.bf2a9d83f92ee4918125.bundle.js:1 ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded
Error: Runtime compiler is not loaded
    at J (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at t.compileModuleAsync (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e.project (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e._tryNext (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e._next (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e.T14+.e.next (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e._subscribe (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e.t._trySubscribe (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e.t.subscribe (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at t.call (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at J (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at t.compileModuleAsync (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e.project (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e._tryNext (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e._next (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e.T14+.e.next (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e._subscribe (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e.t._trySubscribe (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at e.t.subscribe (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at t.call (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at c (polyfills.f5c660f62615965d5e39.bundle.js:1)
    at c (polyfills.f5c660f62615965d5e39.bundle.js:1)
    at polyfills.f5c660f62615965d5e39.bundle.js:1
    at t.invokeTask (polyfills.f5c660f62615965d5e39.bundle.js:1)
    at Object.onInvokeTask (vendor.bf2a9d83f92ee4918125.bundle.js:1)
    at t.invokeTask (polyfills.f5c660f62615965d5e39.bundle.js:1)
    at r.runTask (polyfills.f5c660f62615965d5e39.bundle.js:1)
    at o (polyfills.f5c660f62615965d5e39.bundle.js:1)
    at <anonymous>

Desired functionality.

This should properly compile the modules returned by the factory function.

[babeal]

related to #4192. This one is slightly difference since we are loading the modules from a library and can't use lazy load paths in the module

[clydin]

The AOT/JIT module loading decision of the string form of loadChildren is handled by Angular itself at runtime not by the CLI at build time. Since the code above is bypassing that builtin Angular functionality, it would need to provide the functionality itself. For additional details on the underlying functionality, please see the discussion in this issue: #8142.

[elvisbegovic]

I want avoid make chunk of my wrapper and put my WrapperModule in the principal bundle, so have this king of forRoot:

This build with ˋng serve ˋ works but if the routing of WrapperModule have children of many loadChildren these last sub shared module fail because browser tell me module not find. Any help?

@clydin

[hettiger]

I'm having the exact same problem.

[mgechev]

Are you still able to reproduce this issue with the latest version?

[babeal]

@mgechev i will try it again. We found another approach that worked for our case but its a concession as we create another module in the app that is lazy and then it imports the library module and then loads its children eagerly. The issue is related to the general problem of distrubution of work in a monolithic spa. We want to be able to distribute page development across teams without having them all work in the same code base. The ability to lazy load modules directly from node modules and the ability to lazy load sub routes from those libraries would really help.

[unspike]

similar already closed issue #4192
@babeal could you share your solution?

[alan-agius4]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.

[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.}