When building in --watch mode, UMD bundle isn't created, yet still referenced

[IdanCo]

Type of Issue

[X] Bug Report
[ ] Feature Request

Description

while watching a library with ng build --watch the UMD bundle isn't created (as evident here, following this commit).

Yet, inside the generated package.json the "main" property still refers to the UMD bundle.

How To Reproduce

ng new test-umd
cd test-umd
ng generate library my-lib
ng build my-lib --watch

Now check dist/my-lib/package.json. You'll notice this line "main": "bundles/my-lib.umd.js", while there is actually no bundles folder generated. (if you drop the --watch flag the folder IS generated).

Expected Behaviour

I expect that if the UMD bundling is skipped (as it is in --watch), refrain from pointing to a missing file in the "main" property of package.json.

My even bigger dream is that dropping the UMD bundling will be switchable. If a PR might help, I'll be happy if you could point me in the right direction.

Version Information

$ node_modules/.bin/ng-packagr --version
ng-packagr:            12.1.0
@angular/compiler:     12.1.1
rollup:                2.52.6
typescript:            4.3.5

[alan-agius4]

My even bigger dream is that dropping the UMD bundling will be switchable. If a PR might help, I'll be happy if you could point me in the right direction.

This is not something we currently want to do, since UMDs are needed as part of the APF spec. That said, in future UMDs will be dropped completely.

I expect that if the UMD bundling is skipped (as it is in --watch), refrain from pointing to a missing file in the "main" property of package.json.

This does look like a nice-to-have, since there shouldn't be any repercussions by this "broken" reference.

[IdanCo]

This does look like a nice-to-have, since there shouldn't be any repercussions by this "broken" reference.

Thank you!

Just some background on my specific use case - My library is consumed by a Firebase Cloud-Functions Node project, which shares the same repo. I use this library to share types and utilities between my FE and my BE. When in watch mode, the cloud-function project looks at the package.json and tries to retrieve the non-existing main file, which obviously fails. Of course, when performing a regular build (without --watch) it works great.

BTW, for reasons beyond my comprehension, the Angular app dependent on that very same library works great even without the bundled UMD. But module systems scare me, so I didn't dig too deep into that...

[alan-agius4]

Typically when using the Angular CLI the UMD bundle is not used.

UMD bundles are typically used for legacy behaviour, and in future these will be removed in favour of ES6 modules.

I suspect that in your case removing the “main” field would not be enough.

[IdanCo]

I suspect that in your case removing the “main” field would not be enough.

You are correct! Even without the main, the node project still won't know how to handle it. That's why I tried to sneak in the "switchable UMD" dream, by keeping it as general as I could for the benefit of all users - those who care about rebuild time in watch mode, and for those who don't (☝️).

[alan-agius4]

We can probably add an environment variable to opt-out from this behaviour.

[IdanCo]

That would be great! I'll be happy to contribute, is there a similar implementation somewhere in the codebase I can use as an example?

[IdanCo]

Meanwhile, I've bypassed the problem by skipping ng generate library and manually creating a clean typescript project.

It was more complicated that I anticipated, so I detailed the steps and shared them in a Medium article in hope it will help someone else -
Sharing Types Between Angular and Firebase Cloud Functions

[github-actions]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

_{This action has been performed automatically by a bot.}