Downgraded component not reacting to user events in a lazy loaded module using downgradeModule approach

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Downgraded component that is part of a lazy loaded module is not reacting to user events when using downgradeModule approach.

Expected behavior

It should work normally as if it’s part of the main module / not lazy loaded.

Minimal reproduction of the problem with instructions

• go to https://fdim.github.io/angular-hybrid-lazy-load-example/example/
• click go to lazy loaded module link
• click ‘click to expand’ and observe that component doesn’t work / nothing happens

Now:

• open developer tools in chrome, go to sources tab and locate static.js
• put a breakpoint on line 526 (var doDowngrade = function (injector) {) and reload the page
• on first hit app-root component is initialized and you can observe that needsNgZone value is true
• on second hit, it’s a component that is loaded from lazy loaded module but now needsNgZone is set to false.
• If you set it’s value to true using console and continue - the component will work as expected. I mean clicking click to expand will work and reveal the text that is hidden with *ngIf

All the code related to the example can be seen in this commit: https://github.com/FDIM/angular-hybrid-lazy-load-example/commit/918d7504b73f1bda2863b94b7868bd535eacdc25

What is the motivation / use case for changing the behavior?

To make it possible to use downgradeComponent inside lazy loaded module with a workaround described here: #17490

In short the workaround is about setting $$$angularInjectorController on some parent (in e.g. route resolve) which forces downgrade component to use that value as injector and thus correctly locate the component. As I understand this is working OK when UpgradeModule is used, but not with downgradeModule.

I propose the following fix:

• setting REQUIRE_INJECTOR_NEEDS_NG_ZONE variable to ?^^$$angularInjectorNeedsNgZone
• using it as follows:

This way it would be possible to extend previously mentioned workaround and force the variable to be true.

Environment

Angular version: 5.2.7

Browser: any

P.S. I would have used stackblitz for the example, but the lazy loading there is not working: https://stackblitz.com/github/fdim/angular-hybrid-lazy-load-example

[FDIM]

I just tested it out, and if I pass propagateDigest: false it works in my example as well.

@gkalpak if you say otherwise, I’ll try to make a PR that will add another flag to the if you pointed out here that will check if downgradeModule is used

EDIT: I couldn’t resist and wanted to sleep well so I prepared a PR 😃

[angular-automatic-lock-bot[bot]]

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