Ivy doesn't include downgraded components into production build

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 8.x.x

Description

Consider following situation:

• there is an AngularJS application
• follow official upgrade guide to get it into hybrid mode with ngUpgrade
• start writing all new components in new Angular (to not to add more legacy code) and where needed - use downgradeComponent to be able to use Angular components in AngularJS
• if downgraded component is used only in AngularJS templates - it will be shaken off the tree with production build - this manifests itself in component just not being rendered. Silently. No errors, warnings, or whatsoever.

Workaround

It can be fixed with referencing the component somewhere, as suggested in related issues - https://github.com/angular/angular/issues/35314#issuecomment-584821399, or in https://github.com/angular/angular-cli/issues/16246#issuecomment-557051190

Fix commit: https://github.com/zuzusik/angular-upgrade-ivy-bug/commit/f123b6bcb680231f823d9260c29b9a79cd6d4c2f

Things to fix/improve

There are several things about this which don’t look right:

• this is huge regression for applications using ngUpgrade - ideally this should be fixed
• it all happens silently - no errors/warnings/logs or whatsoever - at least it should give some clues about it
• it’s discrepancy between prod and dev build - in dev build all still works great - ideally these 2 builds should not have such huge discrepancies
• official upgrade guide says to include component into entryComponents which has no effect in Ivy - at least it should have some notes about compatibility with Ivy and possible shake off of the downgraded components

🔬 Minimal Reproduction

• clone https://github.com/zuzusik/angular-upgrade-ivy-bug
• run ng serve
• observe all components rendered
• run ng serve --configuration=production
• observe <downgraded-component> not being rendered
• expected - <downgraded-component> is rendered

🔥 Exception or Error

No exceptions or errors or whatsoever - and this is very frustrating.

🌍 Your Environment

Angular CLI: 9.1.5
Node: 12.16.3
OS: darwin x64

Angular: 9.1.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router, upgrade
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.5
@angular-devkit/build-angular     0.901.5
@angular-devkit/build-optimizer   0.901.5
@angular-devkit/build-webpack     0.901.5
@angular-devkit/core              9.1.5
@angular-devkit/schematics        9.1.5
@angular/cli                      9.1.5
@ngtools/webpack                  9.1.5
@schematics/angular               9.1.5
@schematics/update                0.901.5
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?

This is not really relevant, but this was very frustrating experience - literally everything is done by the guide and the app just ends up silently broken. Took me quite a time to figure all out…

[zuzusik]

@alan-agius4 yes, I see that as well, but that doesn’t give me any clue that my component is being dropped (downgradeComponent is Angular’s function - not from project’s code) - this message is pretty cryptic - it isn’t clear which part of code it’s coming from

[JoostK]

@kapunahelewong Ducks generally say “Quack”! 🦆