fix(upgrade): initialize all inputs in time for ngOnChanges()

Previously, non-bracketed inputs (e.g. `xyz="foo"`) on downgraded components
were initialized using `attrs.$observe()` (which uses `$evalAsync()` under the
hood), while bracketed inputs (e.g. `[xyz]="'foo'"`) were initialized using
`$watch()`. If the downgraded component was created during a `$digest` (e.g. by
an `ng-if` watcher), the non-bracketed inputs were not initialized in time for
the initial call to `ngOnChanges()` and `ngOnInit()`.

This commit fixes it by using `$watch()` to initialize all inputs. `$observe()`
is still used for subsequent updates on non-bracketed inputs, because it is more
performant.

Fixes #16212

packages/upgrade/test/static/integration/downgrade_component_spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Compiler, Component, ComponentFactoryResolver, EventEmitter, Injector, NgModule, NgModuleRef, OnChanges, OnDestroy, SimpleChanges, destroyPlatform} from '@angular/core';
+import {Compiler, Component, ComponentFactoryResolver, EventEmitter, Injector, Input, NgModule, NgModuleRef, OnChanges, OnDestroy, SimpleChanges, destroyPlatform} from '@angular/core';
 import {async} from '@angular/core/testing';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@@ -148,6 +148,64 @@ export function main() {
          });
        }));
 
+    it('should initialize inputs in time for `ngOnChanges`', async(() => {
+         @Component({
+           selector: 'ng2',
+           template: `
+             ngOnChangesCount: {{ ngOnChangesCount }} |
+             firstChangesCount: {{ firstChangesCount }} |
+             initialValue: {{ initialValue }}`
+         })
+         class Ng2Component implements OnChanges {
+           ngOnChangesCount = 0;
+           firstChangesCount = 0;
+           initialValue: string;
+           @Input() foo: string;
+
+           ngOnChanges(changes: SimpleChanges) {
+             this.ngOnChangesCount++;
+
+             if (this.ngOnChangesCount === 1) {
+               this.initialValue = this.foo;
+             }
+
+             if (changes['foo'] && changes['foo'].isFirstChange()) {
+               this.firstChangesCount++;
+             }
+           }
+         }
+
+         @NgModule({
+           imports: [BrowserModule, UpgradeModule],
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
+
+         const ng1Module = angular.module('ng1', []).directive(
+             'ng2', downgradeComponent({component: Ng2Component}));
+
+         const element = html(`
+           <ng2 [foo]="'foo'"></ng2>
+           <ng2 foo="bar"></ng2>
+           <ng2 [foo]="'baz'" ng-if="true"></ng2>
+           <ng2 foo="qux" ng-if="true"></ng2>
+         `);
+
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
+           const nodes = element.querySelectorAll('ng2');
+           const expectedTextWith = (value: string) =>
+               `ngOnChangesCount: 1 | firstChangesCount: 1 | initialValue: ${value}`;
+
+           expect(multiTrim(nodes[0].textContent)).toBe(expectedTextWith('foo'));
+           expect(multiTrim(nodes[1].textContent)).toBe(expectedTextWith('bar'));
+           expect(multiTrim(nodes[2].textContent)).toBe(expectedTextWith('baz'));
+           expect(multiTrim(nodes[3].textContent)).toBe(expectedTextWith('qux'));
+         });
+       }));
+
     it('should bind to ng-model', async(() => {
          const ng1Module = angular.module('ng1', []).run(
              ($rootScope: angular.IScope) => { $rootScope['modelA'] = 'A'; });