General: Angular bundle reports locale files all being included

[tmcconechy]

Describe the bug
Noticed with landmark that when using ids-enterprise-wc with angular and analyzing the bundle size, it appears all the locale messages and files are included. But this may be misleading as the appear "disconnected"

To Reproduce

Steps to reproduce the behavior:

1. Go to https://github.com/infor-design/enterprise-wc-examples/tree/main/angular-ids-wc or https://github.com/infor-design/enterprise-ng-quickstart
2. Run npm run build:stats
3. See error in that message and locale files from locale-data are all included

Expected behavior
Figure out why, if this is a real problem that they are included and can it be fixed.

Screenshots

Additional context
If running the analyzer on the this project it doesnt seem to show that these are included. And removing the assets doesnt make any difference https://github.com/infor-design/enterprise-ng-quickstart/blob/main/angular.json#L38-L47

[tmcconechy]

@Sovia @krishollenbeck @pwpatton

Looked at this a bit more and i think its probably normal. And possibly whats happening is because the scripts may possibly be used in a dynamic import they are included in the bundle. Here:
https://github.com/infor-design/enterprise-wc/blob/main/src/components/ids-locale/ids-locale.ts#L106

But they are included as disconnected files / not as a dependency of anything. They just float around in the dist folder until they are needed at runtime you can see they are not part of scripts/polyfills and vendor or main

Another hint is that they are listed as lazy chunk files:

Lazy Chunk Files                                                  | Names         |  Raw Size
node_modules_ids-enterprise-wc_locale-data_ru-messages_js.js      | -             | 105.02 kB |
node_modules_ids-enterprise-wc_locale-data_el-messages_js.js      | -             | 104.45 kB |
..

So i think this is valid. But if really never used maybe they can be excluded with "exclude" or "ignore" https://stackoverflow.com/questions/44952811/exclude-files-from-build-in-angular-2 or delete from the node_modules.

[pwpatton]

And possibly whats happening is because the scripts may possibly be used in a dynamic import

do you mean in a dynamic import in the web components themselves?

[tmcconechy]

Yeah the files are included i think because the web components might need to lazy load them with an import when used. So you can see in the screen shot they are actually just separate files there. Not included in anything else. I figure angular is able to figure out they might be lazy imported so it includes them. If you look at the bundle analyzer they are totally standalone and not included as direct dependencies.

[tmcconechy]

On further review i think i have an idea that will work. But needs more work so will pick this up next sprint..

1. change all the locale data to JSON
2. change the way its used internally
3. use fetch instead of import -> think this solves it
4. Fix demo app and tests

  loadLanguageScript(value: string) {
    const promise = fetch(`../locale-data/${value}-messages.js`);
    promise.then(async (response) => {
      // do something with the translations
      const data = await response.json();
      this.loadedLanguages.set(value, data);
    });
    return promise;
  }

Down side is some methods of JS in the locale files will need to be moved/ and the translation team will need to agree to support it this way. Plus need to do the conversation. Plus side it may reduce the bundle.

Also may need to update enterprise or stop all translations there going forward. Which may be breaking

Will send some emails and pick this up next sprint.