Angular-cli: (Late) FeatureRequest: Provide means to tame a bit dynamic requires

[zawor]

I know it is quite late for such things but recently this problem has hit me (and as I see not even me).

Versions.

@angular/cli: 1.0.0-rc.0

Repro steps.

Added to package.json following dependencies

"dependencies": {
    "moment": "^2.17.1"
}

When I hit $ ng build, my vendor file size blows up ;)

This is due to the fact that moment.js has dynamic require for locales and when combined with webpack it results in pulling everything to the build. Known solution of this problem (as mentioned in the sources below) is to get those excluded by use of ContextReplacementPlugin or IgnorePlugin, but there is no way (at least I couldn't find any) to use any of those without ejecting myself. Would be great to have some means to put a bit of control over such requires without need of ejecting. Or if you know the way how to do this please close this issue and share it on SO.

References

Marco Rinck posted same problem on SO: How to exclude dependencies from webpack in a angular-cli project
There is solution for plain webpack on SO: How to prevent moment.js from loading locales with webpack?
webpack issue #198
webpack issue #87

Thanks in advance!

[filipesilva]

This seems to be an unfortunate side effect of how moment works. We're not looking at adding this sort of specialcase but... I recognize that moment is a popular lib and a lot of people use it.

The best I can say is that this interop problem already has the attention of the Webpack and Momentjs team:
https://github.com/moment/momentjs.com/issues/269
https://github.com/webpack/webpack/issues/3128

There also seems to be an alternate usage pattern, but I haven't tried it https://github.com/moment/moment/issues/1435#issuecomment-240983788:

import moment from 'moment';
import 'moment/locale/en-gb';
moment.locale('en-gb');

[zawor]

@filipesilva thanks for pointing me to the possible workaround, have not seen this before and for sure will try it out... hopefully will find some time for this this week

[intellix]

the fix is to use datefns, which is modular: https://date-fns.org
See my comment here for a difference in bundle size and how to switch: https://github.com/angular/angular-cli/issues/2496#issuecomment-274272747

[filipesilva]

Great advice @intellix !

[marcorinck]

The suggested hack by @filipesilva does not work in my angular-cli project (in the linked comment you see that you are supposed to also delete node_modules/moment/src). My bundle still contain 212 kb of momentjs and all locales.

@intellix yes that does the trick for your own code which is my preferred solution too. In my case I used charts.js which imports momentjs by itself and I can't change that (besides not using charts.js)

[mgechev]

Can you still reproduce this issue?

[cexbrayat]

@mgechev yes, the issue still persist in CLI 7. Vue CLI for example offers a mecanism to load an extra webpack config to be able to use a plug-in like ContextReplacementPlugin. It would be great to have an option to do the same with Angular CLI, as the bundles are blowing up when using libraries like moment.

[mgechev]

@cexbrayat have you tried altering the build with ngx-build-plus?

[cexbrayat]

@mgechev I did, and it's probably the only alternative right now. But it broke with some releases of the CLI in the past, so we removed it. It's a very good community solution, it still doesn't beat a feature from the native CLI offically supported by the team, now that eject is no longer an option.

[mgechev]

That's something I believe we should look at.

[mgechev]

Blacklisting imports is out of the scope of the CLI build. It should be easy to achieve with ngx-build-plus.

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