Angular-cli: Multiple Apps bundling Lazy Modules from other apps on build

[leocaseiro]

Bug Report or Feature Request (mark with an x)

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

Versions.

Angular CLI: 1.5.0
Node: 8.6.0
OS: darwin x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.4.2
webpack: 3.8.1

Repro steps.

If you set up Multiple Apps on angular-cli to share some code between apps and create routes with loadChildren. Some Lazy Modules are bundled even if it's not part of the app.

UPDATE: Here is a repo with my example code
https://github.com/leocaseiro/angular-cli-bug-issue-8321

Desired functionality.

I'd like to be able to do tree-shaking and avoid unnecessary code for some apps while I'm able to share code between apps.

Mention any other details that might be useful.

In my example, if you compile --app app1 or --app app2 both of apps are bundling chunks from the other app.

ng build -a app1

Date: 2017-11-03T00:56:34.672Z                                                          
Hash: 67c107e8f2f355ade09e
Time: 16699ms
chunk {for-both-apps.module} for-both-apps.module.23d24b6a1f133c64a0eb.chunk.js () 840 bytes  [rendered]
chunk {for-one-only.module} for-one-only.module.c48a9d70cf5bc41775b1.chunk.js () 836 bytes  [rendered]
chunk {for-two-only.module} for-two-only.module.e54917a2c951c2254c05.chunk.js () 837 bytes  [rendered]
chunk {inline} inline.5c2e62dbc8c09c7d63c6.bundle.js (inline) 1.6 kB [entry] [rendered]
chunk {main} main.5cc16f5560486cefd10c.bundle.js (main) 243 kB [initial] [rendered]
chunk {polyfills} polyfills.ed1fc5df9e729422d99e.bundle.js (polyfills) 61.1 kB [initial] [rendered]
chunk {styles} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes [initial] [rendered]

Note that the chunk for-two-only.module is not part of the app2 and the router definition is only used on app1.

What is interesting, is that if you run ng serve, it doesn't compile the other LazyModules, like so:

ng serve -a app1

Date: 2017-11-03T00:58:53.910Z                                                          
Hash: 107ae163c129cb863c74
Time: 5969ms
chunk {for-both-apps.module} for-both-apps.module.chunk.js () 7.2 kB  [rendered]
chunk {for-one-only.module} for-one-only.module.chunk.js () 7.14 kB  [rendered]
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 26.7 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 560 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 34.3 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 8.03 MB [initial] [rendered]

webpack: Compiled successfully.

PS: It might be related to #6677

[fsx999]

I resolve this with two tsconfig.app.json : one tsconfig.app1.json with "exclude": [
"app/app2/"] and one tsconfig.app2.json with "exclude": [
"app/app1/"]
and in .angular-cli.json for each app : "tsconfig": "tsconfig.scolarite.app_1_or_2.json"

[clydin]

Just to elaborate, the tsconfig that both apps are using (tsconfig.app.json) is configured to include all non-test source files within the src directory. This causes both apps to include all the source files of both apps (as well as any other non-test source file in src). As shown in the previous comment, a separate tsconfig for each app which describes the necessary files for each app would allow for the desired build output.

[leocaseiro]

Thanks for your suggestion with the exclude field from tsconfig.app.json. It does work, but it's not trivial as I normally have to create/add new apps quite often.

At the moment, I have 6 apps. So, if I add a new app, I have to add the new app to be excluded for the 6 tsconfig files, then, for the next app, I'll have to edit the 7th as well and so on...

What doesn't make sense to me is that in dev mode, it doesn't compile the other apps, like in production...Is not something we should look into it?

Either way, it's an "okay" temporary solution!

Also, If I have lot's of modules with their Router settings in my share folder, unfortunately, this solution might not work very well (I haven't tested deeply yet).

[clydin]

There are multiple potential configuration options that could be used based on the file structure and design goals of the project. You can experiment with the three tsconfig file options: files/include/exclude; as well as placing the app specific tsconfigs in their respective subdirectories and possibly extending from the original single app tsconfig. For more information regarding the options, please see the documentation found here: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

[william-lohan]

The multiple configs may no longer be a solution, I tried giving each app it's own tsconfig.[app-name].json config file and listing the other apps in "exclude" but now I get...

ERROR in ./src/$$_lazy_route_resource lazy
Module not found: Error: Can't resolve '[path-to]/[project]/src/[excluded-app]/[lazy-module].ngfactory.js' in '[path-to][project]src\$$_lazy_route_resource'

I searched the app for any loadChildren that link to that module and the only instances are in the excluded app, not the app I'm building.

Made duplication repo https://github.com/gatimus/multiple-apps-lazy-loading run ng build --app app-a --prod --stats-json

[william-lohan]

Found workaround to use include:

"include": [
  "typings.d.ts",
  "polyfills.ts",
  "main-[app-name].ts",
  "[app-name]/"
]

https://github.com/gatimus/multiple-apps-lazy-loading/tree/workaround

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

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

_{_This action has been performed automatically by a bot._}