Lazy Loading in AOT doesn't work in 7.1.4

[danielpcampagna]

I`m still having the problem related on issue #12944.

> ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.4
Node: 11.3.0
OS: win32 x64
Angular: 7.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.5
@angular-devkit/build-angular     0.10.5
@angular-devkit/build-optimizer   0.10.5
@angular-devkit/build-webpack     0.10.5
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@angular/cli                      7.1.4
@angular/flex-layout              7.0.0-beta.19
@ngtools/webpack                  7.0.5
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

Repro steps

1. Create a new project

2. Create a lazy module

I'm using this app.routing.ts:

import { Routes, RouterModule, PreloadAllModules  } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';

export const routes: Routes = [
    { path: '', loadChildren: './pages/dashboard/dashboard.module#DashboardModule', data: { breadcrumb: 'Dashboard' } },
    { path: '**', redirectTo: '', pathMatch: 'full'},
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {
   preloadingStrategy: PreloadAllModules
});

3. Run an AOT serve or build.

Call build/serve using --aot

> ng serve --aot

And, then, get an error on your browser console:

ERROR Error: Uncaught (in promise): Error: Cannot find module './pages/dashboard/dashboard.module'
Error: Cannot find module './pages/dashboard/dashboard.module'
    at $_lazy_route_resource lazy namespace object:23
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:14143)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:14134)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:14134)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

Originally posted by @danielpcampagna in https://github.com/_render_node/MDEyOklzc3VlQ29tbWVudDQ1MTUyNzk0OQ==/timeline/issue_comment#issuecomment-451527949

[alan-agius4]

Can you try to update the @angular/devkit packages and if you have a direct dependency on @ngtools/webpack kindly remove it as this is transitive dependency of @angular-devkit/build-angular.?

You seem to be using an older version.

[danielpcampagna]

Thank you for answer, @alan-agius4 !
This is my new versions, but I'm still having this problem.
And I don't have a direct dependency on @ngtools/webpack.

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.4
Node: 11.3.0
OS: win32 x64
Angular: 7.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@angular/cli                      7.1.4
@angular/flex-layout              7.0.0-beta.19
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

[patrickdcameron]

+1 same issue for me!

[alan-agius4]

I'm sorry, but we can't reproduce the problem following the instructions you provided.

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[danielpcampagna]

Thank you for help, @alan-agius4 !

This error occurs because I'm using JIT Compiler.
I did create this minimal repro containing:

• a stable version, where I'm using AOT compiler.
• and, an unstable version, where I'm using JIT compiler.

The solution that I found is in this discussion.

I'm not sure if that is the best solution (is it possible to build a project who use jit compiler?!).

[alan-agius4]

Just to clarify the error is happening using the JIT or AOT compiler? As in the original issue it's stats that it's when using --aot?

JIT Compiler can be used to build your project, however this is not recommended. See why here: https://angular.io/guide/aot-compiler#why-compile-with-aot

Can you kindly share the reproduction?

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

[kylephughes]

Upgrading @angular/cli to 7.3.8 seemed to fix my exact issue
Here's my other comment
#12944 (comment)

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