Split bundles when using require with context

[Ristaaf]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.0.1
node: 7.8.0
os: win32 x64
@angular/animations: 4.1.0
@angular/common: 4.1.0
@angular/compiler: 4.1.0
@angular/core: 4.1.0
@angular/forms: 4.1.0
@angular/http: 4.1.0
@angular/platform-browser: 4.1.0
@angular/platform-browser-dynamic: 4.1.0
@angular/router: 4.1.0
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.0

Repro steps.

Put a number of locale files (js files named as different locales) in a folder names locales and in app.component constructor do:

let myLocaleInfo = require("./locales/"+navigator.language +".js");

ng build

You will get all locale files bundled with the main bundle (in our case we have the complete cldr-data in the locales folder, as we need to support all available locales, that means 236MB! in the main bundle, when we in practice only need to add one 600kB file (which one, we know first at runtime))

Desired functionality.

We would like each locale to become its own bundle, so that we do not get a gigant main bundle, but only load the locale actually used at runtime! This is from what I have read possible in webpack with the following syntax:

let myLocaleInfo = require("bundle-loader?lazy!./locales/"+navigator.language +".js");

However bundle-loader does not seem to exist in angular-cli

Mention any other details that might be useful.

What we are actually doing is loading locales for Globalize.js and kendo.ui, the application we are building supports 25 languages but basically all locales available in the world.

[clydin]

For information on code splitting, please refer to this guide: https://webpack.js.org/guides/code-splitting-async/

Please note that while this works, it is not considered a fully supported feature of the CLI.

[sumitarora]

Closing as above.

[filipesilva]

Would just like to add that we do test for this, when using System.import only: https://github.com/angular/angular-cli/blob/master/tests/e2e/tests/misc/lazy-module.ts#L30-L33

[Ristaaf]

Thanks, I will try this out when I have time, although from what I can see when reading this documentation, it actually does not do what I need.

In my case it will put all the locales into the same lazy loaded bundle instead of the main bundle, this will not solve my problem where I need each locale file to be its own bundle. So I will still end up with a 250mb locales bundle instead of like 400 600k bundles which is what I need.

[Ristaaf]

And for anyone reading this later on, this actually works as I need it to, I get one chunk per file!

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