fix(upgrade): detect async downgrade component changes

[petebacondarwin]

This commit effectively reverts 7e0f02f but for upgrade/static
as it was an invalid fix for #6385, that created a more significant
bug, which was that changes were not always being detected.

Angular 1 digests should be run inside the ngZone to ensure
that async changes are detected.

We don't know how to fix #6385 without breaking change detection
at this stage. That issue is triggered by async operations, such as
setTimeout, being triggered inside scope watcher functions.

One could argue that watcher functions should be pure and not do
work such as triggering async operations. It is possible that the
original use case could be supported by moving the debounce
logic into the watch listener function, which is only called if the
watched value actually changes.

See #13812

Please check if the PR fulfills these requirements

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x")

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Other... Please describe:

What is the current behavior? (You can also link to an open issue here)

What is the new behavior?

Does this PR introduce a breaking change? (check one with "x")

• Yes
• No

If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

Other information:

[gkalpak]

LGTM

[gkalpak]

I think it might be possible that we fail to propagate a change that happen in a microtask which completes after the $digest invoked from angular.bootstrap, but before we subscribe to onMicrotaskEmpty.

For example, I would expect a test like the following to fail:

    it('should propagate changes made asynchronously during bootstrap', fakeAsync(() => {
         const ng1Component: angular.IComponent = {
           template: '{{ $ctrl.value }}',
           bindings: {value: '<'}
         };

         @Directive({selector: 'ng1'})
         class Ng1ComponentFacade extends UpgradeComponent {
           @Input() value: string;
           constructor(elementRef: ElementRef, injector: Injector) {
             super('ng1', elementRef, injector);
           }
         }

         @Component({selector: 'ng2', template: '<ng1 [value]="value"></ng1>'})
         class Ng2Component {
           value: string;
           constructor() {
             Promise.resolve().then(() => this.value = 'foo');
           }
         }

         @NgModule({
           declarations: [Ng2Component, Ng1ComponentFacade],
           entryComponents: [Ng2Component],
           imports: [BrowserModule, UpgradeModule]
         })
         class Ng2Module {
           ngDoBootstrap() {}
         }

         const ng1Module = angular.module('ng1', [])
             .component('ng1', ng1Component)
             .directive('ng2', downgradeComponent({component: Ng2Component}));


         const element = html('<ng2></ng2>');

         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
           tick();
           expect(element.textContent.trim()).toBe('foo');
         });
       }));

UPDATE:
Actually, it turns out the test passes, because there is "stuff" that goes on during the bootstrap phase that cause onMicrotaskEmpty to emit. So, we'll be fine 😃

[angular-automatic-lock-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.}