Angular-cli: Shared module code imported in lazy loaded modules is duplicated

[mbellezi]

OS?

MacOS

Versions.

angular-cli: 1.0.0-beta.17
node: 6.6.0
os: darwin x64

I'm trying to organize my web app in lazy loaded modules for better loading performance, but I'm running into this problem:

Suppose my app structure is like this:

---app.component.ts
---app.module.ts
---app.routes.ts
---shared/
--------mainshared,module.ts
---join/ (lazy)
---site/ (lazy)
-------site.component.ts
-------site.module.ts
-------site.routes.ts
-------shared/
-------shared/siteshared.module.ts
-------profile (lazy)
-------------profile.component.ts
-------------profile.module.ts
-------------profile.routes.ts
-------home (lazy)
-------------home.component.ts
-------------home.module.ts
-------------home.routes.ts

When the app loads, it bootstraps the app.module. The app.module imports the mainshared.module that has all the basic shared code necessary to start the app like Angular Material, Common module etc.
The app.module redirects then to join, site/profile or site/home depending on localStorage data.

The site.module imports siteshared.module (that imports mainshared.module).
Both profile.module and home.module imports siteshared.module.

After building, I have a main bundle and a separate bundle for: join, site, site/profile and site/home. This is correct. The problem is that the code (components, directives, etc) declared in the siteshared module are been repeated in the siteshared, profile and home bundles. It should stay only in the site bundle and been only referenced on the profile and home bundles.

The shared code from the mainshared.module (at the app level) is correctly not duplicated below.
This odd behavior is preventing sharing code at the second hierarchical level.

Is this a bug or something by angular-cli/webpack design?

Thank you!

[clydin]

Make site non-lazy and the code duplication should disappear. The underlying issue seems to be that the current implementation does not know that site will always be loaded when profile or home are accessed.
The lazy loaded modules are currently a flat list. A graph would need to be generated and then used to create the lazy loaded bundles.

[mbellezi]

OK. Thank you for the clarification.

Em qua, 19 de out de 2016 12:32, clydin [email protected] escreveu:

Make site non-lazy and the code duplication should disappear. The
underlying issue seems to be that the current implementation does not know
that site will always be loaded when profile or home are accessed.
The lazy loaded modules are currently a flat list. A graph would need to
be generated and then used to create the lazy loaded bundles.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/2771#issuecomment-254830866,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJ4cxAgYiaueFpnZNR1z3F4dz374x9Uoks5q1ioKgaJpZM4KaiUs
.

[coryrylan]

@TheLarkInn Is this a solvable problem with Webpack or is this something the CLI needs to take on? Just checking might try to see if I can play around and get something working.

[elvisbegovic]

If I import import * as moment from "moment"; in different components, I get whole moment lib in all my chunks, you can get a look here :

Is there a way to achieve this ? right now I add in .angular-cli scripts[]momentjs lib then in typings.d.ts I write declare var moment: any;and remove all my imports it works: i get only one time moment in my scripts.bundle BUT i don't have autcompletion on moment lib... thanks

[coryrylan]

@istiti We switched to https://date-fns.org/ and had much better bundle size performance over momentjs. It doesnt have all the features of moment but it worked for us and has proper treeshaking.

[filipesilva]

Closing in favor of https://github.com/angular/angular-cli/issues/6204, there's some more discussion there and there is also https://github.com/angular/angular-cli/pull/6281 that partially addresses it.

[filipvh]

@istiti what is this tool you are using? :)

[elvisbegovic]

@filipvh https://github.com/webpack-contrib/webpack-bundle-analyzer

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