Transitive dependencies hoisted by rollup cause warnings when importing libraries with multiple chunks

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

Yes

Description

In a project that has large parts split off into libraries (ng g lib), building the main application (which imports those libraries) I am drowned in a huge amount of warnings about imports being ignored because their packages are marked as having no side effects, e.g.:

▲ [WARNING] Ignoring this import because "dist/sioux/app/fesm2022/sioux-app.mjs" was marked as having no side effects [ignored-bare-import]

    dist/sioux/admin/fesm2022/sioux-admin-acl-editor.component-CbLkugjk.mjs:21:7:
      21 │ import '@sioux/app';
         ╵        ~~~~~~~~~~~~

  "sideEffects" is false in the enclosing "package.json" file:

    dist/sioux/app/package.json:59:2:
      59 │   "sideEffects": false
         ╵   ~~~~~~~~~~~~~

What appears to be happening is that rollup splits the library into multiple chunks and, while doing so, hoists transitive imports. An explanation of the background can be found here: https://rollupjs.org/faqs/#why-do-additional-imports-turn-up-in-my-entry-chunks-when-code-splitting

Apparently, it should be possible to prevent this hoisting by configuring the hoistTransitiveImports option for rollup: https://rollupjs.org/configuration-options/#output-hoisttransitiveimports

Yet, it appears that Angular won't let me add any custom configuration options for rollup. So, I wonder if hoisting of transitive imports shouldn't be disabled by default when building libraries in order to avoid these unnecessary warnings.

Unfortunately, I fail to produce a minimal example of a library that would be split into chunks and have its imports hoisted.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

▲ [WARNING] Ignoring this import because "dist/sioux/app/fesm2022/sioux-app.mjs" was marked as having no side effects [ignored-bare-import]

    dist/sioux/admin/fesm2022/sioux-admin-acl-editor.component-CbLkugjk.mjs:21:7:
      21 │ import '@sioux/app';
         ╵        ~~~~~~~~~~~~

  "sideEffects" is false in the enclosing "package.json" file:

    dist/sioux/app/package.json:59:2:
      59 │   "sideEffects": false
         ╵   ~~~~~~~~~~~~~

Please provide the environment you discovered this bug in (run `ng version`)

Angular CLI: 17.3.3
Node: 20.12.2
Package Manager: npm 10.5.0
OS: linux x64

Angular: 17.3.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.5
@angular-devkit/build-angular   17.3.3
@angular-devkit/core            17.0.5
@angular-devkit/schematics      17.3.3
@schematics/angular             17.3.3
ng-packagr                      17.3.0
rxjs                            7.8.1
typescript                      5.4.4
zone.js                         0.14.4

Anything else?

No response

fix: disable rollups hoistTransitiveImports

Thanks a lot for the effort. Unfortunately, this does not appear to fix the issue. I have finally managed to produce a repo that I can publish and which exhibits the issue: https://github.com/schoel-bis/ng-build-warn

You can clone that, npm i, and then ng build @warn/time-messaging. Don't judge me by the code in that library, please: it is a contrieved mess constructed solely for the purpose. The multi-step lazy loading combined with Angular's DI (esp. the inject of the TimeMessagingService into TimeMessagingComponent) seem to play a role in the surfacing of this issue, though.

Now, over the last couple of days I tried a few things, including your fix. Unfortunately, ng-packagr does not even seem to ever call that particular piece of code. If you place a throw new Error() just above the place where you added the setting, nothing bad happens at all. That's because in writebundles.transform.ts it enters the if-block in line 31 and then returns from line 64. Somehow, the bundling/flattening happens before this (and the only call to rollupBundleFile in the entirety of ng-packagr that I could find). I wasn't able to figure out where it does, though.

With the fix applied, I was able to successfully clone your repository and build the provided libraries without any issues or side effectless imports. Have you tried deleting your .angular directory before building? I also tested the fix with our internal framework, and I can confirm that all warnings have been resolved.

Oh, yes, after deleting the .angular directory the patch works as expected. That also explains why ng-packagr kept diverting into that if-block for me. Thanks for the tip.

fix: disable rollups hoistTransitiveImports

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

Navigation Menu

Repository navigation

Transitive dependencies hoisted by rollup cause warnings when importing libraries with multiple chunks #28221

Which @angular/* package(s) are the source of the bug?

Is this a regression?

Description

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run `ng version`)

Anything else?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Transitive dependencies hoisted by rollup cause warnings when importing libraries with multiple chunks #28221

Description

Which @angular/* package(s) are the source of the bug?

Is this a regression?

Description

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Anything else?

Activity

schoel-bis commented on Aug 20, 2024

C-M-Eisen commented on Aug 20, 2024

schoel-bis commented on Aug 20, 2024

angular-automatic-lock-bot commented on Sep 20, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Please provide the environment you discovered this bug in (run `ng version`)