build(bazel): Turning on strictPropertyInitialization for Angular. (#24572)

All errors for existing fields have been detected and suppressed with a
`!` assertion.

Issue/24571 is tracking proper clean up of those instances.

One-line change required in ivy/compilation.ts, because it appears that
the new syntax causes tsickle emitted node to no longer track their
original sourceFiles.

PR Close #24572

packages/core/test/render3/change_detection_spec.ts

@@ -676,7 +676,8 @@ describe('change detection', () => {
 
         class OnPushComp {
           /** @Input() */
-          value: string;
+          // TODO(issue/24571): remove '!'.
+          value !: string;
 
           constructor(public cdr: ChangeDetectorRef) {}
 

packages/core/test/render3/compiler_canonical/component_directives_spec.ts

@@ -292,7 +292,8 @@ describe('components & directives', () => {
       changeDetection: ChangeDetectionStrategy.OnPush
     })
     class MyComp {
-      @Input() name: string;
+      // TODO(issue/24571): remove '!'.
+      @Input() name !: string;
 
       // NORMATIVE
       static ngComponentDef = $r3$.ɵdefineComponent({
@@ -416,7 +417,8 @@ describe('components & directives', () => {
       `
     })
     class MyArrayComp {
-      @Input() names: string[];
+      // TODO(issue/24571): remove '!'.
+      @Input() names !: string[];
 
       static ngComponentDef = $r3$.ɵdefineComponent({
         type: MyArrayComp,
@@ -524,7 +526,8 @@ describe('components & directives', () => {
 
       @Component({selector: 'my-comp', template: `{{ num }}`})
       class MyComp {
-        num: number;
+        // TODO(issue/24571): remove '!'.
+        num !: number;
 
         static ngComponentDef = $r3$.ɵdefineComponent({
           type: MyComp,
@@ -646,7 +649,8 @@ describe('components & directives', () => {
         `
       })
       class MyComp {
-        @Input() names: string[];
+        // TODO(issue/24571): remove '!'.
+        @Input() names !: string[];
 
         static ngComponentDef = $r3$.ɵdefineComponent({
           type: MyComp,
@@ -751,7 +755,8 @@ describe('components & directives', () => {
         `
       })
       class ObjectComp {
-        config: {[key: string]: any};
+        // TODO(issue/24571): remove '!'.
+        config !: {[key: string]: any};
 
         static ngComponentDef = $r3$.ɵdefineComponent({
           type: ObjectComp,
@@ -827,7 +832,8 @@ describe('components & directives', () => {
         `
       })
       class NestedComp {
-        config: {[key: string]: any};
+        // TODO(issue/24571): remove '!'.
+        config !: {[key: string]: any};
 
         static ngComponentDef = $r3$.ɵdefineComponent({
           type: NestedComp,

packages/core/test/render3/compiler_canonical/life_cycle_spec.ts

@@ -25,7 +25,8 @@ describe('lifecycle hooks', () => {
 
   @Component({selector: 'lifecycle-comp', template: ``})
   class LifecycleComp {
-    @Input('name') nameMin: string;
+    // TODO(issue/24571): remove '!'.
+    @Input('name') nameMin !: string;
 
     ngOnChanges() { events.push('changes' + this.nameMin); }
 

packages/core/test/render3/compiler_canonical/query_spec.ts

@@ -44,8 +44,10 @@ describe('queries', () => {
     `
     })
     class ViewQueryComponent {
-      @ViewChild(SomeDirective) someDir: SomeDirective;
-      @ViewChildren(SomeDirective) someDirList: QueryList<SomeDirective>;
+      // TODO(issue/24571): remove '!'.
+      @ViewChild(SomeDirective) someDir !: SomeDirective;
+      // TODO(issue/24571): remove '!'.
+      @ViewChildren(SomeDirective) someDirList !: QueryList<SomeDirective>;
 
       // NORMATIVE
       static ngComponentDef = $r3$.ɵdefineComponent({
@@ -97,8 +99,10 @@ describe('queries', () => {
       `
     })
     class ContentQueryComponent {
-      @ContentChild(SomeDirective) someDir: SomeDirective;
-      @ContentChildren(SomeDirective) someDirList: QueryList<SomeDirective>;
+      // TODO(issue/24571): remove '!'.
+      @ContentChild(SomeDirective) someDir !: SomeDirective;
+      // TODO(issue/24571): remove '!'.
+      @ContentChildren(SomeDirective) someDirList !: QueryList<SomeDirective>;
 
       // NORMATIVE
       static ngComponentDef = $r3$.ɵdefineComponent({

packages/core/test/render3/compiler_canonical/template_variables_spec.ts

@@ -27,11 +27,13 @@ describe('template variables', () => {
 
   @Directive({selector: '[forOf]'})
   class ForOfDirective {
-    private previous: any[];
+    // TODO(issue/24571): remove '!'.
+    private previous !: any[];
 
     constructor(private view: ViewContainerRef, private template: TemplateRef<any>) {}
 
-    @Input() forOf: any[];
+    // TODO(issue/24571): remove '!'.
+    @Input() forOf !: any[];
 
     ngOnChanges(simpleChanges: SimpleChanges) {
       if ('forOf' in simpleChanges) {

packages/core/test/render3/component_spec.ts

@@ -130,7 +130,8 @@ describe('component with a container', () => {
   }
 
   class WrapperComponent {
-    items: string[];
+    // TODO(issue/24571): remove '!'.
+    items !: string[];
     static ngComponentDef = defineComponent({
       type: WrapperComponent,
       selectors: [['wrapper']],
@@ -367,7 +368,8 @@ describe('recursive components', () => {
 
   it('should map inputs minified & unminified names', async() => {
     class TestInputsComponent {
-      minifiedName: string;
+      // TODO(issue/24571): remove '!'.
+      minifiedName !: string;
       static ngComponentDef = defineComponent({
         type: TestInputsComponent,
         selectors: [['test-inputs']],

packages/core/test/render3/define_spec.ts

@@ -54,7 +54,8 @@ describe('define', () => {
         class MyDirective implements OnChanges {
           public log: Array<string|SimpleChange> = [];
           public valA: string = 'initValue';
-          public valB: string;
+          // TODO(issue/24571): remove '!'.
+          public valB !: string;
 
           ngOnChanges(changes: SimpleChanges): void {
             this.log.push('valA', changes['valA']);

packages/core/test/render3/di_spec.ts

@@ -556,7 +556,8 @@ describe('di', () => {
     describe('flags', () => {
 
       class DirB {
-        value: string;
+        // TODO(issue/24571): remove '!'.
+        value !: string;
 
         static ngDirectiveDef = defineDirective({
           type: DirB,

packages/core/test/render3/directive_spec.ts

@@ -61,8 +61,10 @@ describe('directive', () => {
           inputs: {test: 'test', other: 'other'}
         });
 
-        testValue: boolean;
-        other: boolean;
+        // TODO(issue/24571): remove '!'.
+        testValue !: boolean;
+        // TODO(issue/24571): remove '!'.
+        other !: boolean;
 
         /**
          * A setter to assert that a binding is not invoked with stringified attribute value
@@ -108,9 +110,12 @@ describe('directive', () => {
              inputs: {test: 'test', prop1: 'prop1', prop2: 'prop2'}
            });
 
-           prop1: boolean;
-           prop2: boolean;
-           testValue: boolean;
+           // TODO(issue/24571): remove '!'.
+           prop1 !: boolean;
+           // TODO(issue/24571): remove '!'.
+           prop2 !: boolean;
+           // TODO(issue/24571): remove '!'.
+           testValue !: boolean;
 
 
            /**

packages/core/test/render3/exports_spec.ts

@@ -76,7 +76,8 @@ describe('exports', () => {
     }
 
     class MyDir {
-      myDir: MyComponent;
+      // TODO(issue/24571): remove '!'.
+      myDir !: MyComponent;
       constructor() { myDir = this; }
       static ngDirectiveDef = defineDirective({
         type: MyDir,
@@ -242,7 +243,8 @@ describe('exports', () => {
       }
 
       class MyDir {
-        myDir: MyComponent;
+        // TODO(issue/24571): remove '!'.
+        myDir !: MyComponent;
 
         constructor() { myDir = this; }
 

packages/core/test/render3/instructions_spec.ts

@@ -459,7 +459,8 @@ class LocalSanitizedValue {
 }
 
 class LocalMockSanitizer implements Sanitizer {
-  public lastSanitizedValue: string|null;
+  // TODO(issue/24571): remove '!'.
+  public lastSanitizedValue !: string | null;
 
   constructor(private _interceptor: (value: string|null|any) => string) {}
 

packages/core/test/render3/integration_spec.ts

@@ -375,7 +375,8 @@ describe('render3 integration test', () => {
        * % }
        */
       class MyComp {
-        condition: boolean;
+        // TODO(issue/24571): remove '!'.
+        condition !: boolean;
         static ngComponentDef = defineComponent({
           type: MyComp,
           selectors: [['comp']],
@@ -491,8 +492,10 @@ describe('render3 integration test', () => {
     }
 
     class ChildComponent {
-      beforeTree: Tree;
-      afterTree: Tree;
+      // TODO(issue/24571): remove '!'.
+      beforeTree !: Tree;
+      // TODO(issue/24571): remove '!'.
+      afterTree !: Tree;
       static ngComponentDef = defineComponent({
         selectors: [['child']],
         type: ChildComponent,

packages/core/test/render3/listeners_spec.ts

@@ -46,7 +46,8 @@ describe('event listeners', () => {
 
   class PreventDefaultComp {
     handlerReturnValue: any = true;
-    event: Event;
+    // TODO(issue/24571): remove '!'.
+    event !: Event;
 
     onClick(e: any) {
       this.event = e;

packages/core/test/render3/outputs_spec.ts

@@ -358,7 +358,8 @@ describe('outputs', () => {
     let otherDir: OtherChangeDir;
 
     class OtherChangeDir {
-      change: boolean;
+      // TODO(issue/24571): remove '!'.
+      change !: boolean;
 
       static ngDirectiveDef = defineDirective({
         type: OtherChangeDir,

packages/core/test/render3/pipe_spec.ts

@@ -382,10 +382,13 @@ class MultiArgPipe implements PipeTransform {
 }
 
 class Person {
-  age: number;
-  name: string|null;
+  // TODO(issue/24571): remove '!'.
+  age !: number;
+  // TODO(issue/24571): remove '!'.
+  name !: string | null;
   address: Address|null = null;
-  phones: number[];
+  // TODO(issue/24571): remove '!'.
+  phones !: number[];
 
   init(name: string|null, address: Address|null = null) {
     this.name = name;

packages/core/test/render3/properties_spec.ts

@@ -99,7 +99,8 @@ describe('elementProperty', () => {
     let idDir: IdDir;
 
     class MyButton {
-      disabled: boolean;
+      // TODO(issue/24571): remove '!'.
+      disabled !: boolean;
 
       static ngDirectiveDef = defineDirective({
         type: MyButton,
@@ -110,7 +111,8 @@ describe('elementProperty', () => {
     }
 
     class OtherDir {
-      id: boolean;
+      // TODO(issue/24571): remove '!'.
+      id !: boolean;
       clickStream = new EventEmitter();
 
       static ngDirectiveDef = defineDirective({
@@ -123,7 +125,8 @@ describe('elementProperty', () => {
     }
 
     class OtherDisabledDir {
-      disabled: boolean;
+      // TODO(issue/24571): remove '!'.
+      disabled !: boolean;
 
       static ngDirectiveDef = defineDirective({
         type: OtherDisabledDir,
@@ -134,7 +137,8 @@ describe('elementProperty', () => {
     }
 
     class IdDir {
-      idNumber: number;
+      // TODO(issue/24571): remove '!'.
+      idNumber !: number;
 
       static ngDirectiveDef = defineDirective({
         type: IdDir,
@@ -208,7 +212,8 @@ describe('elementProperty', () => {
       let comp: Comp;
 
       class Comp {
-        id: number;
+        // TODO(issue/24571): remove '!'.
+        id !: number;
 
         static ngComponentDef = defineComponent({
           type: Comp,
@@ -358,8 +363,10 @@ describe('elementProperty', () => {
   describe('attributes and input properties', () => {
     let myDir: MyDir;
     class MyDir {
-      role: string;
-      direction: string;
+      // TODO(issue/24571): remove '!'.
+      role !: string;
+      // TODO(issue/24571): remove '!'.
+      direction !: string;
       changeStream = new EventEmitter();
 
       static ngDirectiveDef = defineDirective({
@@ -374,7 +381,8 @@ describe('elementProperty', () => {
 
     let dirB: MyDirB;
     class MyDirB {
-      roleB: string;
+      // TODO(issue/24571): remove '!'.
+      roleB !: string;
 
       static ngDirectiveDef = defineDirective({
         type: MyDirB,

packages/core/test/render3/pure_function_spec.ts

@@ -15,7 +15,8 @@ describe('array literals', () => {
   let myComp: MyComp;
 
   class MyComp {
-    names: string[];
+    // TODO(issue/24571): remove '!'.
+    names !: string[];
 
     static ngComponentDef = defineComponent({
       type: MyComp,
@@ -68,8 +69,10 @@ describe('array literals', () => {
     let manyPropComp: ManyPropComp;
 
     class ManyPropComp {
-      names1: string[];
-      names2: string[];
+      // TODO(issue/24571): remove '!'.
+      names1 !: string[];
+      // TODO(issue/24571): remove '!'.
+      names2 !: string[];
 
       static ngComponentDef = defineComponent({
         type: ManyPropComp,
@@ -331,7 +334,8 @@ describe('object literals', () => {
   let objectComp: ObjectComp;
 
   class ObjectComp {
-    config: {[key: string]: any};
+    // TODO(issue/24571): remove '!'.
+    config !: {[key: string]: any};
 
     static ngComponentDef = defineComponent({
       type: ObjectComp,

packages/core/test/render3/query_spec.ts

@@ -933,7 +933,8 @@ describe('query', () => {
          * }
          */
         class Cmpt {
-          value: string[];
+          // TODO(issue/24571): remove '!'.
+          value !: string[];
           query: any;
           static ngComponentDef = defineComponent({
             type: Cmpt,
@@ -1689,7 +1690,8 @@ describe('query', () => {
 
       class WithContentComponent {
         // @ContentChildren('foo') foos;
-        foos: QueryList<ElementRef>;
+        // TODO(issue/24571): remove '!'.
+        foos !: QueryList<ElementRef>;
 
         static ngComponentDef = defineComponent({
           type: WithContentComponent,

packages/core/test/render3/renderer_factory_spec.ts

@@ -136,7 +136,8 @@ describe('animation renderer factory', () => {
   }
 
   class SomeComponentWithAnimation {
-    exp: string;
+    // TODO(issue/24571): remove '!'.
+    exp !: string;
     callback(event: AnimationEvent) {
       eventLogs.push(`${event.fromState ? event.fromState : event.toState} - ${event.phaseName}`);
     }

packages/core/test/render3/view_container_ref_spec.ts

@@ -29,7 +29,8 @@ describe('ViewContainerRef', () => {
       inputs: {tplRef: 'tplRef'}
     });
 
-    tplRef: TemplateRef<{}>;
+    // TODO(issue/24571): remove '!'.
+    tplRef !: TemplateRef<{}>;
 
     // injecting a ViewContainerRef to create a dynamic container in which embedded views will be
     // created
@@ -215,7 +216,8 @@ describe('ViewContainerRef', () => {
             * |after
             */
            class TestComponent {
-             testDir: TestDirective;
+             // TODO(issue/24571): remove '!'.
+             testDir !: TestDirective;
              static ngComponentDef = defineComponent({
                type: TestComponent,
                selectors: [['test-cmp']],
@@ -278,7 +280,8 @@ describe('ViewContainerRef', () => {
             */
            class TestComponent {
              condition = false;
-             testDir: TestDirective;
+             // TODO(issue/24571): remove '!'.
+             testDir !: TestDirective;
              static ngComponentDef = defineComponent({
                type: TestComponent,
                selectors: [['test-cmp']],
@@ -335,7 +338,8 @@ describe('ViewContainerRef', () => {
       it('should apply directives and pipes of the host view to the TemplateRef', () => {
         @Component({selector: 'child', template: `{{name}}`})
         class Child {
-          name: string;
+          // TODO(issue/24571): remove '!'.
+          name !: string;
 
           static ngComponentDef = defineComponent({
             type: Child,
@@ -902,7 +906,8 @@ describe('ViewContainerRef', () => {
     it('should call all hooks in correct order', () => {
       @Component({selector: 'hooks', template: `{{name}}`})
       class ComponentWithHooks {
-        name: string;
+        // TODO(issue/24571): remove '!'.
+        name !: string;
 
         private log(msg: string) { log.push(msg); }