Angular-cli: ng build AOT + lazy loading from different package

[jpguevara]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [x ] feature request

Versions.

Windows 7 and MacOS
$ ng --version
@angular/cli: 1.0.0
node: 7.7.2
os: win32 x64
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.2

Repro steps.

Stack Overflow Question:
http://stackoverflow.com/questions/43441732/angular-2-error-when-ng-build-aot-lazy-loading-from-different-package

Sample Repo:
https://github.com/chorew/AngularSample

Running the app

1. clone the repo
2. npm install
3. npm run dev:library

const routes: Routes = [
{ path: 'library', loadChildren: '@myapp/library/src/index#ModuleAModule' } // lazy loading a module from a different package
];

The log given by the failure.

[email protected] build C:\Users\Juan.Pablo\projects\POC\AngularSample\packages\main.app
> ng build --aot

Hash: dfaf89ef3b1bb2e81c75
Time: 6307ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 28.3 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.37 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve 'C:\Users\Juan.Pablo\projects\POC\AngularSample\packages\main.app\src\node_modules\@myapp\library\src\index.
d.ngfactory.ts' in 'C:\Users\Juan.Pablo\projects\POC\AngularSample\packages\main.app\src\$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.ts
 @ multi ./src/main.ts

Notice how it is trying to find the lazy loaded module inside the main.app\src folder

App src path
C:\Users\Juan.Pablo\projects\POC\AngularSamplepackagesmain.app\src\

Lazy loaded from package
@myapp\library\src\index.d.ngfactory.ts
```

Desired functionality.

This is a sample app with 2 sub-packages.

packages/main.app
packages/library
the goal is to have a library package with different modules of the app
and have some specific modules lazy loaded.

The use case is to be able to load modules from different packages/repos developed by different teams and pull just the needed packages from npm to configure the routes.

const routes: Routes = [
{ path: 'library', loadChildren: '@myapp/library/src/index#ModuleAModule' }, // developed by Team A
{ path: 'anotherLibrary', loadChildren: '@myapp/anotherLibrary/src/index#ModuleAModule' } // developed by Team B
];

and so on.

Mention any other details that might be useful.

Main.app was generated with ng cli
Library package is custom project using ngc and gulp

[ChenReuven]

@chorew i have same issue, with regular lazy loading.
angular-cli: v1.0
angular ver: 4.0.1

[kylecordes]

Same issue here. Lazy loading to a library packages works fine with JIT, not with AOT.

[filipesilva]

@hansl is this a bug or is there no support by design?

[kylecordes]

BTW this is still the case with CLI 1.0.4.

[jjlgjkkl]

BTW this is still the case with CLI 1.0.6

[captainkovalsky]

BTW this is still the case with CLI 1.1.1

[mahmood-sajjadi]

BTW this is still the case with "ngtools/webpack": "^1.5.0"

[mahmood-sajjadi]

@filipesilva is this not supported by design?
would you please clarify it? there is few question related to this topic in StackOverflow without an answer and it is confusing.

[filipesilva]

@hansl can you chime in?

[hansl]

Hi everyone,

After some investigation and help from our compiler team, I was able to make progress to the point where it was working (see https://github.com/jpguevara/AngularSample/pull/2). The last issue was that the library needs to be published with Angular as a peer dependency. By modifying the node_modules manually I was able to make ng build --aot work.

So everything can be fixed by the library side, and using the library name instead of pointing to the index file directly. It does not even require the latest version of the CLI.

Closing this issue as working-as-intended.

[MitkoTschimev]

Hi @hansl,

Thank you so much for some investigation in this problem.

If i use @angular/cli and do not eject the webpack config do i still have the possibility to change somewhere the behavior like you done in the sample app?

[angular-automatic-lock-bot[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.

<sub>_This action has been performed automatically by a bot._</sub>