angular-cli: nameLazyFiles - ugly/unexpected names

Versions

@ngtools/webpack: 6.0.0-beta.4

Repro steps

Create app with lazy loaded routes where modules are in some subdirectory (not in the root directory).
Compile app using webpack AngularCompilerPlugin with nameLazyFiles set to true + output.chunkFilename set to ‘[name].chunk.js’,

Observed behavior

Relative filesystem path to the compiled module is:
.\SubjectCommon\js\controllers\credit\credit.module.ts
and the name of the coresponding chunk is:
SubjectCommon-js-controllers-credit-credit-module-ngfactory.chunk.js

Desired behavior

Chunk name should be:
credit.module.chunk.js

Mention any other details that might be useful (optional)

I belive that option “nameLazyFiles” should replace existing plugin NamedLazyChunksWebpackPlugin (from previous version of CLI). But it works differently. NamedLazyChunksWebpackPlugin generated correct name “credit.module.chunk.js”. The problem is on this line:

https://github.com/angular/angular-cli/blob/71f38222c02f0a25c6278cd256663f9e8812a8bb/packages/%40ngtools/webpack/src/angular_compiler_plugin.ts#L598

“importPath” contains path to the factory file without any extension (regex is not correct because it expect extension). And just the name of the factory file should be used. Not whole path.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 15 (3 by maintainers)

Most upvoted comments

we are having issue that I belive might be related… When building the naming becomes like: chunk {5} contact-us-contact-us-module-ngfactory.js, contact-us-contact-us-module-ngfactory.js.map (contact-us-contact-us-module-ngfactory) 10.1 kB [rendered]

But then we also have another strange file being generated… chunk {2} default~checkout-checkout-module-ngfactory~registration-registration-module-ngfactory.js, default~checkout-checkout-module-ngfactory~registration-registration-module-ngfactory.js.map (default~checkout-checkout-module-ngfactory~registration-registration-module-ngfactory) 23.8 kB [rendered]

By the looks of the naming it looks like it has merged 2 modules?

I believe that this is causing our site to crash currently…

mackelito on Dec 19, 2018

@clydin I understand the benefit you’re pointing out, but for the common case, it’s a bit weird.

If you have a single module UsersModule in a sub-directory modules/users, we used to have a file named users.module.chunk.js and now we have a modules-users-users-module-ngfactory.js file. Which is (I think) less readable (even without the ngfactory bit).

And maybe that should probably be noted in the breaking changes, as some users might rely on the former names to do some things in their builds (like tracking build sizes…)?

cexbrayat on Mar 5, 2018

Hope this helps:

I had the same issue that commonChunks with default~ .... where generated.

use in you angular.json (where you have "aot": true … etc.):

"commonChunk": false

andreElrico on Aug 12, 2019

The problem with using the full path in the file name is that it chops off the end after a certain number of characters. I understand that the file name is supposed to be the combination of lazy modules that use the code in the chunk, but using the full path means that in some cases (e.g. if you have over 3 or 4 lazy modules sharing the same code that is not part of the main bundle), the names of those modules will get cut off.

e.g.

Chunk used by Feature A, Feature B and Feature C: my-directory-path-feature-a-module-ngfactory~my-directory-path-feature-b-module-ngfactory~my-dir~5cc13a5a.d7fdc7d0fad47c2a9f72.js
Chunk used by Feature A, Feature B and Feature D: my-directory-path-feature-a-module-ngfactory~my-directory-path-feature-b-module-ngfactory~my-dir~45c9bbbc.88f2dc0cdf8a7c002bd4.js

Looking at the above chunk names, I have no idea which of the two the chunk used by Feature C and which is used by Feature D.

If we just included the module names instead of the entire path, we could have fit all the module names in (e.g. feature-a-module~feature-b-module~feature-c-module.d7fdc7d0fad47c2a9f72.js and feature-a-module~feature-b-module~feature-d-module.88f2dc0cdf8a7c002bd4.js).

ghost on Dec 28, 2018