refactor(compiler-cli): remove internal only flag to disable type checking (#40013)

A couple reasons to justify removing the flag:

* It adds code to the compiler that is only meant to support test cases
and not any production. We should avoid code in that's only
meant to support tests.
* The flag enables writing tests that do not mimic real-world behavior
because they allow invalid applications

PR Close #40013

packages/compiler-cli/src/ngtsc/core/api/src/options.ts

@@ -25,17 +25,6 @@ export interface TestOnlyOptions {
    */
   _useHostForImportGeneration?: boolean;
 
-  /**
-   * Turn on template type-checking in the Ivy compiler.
-   *
-   * This is an internal flag being used to roll out template type-checking in ngtsc. Turning it on
-   * by default before it's ready might break other users attempting to test the new compiler's
-   * behavior.
-   *
-   * @internal
-   */
-  ivyTemplateTypeCheck?: boolean;
-
   /**
    * An option to enable ngtsc's internal performance tracing.
    *

packages/compiler-cli/src/ngtsc/core/src/compiler.ts

@@ -559,11 +559,6 @@ export class NgCompiler {
   }
 
   private getTemplateDiagnostics(): ReadonlyArray<ts.Diagnostic> {
-    // Skip template type-checking if it's disabled.
-    if (this.options.ivyTemplateTypeCheck === false && !this.fullTemplateTypeCheck) {
-      return [];
-    }
-
     const compilation = this.ensureAnalyzed();
 
     // Get the diagnostics.

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/GOLDEN_PARTIAL.js

@@ -161,48 +161,110 @@ export declare class AbstractDirective {
 /****************************************************************************************************
  * PARTIAL FILE: constant_object_literals.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, Input, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
+export class SomeComp {
+}
+SomeComp.ɵfac = function SomeComp_Factory(t) { return new (t || SomeComp)(); };
+SomeComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: SomeComp, selector: "some-comp", inputs: { prop: "prop", otherProp: "otherProp" }, ngImport: i0, template: { source: '', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeComp, [{
+        type: Component,
+        args: [{ selector: 'some-comp', template: '' }]
+    }], null, { prop: [{
+            type: Input
+        }], otherProp: [{
+            type: Input
+        }] }); })();
 export class MyApp {
 }
 MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
-MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyApp, selector: "ng-component", ngImport: i0, template: { source: '<some-comp [prop]="{}" [otherProp]="{a: 1, b: 2}"></some-comp>', isInline: true } });
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyApp, selector: "ng-component", ngImport: i0, template: { source: '<some-comp [prop]="{}" [otherProp]="{a: 1, b: 2}"></some-comp>', isInline: true }, directives: [{ type: SomeComp, selector: "some-comp", inputs: ["prop", "otherProp"] }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
         type: Component,
         args: [{ template: '<some-comp [prop]="{}" [otherProp]="{a: 1, b: 2}"></some-comp>' }]
     }], null, null); })();
+export class MyMod {
+}
+MyMod.ɵmod = i0.ɵɵdefineNgModule({ type: MyMod });
+MyMod.ɵinj = i0.ɵɵdefineInjector({ factory: function MyMod_Factory(t) { return new (t || MyMod)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyMod, { declarations: [SomeComp, MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyMod, [{
+        type: NgModule,
+        args: [{ declarations: [SomeComp, MyApp] }]
+    }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: constant_object_literals.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class SomeComp {
+    prop: any;
+    otherProp: any;
+    static ɵfac: i0.ɵɵFactoryDef<SomeComp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<SomeComp, "some-comp", never, { "prop": "prop"; "otherProp": "otherProp"; }, {}, never, never>;
+}
 export declare class MyApp {
     static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "ng-component", never, {}, {}, never, never>;
 }
+export declare class MyMod {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyMod, [typeof SomeComp, typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyMod>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: constant_array_literals.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, Input, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
+export class SomeComp {
+}
+SomeComp.ɵfac = function SomeComp_Factory(t) { return new (t || SomeComp)(); };
+SomeComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: SomeComp, selector: "some-comp", inputs: { prop: "prop", otherProp: "otherProp" }, ngImport: i0, template: { source: '', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeComp, [{
+        type: Component,
+        args: [{ selector: 'some-comp', template: '' }]
+    }], null, { prop: [{
+            type: Input
+        }], otherProp: [{
+            type: Input
+        }] }); })();
 export class MyApp {
 }
 MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
-MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyApp, selector: "ng-component", ngImport: i0, template: { source: '<some-comp [prop]="[]" [otherProp]="[0, 1, 2]"></some-comp>', isInline: true } });
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyApp, selector: "ng-component", ngImport: i0, template: { source: '<some-comp [prop]="[]" [otherProp]="[0, 1, 2]"></some-comp>', isInline: true }, directives: [{ type: SomeComp, selector: "some-comp", inputs: ["prop", "otherProp"] }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
         type: Component,
         args: [{ template: '<some-comp [prop]="[]" [otherProp]="[0, 1, 2]"></some-comp>' }]
     }], null, null); })();
+export class MyMod {
+}
+MyMod.ɵmod = i0.ɵɵdefineNgModule({ type: MyMod });
+MyMod.ɵinj = i0.ɵɵdefineInjector({ factory: function MyMod_Factory(t) { return new (t || MyMod)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyMod, { declarations: [MyApp, SomeComp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyMod, [{
+        type: NgModule,
+        args: [{ declarations: [MyApp, SomeComp] }]
+    }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: constant_array_literals.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class SomeComp {
+    prop: any;
+    otherProp: any;
+    static ɵfac: i0.ɵɵFactoryDef<SomeComp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<SomeComp, "some-comp", never, { "prop": "prop"; "otherProp": "otherProp"; }, {}, never, never>;
+}
 export declare class MyApp {
     static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "ng-component", never, {}, {}, never, never>;
 }
+export declare class MyMod {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyMod, [typeof MyApp, typeof SomeComp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyMod>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: object_literals_null_vs_empty.js

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.js

@@ -15,5 +15,6 @@ MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
       $r3$.ɵɵproperty("prop", $r3$.ɵɵpureFunction0(2, $c0$))("otherProp", $r3$.ɵɵpureFunction0(3, $c1$));
     }
   },
+  directives: [SomeComp],
   encapsulation: 2
 });

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.ts

@@ -1,5 +1,15 @@
-import {Component} from '@angular/core';
+import {Component, Input, NgModule} from '@angular/core';
+
+@Component({selector: 'some-comp', template: ''})
+export class SomeComp {
+  @Input() prop!: any;
+  @Input() otherProp!: any;
+}
 
 @Component({template: '<some-comp [prop]="[]" [otherProp]="[0, 1, 2]"></some-comp>'})
 export class MyApp {
 }
+
+@NgModule({declarations: [MyApp, SomeComp]})
+export class MyMod {
+}

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.js

@@ -15,5 +15,6 @@ MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
       $r3$.ɵɵproperty("prop", $r3$.ɵɵpureFunction0(2, $c0$))("otherProp", $r3$.ɵɵpureFunction0(3, $c1$));
     }
   },
+  directives: [SomeComp],
   encapsulation: 2
 });

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.ts

@@ -1,5 +1,15 @@
-import {Component} from '@angular/core';
+import {Component, Input, NgModule} from '@angular/core';
+
+@Component({selector: 'some-comp', template: ''})
+export class SomeComp {
+  @Input() prop!: any;
+  @Input() otherProp!: any;
+}
 
 @Component({template: '<some-comp [prop]="{}" [otherProp]="{a: 1, b: 2}"></some-comp>'})
 export class MyApp {
 }
+
+@NgModule({declarations: [SomeComp, MyApp]})
+export class MyMod {
+}

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/GOLDEN_PARTIAL.js

@@ -26,22 +26,22 @@ ComplexComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER
     <div id="second"><ng-content SELECT="span[title=toSecond]"></ng-content></div>`
             }]
     }], null, null); })();
+export class MyApp {
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<simple>content</simple> <complex></complex>', isInline: true }, directives: [{ type: SimpleComponent, selector: "simple" }, { type: ComplexComponent, selector: "complex" }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{ selector: 'my-app', template: '<simple>content</simple> <complex></complex>' }]
+    }], null, null); })();
 export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SimpleComponent, ComplexComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SimpleComponent, ComplexComponent, MyApp] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [SimpleComponent, ComplexComponent] }]
+        args: [{ declarations: [SimpleComponent, ComplexComponent, MyApp] }]
-    }], null, null); })();
-export class MyApp {
-}
-MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
-MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<simple>content</simple> <complex></complex>', isInline: true } });
-/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
-        type: Component,
-        args: [{ selector: 'my-app', template: '<simple>content</simple> <complex></complex>' }]
     }], null, null); })();
 
 /****************************************************************************************************
@@ -56,14 +56,14 @@ export declare class ComplexComponent {
     static ɵfac: i0.ɵɵFactoryDef<ComplexComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<ComplexComponent, "complex", never, {}, {}, never, ["span[title=toFirst]", "span[title=toSecond]"]>;
 }
-export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof SimpleComponent, typeof ComplexComponent], never, never>;
-    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
-}
 export declare class MyApp {
     static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
 }
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof SimpleComponent, typeof ComplexComponent, typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: multiple_wildcards.js
@@ -220,22 +220,22 @@ SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER"
         type: Component,
         args: [{ selector: 'simple', template: '<div><ng-content select="[title]"></ng-content></div>' }]
     }], null, null); })();
+export class MyApp {
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<simple><h1 ngProjectAs="[title]"></h1></simple>', isInline: true }, directives: [{ type: SimpleComponent, selector: "simple" }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{ selector: 'my-app', template: '<simple><h1 ngProjectAs="[title]"></h1></simple>' }]
+    }], null, null); })();
 export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SimpleComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyApp, SimpleComponent] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [SimpleComponent] }]
+        args: [{ declarations: [MyApp, SimpleComponent] }]
-    }], null, null); })();
-export class MyApp {
-}
-MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
-MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<simple><h1 ngProjectAs="[title]"></h1></simple>', isInline: true } });
-/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
-        type: Component,
-        args: [{ selector: 'my-app', template: '<simple><h1 ngProjectAs="[title]"></h1></simple>' }]
     }], null, null); })();
 
 /****************************************************************************************************
@@ -246,14 +246,14 @@ export declare class SimpleComponent {
     static ɵfac: i0.ɵɵFactoryDef<SimpleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<SimpleComponent, "simple", never, {}, {}, never, ["[title]"]>;
 }
-export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof SimpleComponent], never, never>;
-    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
-}
 export declare class MyApp {
     static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
 }
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyApp, typeof SimpleComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: ng_project_as_compound_selector.js
@@ -268,22 +268,22 @@ SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER"
         type: Component,
         args: [{ selector: 'simple', template: '<div><ng-content select="[title]"></ng-content></div>' }]
     }], null, null); })();
+export class MyApp {
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<simple><h1 ngProjectAs="[title],[header]"></h1></simple>', isInline: true }, directives: [{ type: SimpleComponent, selector: "simple" }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{ selector: 'my-app', template: '<simple><h1 ngProjectAs="[title],[header]"></h1></simple>' }]
+    }], null, null); })();
 export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SimpleComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SimpleComponent, MyApp] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [SimpleComponent] }]
+        args: [{ declarations: [SimpleComponent, MyApp] }]
-    }], null, null); })();
-export class MyApp {
-}
-MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
-MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<simple><h1 ngProjectAs="[title],[header]"></h1></simple>', isInline: true } });
-/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
-        type: Component,
-        args: [{ selector: 'my-app', template: '<simple><h1 ngProjectAs="[title],[header]"></h1></simple>' }]
     }], null, null); })();
 
 /****************************************************************************************************
@@ -294,14 +294,14 @@ export declare class SimpleComponent {
     static ɵfac: i0.ɵɵFactoryDef<SimpleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<SimpleComponent, "simple", never, {}, {}, never, ["[title]"]>;
 }
-export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof SimpleComponent], never, never>;
-    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
-}
 export declare class MyApp {
     static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
 }
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof SimpleComponent, typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: ng_project_as_attribute.js

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.js

@@ -16,5 +16,6 @@ MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
           $r3$.ɵɵelementEnd();
       }
   },
+  directives: [SimpleComponent],
   encapsulation: 2
 })

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.ts

@@ -4,11 +4,11 @@ import {Component, NgModule} from '@angular/core';
 export class SimpleComponent {
 }
 
-@NgModule({declarations: [SimpleComponent]})
-export class MyModule {
-}
-
 @Component(
     {selector: 'my-app', template: '<simple><h1 ngProjectAs="[title],[header]"></h1></simple>'})
 export class MyApp {
 }
+
+@NgModule({declarations: [SimpleComponent, MyApp]})
+export class MyModule {
+}

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.js

@@ -14,5 +14,6 @@ MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
           $r3$.ɵɵelementEnd();
       }
   },
+  directives: [SimpleComponent],
   encapsulation: 2
 })

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.ts

@@ -4,10 +4,10 @@ import {Component, NgModule} from '@angular/core';
 export class SimpleComponent {
 }
 
-@NgModule({declarations: [SimpleComponent]})
-export class MyModule {
-}
-
 @Component({selector: 'my-app', template: '<simple><h1 ngProjectAs="[title]"></h1></simple>'})
 export class MyApp {
 }
+
+@NgModule({declarations: [MyApp, SimpleComponent]})
+export class MyModule {
+}

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template.ts

@@ -13,10 +13,10 @@ export class SimpleComponent {
 export class ComplexComponent {
 }
 
-@NgModule({declarations: [SimpleComponent, ComplexComponent]})
-export class MyModule {
-}
-
 @Component({selector: 'my-app', template: '<simple>content</simple> <complex></complex>'})
 export class MyApp {
 }
+
+@NgModule({declarations: [SimpleComponent, ComplexComponent, MyApp]})
+export class MyModule {
+}

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/GOLDEN_PARTIAL.js

@@ -99,6 +99,9 @@ MyPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myPipe", type: MyPipe, pure: false })
         args: [{ name: 'myPipe', pure: false }]
     }], null, null); })();
 export class MyApp {
+    constructor() {
+        this.name = '';
+    }
 }
 MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
 MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyApp, selector: "my-app", ngImport: i0, template: { source: '0:{{name | myPipe}}1:{{name | myPipe:1}}2:{{name | myPipe:1:2}}3:{{name | myPipe:1:2:3}}4:{{name | myPipe:1:2:3:4}}', isInline: true }, pipes: { "myPipe": MyPipe } });
@@ -131,6 +134,7 @@ export declare class MyPipe implements PipeTransform, OnDestroy {
     static ɵpipe: i0.ɵɵPipeDefWithMeta<MyPipe, "myPipe">;
 }
 export declare class MyApp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
 }

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.ts

@@ -14,6 +14,7 @@ export class MyPipe implements PipeTransform, OnDestroy {
       '0:{{name | myPipe}}1:{{name | myPipe:1}}2:{{name | myPipe:1:2}}3:{{name | myPipe:1:2:3}}4:{{name | myPipe:1:2:3:4}}'
 })
 export class MyApp {
+  name = '';
 }
 
 @NgModule({declarations: [MyPipe, MyApp]})

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/GOLDEN_PARTIAL.js

@@ -145,12 +145,20 @@ export declare class MyModule {
 /****************************************************************************************************
  * PARTIAL FILE: no_selector.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, Directive, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
+export class RouterOutlet {
+}
+RouterOutlet.ɵfac = function RouterOutlet_Factory(t) { return new (t || RouterOutlet)(); };
+RouterOutlet.ɵdir = i0.ɵɵngDeclareDirective({ version: "0.0.0-PLACEHOLDER", type: RouterOutlet, selector: "router-outlet", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(RouterOutlet, [{
+        type: Directive,
+        args: [{ selector: 'router-outlet' }]
+    }], null, null); })();
 export class EmptyOutletComponent {
 }
 EmptyOutletComponent.ɵfac = function EmptyOutletComponent_Factory(t) { return new (t || EmptyOutletComponent)(); };
-EmptyOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: EmptyOutletComponent, selector: "ng-component", ngImport: i0, template: { source: '<router-outlet></router-outlet>', isInline: true } });
+EmptyOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: EmptyOutletComponent, selector: "ng-component", ngImport: i0, template: { source: '<router-outlet></router-outlet>', isInline: true }, directives: [{ type: RouterOutlet, selector: "router-outlet" }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(EmptyOutletComponent, [{
         type: Component,
         args: [{ template: '<router-outlet></router-outlet>' }]
@@ -159,22 +167,26 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [EmptyOutletComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [EmptyOutletComponent, RouterOutlet] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [EmptyOutletComponent] }]
+        args: [{ declarations: [EmptyOutletComponent, RouterOutlet] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: no_selector.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class RouterOutlet {
+    static ɵfac: i0.ɵɵFactoryDef<RouterOutlet, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<RouterOutlet, "router-outlet", never, {}, {}, never>;
+}
 export declare class EmptyOutletComponent {
     static ɵfac: i0.ɵɵFactoryDef<EmptyOutletComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<EmptyOutletComponent, "ng-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof EmptyOutletComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof EmptyOutletComponent, typeof RouterOutlet], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector.ts

@@ -1,9 +1,13 @@
 import {Component, Directive, NgModule} from '@angular/core';
 
+@Directive({selector: 'router-outlet'})
+export class RouterOutlet {
+}
+
 @Component({template: '<router-outlet></router-outlet>'})
 export class EmptyOutletComponent {
 }
 
-@NgModule({declarations: [EmptyOutletComponent]})
+@NgModule({declarations: [EmptyOutletComponent, RouterOutlet]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_def.js

@@ -8,5 +8,6 @@ EmptyOutletComponent.ɵcmp = $r3$.ɵɵdefineComponent({
       $r3$.ɵɵelement(0, "router-outlet");
     }
   },
+  directives: [RouterOutlet],
   encapsulation: 2
 });

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/elements/GOLDEN_PARTIAL.js

@@ -42,10 +42,26 @@ export declare class MyModule {
  ****************************************************************************************************/
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
+export class MathCmp {
+}
+MathCmp.ɵfac = function MathCmp_Factory(t) { return new (t || MathCmp)(); };
+MathCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MathCmp, selector: "math", ngImport: i0, template: { source: '', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MathCmp, [{
+        type: Component,
+        args: [{ selector: 'math', template: '' }]
+    }], null, null); })();
+export class InfinityCmp {
+}
+InfinityCmp.ɵfac = function InfinityCmp_Factory(t) { return new (t || InfinityCmp)(); };
+InfinityCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: InfinityCmp, selector: "infinity", ngImport: i0, template: { source: '', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(InfinityCmp, [{
+        type: Component,
+        args: [{ selector: 'infinity', template: '' }]
+    }], null, null); })();
 export class MyComponent {
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
-MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '<div class="my-app" title="Hello"><math><infinity/></math><p>test</p></div>', isInline: true } });
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '<div class="my-app" title="Hello"><math><infinity/></math><p>test</p></div>', isInline: true }, directives: [{ type: MathCmp, selector: "math" }, { type: InfinityCmp, selector: "infinity" }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -57,22 +73,30 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, MathCmp, InfinityCmp] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [MyComponent, MathCmp, InfinityCmp] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: mathml.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class MathCmp {
+    static ɵfac: i0.ɵɵFactoryDef<MathCmp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MathCmp, "math", never, {}, {}, never, never>;
+}
+export declare class InfinityCmp {
+    static ɵfac: i0.ɵɵFactoryDef<InfinityCmp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<InfinityCmp, "infinity", never, {}, {}, never, never>;
+}
 export declare class MyComponent {
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof MathCmp, typeof InfinityCmp], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 
@@ -272,11 +296,41 @@ export declare class MyModule {
 /****************************************************************************************************
  * PARTIAL FILE: property_pure_functions.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, Directive, Input, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class DivDir {
+}
+DivDir.ɵfac = function DivDir_Factory(t) { return new (t || DivDir)(); };
+DivDir.ɵdir = i0.ɵɵngDeclareDirective({ version: "0.0.0-PLACEHOLDER", type: DivDir, selector: "div", inputs: { ternary: "ternary", pipe: "pipe", and: "and", or: "or" }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(DivDir, [{
+        type: Directive,
+        args: [{ selector: 'div' }]
+    }], null, { ternary: [{
+            type: Input
+        }], pipe: [{
+            type: Input
+        }], and: [{
+            type: Input
+        }], or: [{
+            type: Input
+        }] }); })();
+export class PipePipe {
+    transform(v, a, a2) { }
+}
+PipePipe.ɵfac = function PipePipe_Factory(t) { return new (t || PipePipe)(); };
+PipePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "pipe", type: PipePipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(PipePipe, [{
+        type: Pipe,
+        args: [{ name: 'pipe' }]
+    }], null, null); })();
 export class MyComponent {
     constructor() {
         this.id = 'one';
+        this.cond = '';
+        this.value = '';
+        this.a = '';
+        this.b = '';
+        this.c = '';
     }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
@@ -285,7 +339,7 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
     [pipe]="value | pipe:1:2"
     [and]="cond && [b]"
     [or]="cond || [c]"
-  ></div>`, isInline: true } });
+  ></div>`, isInline: true }, directives: [{ type: DivDir, selector: "div", inputs: ["ternary", "pipe", "and", "or"] }], pipes: { "pipe": PipePipe } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -302,23 +356,41 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, DivDir, PipePipe] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [MyComponent, DivDir, PipePipe] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: property_pure_functions.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class DivDir {
+    ternary: any;
+    pipe: any;
+    and: any;
+    or: any;
+    static ɵfac: i0.ɵɵFactoryDef<DivDir, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<DivDir, "div", never, { "ternary": "ternary"; "pipe": "pipe"; "and": "and"; "or": "or"; }, {}, never>;
+}
+export declare class PipePipe {
+    transform(v: any, a: any, a2: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<PipePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<PipePipe, "pipe">;
+}
 export declare class MyComponent {
     id: string;
+    cond: string;
+    value: string;
+    a: string;
+    b: string;
+    c: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof DivDir, typeof PipePipe], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/elements/mathml.ts

@@ -1,5 +1,13 @@
 import {Component, NgModule} from '@angular/core';
 
+@Component({selector: 'math', template: ''})
+export class MathCmp {
+}
+
+@Component({selector: 'infinity', template: ''})
+export class InfinityCmp {
+}
+
 @Component({
   selector: 'my-component',
   template: '<div class="my-app" title="Hello"><math><infinity/></math><p>test</p></div>'
@@ -7,6 +15,6 @@ import {Component, NgModule} from '@angular/core';
 export class MyComponent {
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [MyComponent, MathCmp, InfinityCmp]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/elements/property_pure_functions.ts

@@ -1,4 +1,17 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, Directive, Input, NgModule, Pipe} from '@angular/core';
+
+@Directive({selector: 'div'})
+export class DivDir {
+  @Input() ternary!: any;
+  @Input() pipe!: any;
+  @Input() and!: any;
+  @Input() or!: any;
+}
+
+@Pipe({name: 'pipe'})
+export class PipePipe {
+  transform(v: any, a: any, a2: any) {}
+}
 
 @Component({
   selector: 'my-component',
@@ -11,8 +24,13 @@ import {Component, NgModule} from '@angular/core';
 })
 export class MyComponent {
   id = 'one';
+  cond = '';
+  value = '';
+  a = '';
+  b = '';
+  c = '';
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [MyComponent, DivDir, PipePipe]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/GOLDEN_PARTIAL.js

@@ -26,6 +26,8 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyApp {
+    exp: any;
+    any: any;
     static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/static_animation_attribute.ts

@@ -2,6 +2,8 @@ import {Component, NgModule} from '@angular/core';
 
 @Component({selector: 'my-app', template: '<div @attr [@binding]="exp"></div>'})
 export class MyApp {
+  exp!: any;
+  any!: any;
 }
 
 @NgModule({declarations: [MyApp]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/GOLDEN_PARTIAL.js

@@ -137,8 +137,16 @@ export declare class MyComponent {
 /****************************************************************************************************
  * PARTIAL FILE: chain_multiple_bindings_for_multiple_elements.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
+export class CustomEl {
+}
+CustomEl.ɵfac = function CustomEl_Factory(t) { return new (t || CustomEl)(); };
+CustomEl.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: CustomEl, selector: "custom-element", ngImport: i0, template: { source: '', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(CustomEl, [{
+        type: Component,
+        args: [{ selector: 'custom-element', template: '' }]
+    }], null, null); })();
 export class MyComponent {
     constructor() {
         this.myTitle = 'hello';
@@ -150,7 +158,7 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
     <button [attr.title]="myTitle" [attr.id]="buttonId" [attr.tabindex]="1"></button>
     <span [attr.id]="1" [attr.title]="'hello'" [attr.some-attr]="1 + 2"></span>
     <custom-element [attr.some-attr]="'one'" [attr.some-other-attr]="2"></custom-element>
-  `, isInline: true } });
+  `, isInline: true }, directives: [{ type: CustomEl, selector: "custom-element" }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -161,17 +169,34 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
   `
             }]
     }], null, null); })();
+export class MyMod {
+}
+MyMod.ɵmod = i0.ɵɵdefineNgModule({ type: MyMod });
+MyMod.ɵinj = i0.ɵɵdefineInjector({ factory: function MyMod_Factory(t) { return new (t || MyMod)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyMod, { declarations: [MyComponent, CustomEl] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyMod, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent, CustomEl] }]
+    }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: chain_multiple_bindings_for_multiple_elements.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class CustomEl {
+    static ɵfac: i0.ɵɵFactoryDef<CustomEl, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<CustomEl, "custom-element", never, {}, {}, never, never>;
+}
 export declare class MyComponent {
     myTitle: string;
     buttonId: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "ng-component", never, {}, {}, never, never>;
 }
+export declare class MyMod {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyMod, [typeof MyComponent, typeof CustomEl], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyMod>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: chain_multiple_bindings_with_child_elements.js
@@ -259,6 +284,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
 import * as i0 from "@angular/core";
 export declare class MyComponent {
     doThings(): void;
+    three: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-app", never, {}, {}, never, never>;
 }
@@ -324,6 +350,15 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
 import * as i0 from "@angular/core";
 export declare class MyComponent {
     name: string;
+    one: any;
+    two: any;
+    three: any;
+    four: any;
+    five: any;
+    six: any;
+    seven: any;
+    eight: any;
+    nine: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-app", never, {}, {}, never, never>;
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/chain_multiple_bindings_for_multiple_elements.ts

@@ -1,4 +1,8 @@
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
+
+@Component({selector: 'custom-element', template: ''})
+export class CustomEl {
+}
 
 @Component({
   template: `
@@ -11,3 +15,7 @@ export class MyComponent {
   myTitle = 'hello';
   buttonId = 'special-button';
 }
+
+@NgModule({declarations: [MyComponent, CustomEl]})
+export class MyMod {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/exclude_bindings_from_consts.ts

@@ -14,6 +14,7 @@ import {Component, NgModule} from '@angular/core';
 })
 export class MyComponent {
   doThings() {}
+  three!: any;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/interpolated_attributes.ts

@@ -17,6 +17,15 @@ import {Component, NgModule} from '@angular/core';
 })
 export class MyComponent {
   name = 'John Doe';
+  one!: any;
+  two!: any;
+  three!: any;
+  four!: any;
+  five!: any;
+  six!: any;
+  seven!: any;
+  eight!: any;
+  nine!: any;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/GOLDEN_PARTIAL.js

@@ -140,6 +140,15 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
 import * as i0 from "@angular/core";
 export declare class MyComponent {
     name: string;
+    one: any;
+    two: any;
+    three: any;
+    four: any;
+    five: any;
+    six: any;
+    seven: any;
+    eight: any;
+    nine: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-app", never, {}, {}, never, never>;
 }
@@ -196,8 +205,17 @@ export declare class MyModule {
 /****************************************************************************************************
  * PARTIAL FILE: temporary_variables.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class AsyncPipe {
+    transform(v) { }
+}
+AsyncPipe.ɵfac = function AsyncPipe_Factory(t) { return new (t || AsyncPipe)(); };
+AsyncPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "async", type: AsyncPipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AsyncPipe, [{
+        type: Pipe,
+        args: [{ name: 'async' }]
+    }], null, null); })();
 // https://github.com/angular/angular/issues/37194
 // Verifies that temporary expressions used for expressions with potential side-effects in
 // the LHS of a safe navigation access are emitted within the binding expression itself, to
@@ -210,26 +228,44 @@ export class MyComponent {
     }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
-MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "ng-component", ngImport: i0, template: { source: '<button [title]="myTitle" [id]="(auth()?.identity() | async)?.id" [tabindex]="1"></button>', isInline: true } });
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "ng-component", ngImport: i0, template: { source: '<button [title]="myTitle" [id]="(auth().identity() | async)?.id" [tabindex]="1"></button>', isInline: true }, pipes: { "async": AsyncPipe } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
-                template: '<button [title]="myTitle" [id]="(auth()?.identity() | async)?.id" [tabindex]="1"></button>'
+                template: '<button [title]="myTitle" [id]="(auth().identity() | async)?.id" [tabindex]="1"></button>'
             }]
     }], null, null); })();
+export class MyMod {
+}
+MyMod.ɵmod = i0.ɵɵdefineNgModule({ type: MyMod });
+MyMod.ɵinj = i0.ɵɵdefineInjector({ factory: function MyMod_Factory(t) { return new (t || MyMod)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyMod, { declarations: [MyComponent, AsyncPipe] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyMod, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent, AsyncPipe] }]
+    }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: temporary_variables.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class AsyncPipe {
+    transform(v: any): null | any;
+    static ɵfac: i0.ɵɵFactoryDef<AsyncPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<AsyncPipe, "async">;
+}
 export declare class MyComponent {
     myTitle: string;
-    auth?: () => {
+    auth: () => {
         identity(): any;
     };
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "ng-component", never, {}, {}, never, never>;
 }
+export declare class MyMod {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyMod, [typeof MyComponent, typeof AsyncPipe], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyMod>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: chain_multiple_bindings.js
@@ -263,50 +299,108 @@ export declare class MyComponent {
 /****************************************************************************************************
  * PARTIAL FILE: chain_multiple_bindings_mixed.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, Directive, Input, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
+export class ButtonDir {
+}
+ButtonDir.ɵfac = function ButtonDir_Factory(t) { return new (t || ButtonDir)(); };
+ButtonDir.ɵdir = i0.ɵɵngDeclareDirective({ version: "0.0.0-PLACEHOLDER", type: ButtonDir, selector: "button", inputs: { al: ["aria-label", "al"] }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ButtonDir, [{
+        type: Directive,
+        args: [{ selector: 'button' }]
+    }], null, { al: [{
+            type: Input,
+            args: ['aria-label']
+        }] }); })();
 export class MyComponent {
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
-MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "ng-component", ngImport: i0, template: { source: '<button [title]="1" [attr.id]="2" [tabindex]="3" aria-label="{{1 + 3}}"></button>', isInline: true } });
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "ng-component", ngImport: i0, template: { source: '<button [title]="1" [attr.id]="2" [tabindex]="3" aria-label="{{1 + 3}}"></button>', isInline: true }, directives: [{ type: ButtonDir, selector: "button", inputs: ["aria-label"] }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{ template: '<button [title]="1" [attr.id]="2" [tabindex]="3" aria-label="{{1 + 3}}"></button>' }]
     }], null, null); })();
+export class MyMod {
+}
+MyMod.ɵmod = i0.ɵɵdefineNgModule({ type: MyMod });
+MyMod.ɵinj = i0.ɵɵdefineInjector({ factory: function MyMod_Factory(t) { return new (t || MyMod)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyMod, { declarations: [ButtonDir, MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyMod, [{
+        type: NgModule,
+        args: [{ declarations: [ButtonDir, MyComponent] }]
+    }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: chain_multiple_bindings_mixed.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class ButtonDir {
+    al: any;
+    static ɵfac: i0.ɵɵFactoryDef<ButtonDir, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<ButtonDir, "button", never, { "al": "aria-label"; }, {}, never>;
+}
 export declare class MyComponent {
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "ng-component", never, {}, {}, never, never>;
 }
+export declare class MyMod {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyMod, [typeof ButtonDir, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyMod>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: chain_bindings_with_interpolations.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, Directive, Input, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
+export class ButtonDir {
+}
+ButtonDir.ɵfac = function ButtonDir_Factory(t) { return new (t || ButtonDir)(); };
+ButtonDir.ɵdir = i0.ɵɵngDeclareDirective({ version: "0.0.0-PLACEHOLDER", type: ButtonDir, selector: "button", inputs: { al: ["aria-label", "al"] }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ButtonDir, [{
+        type: Directive,
+        args: [{ selector: 'button' }]
+    }], null, { al: [{
+            type: Input,
+            args: ['aria-label']
+        }] }); })();
 export class MyComponent {
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
-MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "ng-component", ngImport: i0, template: { source: '<button [title]="1" [id]="2" tabindex="{{0 + 3}}" aria-label="hello-{{1 + 3}}-{{2 + 3}}"></button>', isInline: true } });
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "ng-component", ngImport: i0, template: { source: '<button [title]="1" [id]="2" tabindex="{{0 + 3}}" aria-label="hello-{{1 + 3}}-{{2 + 3}}"></button>', isInline: true }, directives: [{ type: ButtonDir, selector: "button", inputs: ["aria-label"] }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
                 template: '<button [title]="1" [id]="2" tabindex="{{0 + 3}}" aria-label="hello-{{1 + 3}}-{{2 + 3}}"></button>'
             }]
     }], null, null); })();
+export class MyMod {
+}
+MyMod.ɵmod = i0.ɵɵdefineNgModule({ type: MyMod });
+MyMod.ɵinj = i0.ɵɵdefineInjector({ factory: function MyMod_Factory(t) { return new (t || MyMod)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyMod, { declarations: [ButtonDir, MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyMod, [{
+        type: NgModule,
+        args: [{ declarations: [ButtonDir, MyComponent] }]
+    }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: chain_bindings_with_interpolations.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class ButtonDir {
+    al: any;
+    static ɵfac: i0.ɵɵFactoryDef<ButtonDir, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<ButtonDir, "button", never, { "al": "aria-label"; }, {}, never>;
+}
 export declare class MyComponent {
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "ng-component", never, {}, {}, never, never>;
 }
+export declare class MyMod {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyMod, [typeof ButtonDir, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyMod>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: chain_synthetic_bindings.js
@@ -316,6 +410,7 @@ import * as i0 from "@angular/core";
 export class MyComponent {
     constructor() {
         this.expansionState = 'expanded';
+        this.myTitle = '';
     }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
@@ -345,6 +440,7 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
 import * as i0 from "@angular/core";
 export declare class MyComponent {
     expansionState: string;
+    myTitle: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "ng-component", never, {}, {}, never, never>;
 }
@@ -381,8 +477,30 @@ export declare class MyComponent {
 /****************************************************************************************************
  * PARTIAL FILE: chain_multiple_bindings_for_multiple_elements.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, Directive, Input, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
+export class SpanDir {
+}
+SpanDir.ɵfac = function SpanDir_Factory(t) { return new (t || SpanDir)(); };
+SpanDir.ɵdir = i0.ɵɵngDeclareDirective({ version: "0.0.0-PLACEHOLDER", type: SpanDir, selector: "span", inputs: { someProp: "someProp" }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SpanDir, [{
+        type: Directive,
+        args: [{ selector: 'span' }]
+    }], null, { someProp: [{
+            type: Input
+        }] }); })();
+export class CustomEl {
+}
+CustomEl.ɵfac = function CustomEl_Factory(t) { return new (t || CustomEl)(); };
+CustomEl.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: CustomEl, selector: "custom-element", inputs: { prop: "prop", otherProp: "otherProp" }, ngImport: i0, template: { source: '', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(CustomEl, [{
+        type: Component,
+        args: [{ selector: 'custom-element', template: '' }]
+    }], null, { prop: [{
+            type: Input
+        }], otherProp: [{
+            type: Input
+        }] }); })();
 export class MyComponent {
     constructor() {
         this.myTitle = 'hello';
@@ -394,7 +512,7 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
     <button [title]="myTitle" [id]="buttonId" [tabindex]="1"></button>
     <span [id]="1" [title]="'hello'" [someProp]="1 + 2"></span>
     <custom-element [prop]="'one'" [otherProp]="2"></custom-element>
-  `, isInline: true } });
+  `, isInline: true }, directives: [{ type: SpanDir, selector: "span", inputs: ["someProp"] }, { type: CustomEl, selector: "custom-element", inputs: ["prop", "otherProp"] }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -405,23 +523,57 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
   `
             }]
     }], null, null); })();
+export class MyMod {
+}
+MyMod.ɵmod = i0.ɵɵdefineNgModule({ type: MyMod });
+MyMod.ɵinj = i0.ɵɵdefineInjector({ factory: function MyMod_Factory(t) { return new (t || MyMod)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyMod, { declarations: [MyComponent, CustomEl, SpanDir] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyMod, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent, CustomEl, SpanDir] }]
+    }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: chain_multiple_bindings_for_multiple_elements.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class SpanDir {
+    someProp: any;
+    static ɵfac: i0.ɵɵFactoryDef<SpanDir, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SpanDir, "span", never, { "someProp": "someProp"; }, {}, never>;
+}
+export declare class CustomEl {
+    prop: any;
+    otherProp: any;
+    static ɵfac: i0.ɵɵFactoryDef<CustomEl, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<CustomEl, "custom-element", never, { "prop": "prop"; "otherProp": "otherProp"; }, {}, never, never>;
+}
 export declare class MyComponent {
     myTitle: string;
     buttonId: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "ng-component", never, {}, {}, never, never>;
 }
+export declare class MyMod {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyMod, [typeof MyComponent, typeof CustomEl, typeof SpanDir], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyMod>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: chain_multiple_bindings_with_child_elements.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, Directive, Input, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
+export class SpanDir {
+}
+SpanDir.ɵfac = function SpanDir_Factory(t) { return new (t || SpanDir)(); };
+SpanDir.ɵdir = i0.ɵɵngDeclareDirective({ version: "0.0.0-PLACEHOLDER", type: SpanDir, selector: "span", inputs: { someProp: "someProp" }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SpanDir, [{
+        type: Directive,
+        args: [{ selector: 'span' }]
+    }], null, { someProp: [{
+            type: Input
+        }] }); })();
 export class MyComponent {
     constructor() {
         this.myTitle = 'hello';
@@ -432,7 +584,7 @@ MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyCompone
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "ng-component", ngImport: i0, template: { source: `
     <button [title]="myTitle" [id]="buttonId" [tabindex]="1">
       <span [id]="1" [title]="'hello'" [someProp]="1 + 2"></span>
-    </button>`, isInline: true } });
+    </button>`, isInline: true }, directives: [{ type: SpanDir, selector: "span", inputs: ["someProp"] }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -442,15 +594,33 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
     </button>`
             }]
     }], null, null); })();
+export class MyMod {
+}
+MyMod.ɵmod = i0.ɵɵdefineNgModule({ type: MyMod });
+MyMod.ɵinj = i0.ɵɵdefineInjector({ factory: function MyMod_Factory(t) { return new (t || MyMod)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyMod, { declarations: [MyComponent, SpanDir] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyMod, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent, SpanDir] }]
+    }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: chain_multiple_bindings_with_child_elements.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class SpanDir {
+    someProp: any;
+    static ɵfac: i0.ɵɵFactoryDef<SpanDir, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SpanDir, "span", never, { "someProp": "someProp"; }, {}, never>;
+}
 export declare class MyComponent {
     myTitle: string;
     buttonId: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "ng-component", never, {}, {}, never, never>;
 }
+export declare class MyMod {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyMod, [typeof MyComponent, typeof SpanDir], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyMod>;
+}
 

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_bindings_with_interpolations.ts

@@ -1,4 +1,10 @@
-import {Component} from '@angular/core';
+import {Component, Directive, Input, NgModule} from '@angular/core';
+
+@Directive({selector: 'button'})
+export class ButtonDir {
+  @Input('aria-label') al!: any;
+}
+
 
 @Component({
   template:
@@ -6,3 +12,7 @@ import {Component} from '@angular/core';
 })
 export class MyComponent {
 }
+
+@NgModule({declarations: [ButtonDir, MyComponent]})
+export class MyMod {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_for_multiple_elements.ts

@@ -1,4 +1,15 @@
-import {Component} from '@angular/core';
+import {Component, Directive, Input, NgModule} from '@angular/core';
+
+@Directive({selector: 'span'})
+export class SpanDir {
+  @Input() someProp!: any;
+}
+
+@Component({selector: 'custom-element', template: ''})
+export class CustomEl {
+  @Input() prop!: any;
+  @Input() otherProp!: any;
+}
 
 @Component({
   template: `
@@ -11,3 +22,7 @@ export class MyComponent {
   myTitle = 'hello';
   buttonId = 'special-button';
 }
+
+@NgModule({declarations: [MyComponent, CustomEl, SpanDir]})
+export class MyMod {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_mixed.ts

@@ -1,6 +1,15 @@
-import {Component} from '@angular/core';
+import {Component, Directive, Input, NgModule} from '@angular/core';
+
+@Directive({selector: 'button'})
+export class ButtonDir {
+  @Input('aria-label') al!: any;
+}
 
 @Component(
     {template: '<button [title]="1" [attr.id]="2" [tabindex]="3" aria-label="{{1 + 3}}"></button>'})
 export class MyComponent {
 }
+
+@NgModule({declarations: [ButtonDir, MyComponent]})
+export class MyMod {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_with_child_elements.ts

@@ -1,4 +1,9 @@
-import {Component} from '@angular/core';
+import {Component, Directive, Input, NgModule} from '@angular/core';
+
+@Directive({selector: 'span'})
+export class SpanDir {
+  @Input() someProp!: any;
+}
 
 @Component({
   template: `
@@ -10,3 +15,7 @@ export class MyComponent {
   myTitle = 'hello';
   buttonId = 'special-button';
 }
+
+@NgModule({declarations: [MyComponent, SpanDir]})
+export class MyMod {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_synthetic_bindings.ts

@@ -11,4 +11,5 @@ import {Component} from '@angular/core';
 })
 export class MyComponent {
   expansionState = 'expanded';
+  myTitle = '';
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/interpolated_properties.ts

@@ -17,6 +17,15 @@ import {Component, NgModule} from '@angular/core';
 })
 export class MyComponent {
   name = 'John Doe';
+  one!: any;
+  two!: any;
+  three!: any;
+  four!: any;
+  five!: any;
+  six!: any;
+  seven!: any;
+  eight!: any;
+  nine!: any;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/temporary_variables.js

@@ -2,6 +2,6 @@ template: function MyComponent_Template(rf, ctx) {
   …
   if (rf & 2) {
     let $tmp0$ = null;
-    $r3$.ɵɵproperty("title", ctx.myTitle)("id", ($tmp0$ = $r3$.ɵɵpipeBind1(1, 3, ($tmp0$ = ctx.auth()) == null ? null : $tmp0$.identity())) == null ? null : $tmp0$.id)("tabindex", 1);
+    $r3$.ɵɵproperty("title", ctx.myTitle)("id", (tmp_1_0 = i0.ɵɵpipeBind1(1, 3, ctx.auth().identity())) == null ? null : tmp_1_0.id)("tabindex", 1);
   }
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/temporary_variables.ts

@@ -1,4 +1,9 @@
-import {Component} from '@angular/core';
+import {Component, NgModule, Pipe} from '@angular/core';
+
+@Pipe({name: 'async'})
+export class AsyncPipe {
+  transform(v: any): null|any {}
+}
 
 // https://github.com/angular/angular/issues/37194
 // Verifies that temporary expressions used for expressions with potential side-effects in
@@ -8,11 +13,15 @@ import {Component} from '@angular/core';
 // binding index.
 @Component({
   template:
-      '<button [title]="myTitle" [id]="(auth()?.identity() | async)?.id" [tabindex]="1"></button>'
+      '<button [title]="myTitle" [id]="(auth().identity() | async)?.id" [tabindex]="1"></button>'
 })
 export class MyComponent {
   myTitle = 'hello';
-  auth?: () => {
+  auth!: () => {
     identity(): any;
   };
 }
+
+@NgModule({declarations: [MyComponent, AsyncPipe]})
+export class MyMod {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/GOLDEN_PARTIAL.js

@@ -104,6 +104,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.visible = false;
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -133,6 +136,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    visible: boolean;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -147,6 +151,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.name = '';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -176,6 +183,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -187,9 +195,21 @@ export declare class MyModule {
 /****************************************************************************************************
  * PARTIAL FILE: ng-template_interpolation_structural.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class UppercasePipe {
+    transform(v) { }
+}
+UppercasePipe.ɵfac = function UppercasePipe_Factory(t) { return new (t || UppercasePipe)(); };
+UppercasePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "uppercase", type: UppercasePipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(UppercasePipe, [{
+        type: Pipe,
+        args: [{ name: 'uppercase' }]
+    }], null, null); })();
 export class MyComponent {
+    constructor() {
+        this.name = '';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -208,22 +228,28 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [UppercasePipe, MyComponent] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [UppercasePipe, MyComponent] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: ng-template_interpolation_structural.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class UppercasePipe {
+    transform(v: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<UppercasePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<UppercasePipe, "uppercase">;
+}
 export declare class MyComponent {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof UppercasePipe, typeof MyComponent], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 
@@ -276,6 +302,10 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.title = '';
+        this.label = '';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -311,6 +341,8 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    title: string;
+    label: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -365,8 +397,31 @@ export declare class MyModule {
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_basic.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, Directive, Input, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class UppercasePipe {
+    transform(v) { }
+}
+UppercasePipe.ɵfac = function UppercasePipe_Factory(t) { return new (t || UppercasePipe)(); };
+UppercasePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "uppercase", type: UppercasePipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(UppercasePipe, [{
+        type: Pipe,
+        args: [{ name: 'uppercase' }]
+    }], null, null); })();
+export class DivDir {
+}
+DivDir.ɵfac = function DivDir_Factory(t) { return new (t || DivDir)(); };
+DivDir.ɵdir = i0.ɵɵngDeclareDirective({ version: "0.0.0-PLACEHOLDER", type: DivDir, selector: "div", inputs: { al: ["aria-label", "al"], arl: ["aria-roledescription", "arl"] }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(DivDir, [{
+        type: Directive,
+        args: [{ selector: 'div' }]
+    }], null, { al: [{
+            type: Input,
+            args: ['aria-label']
+        }], arl: [{
+            type: Input,
+            args: ['aria-roledescription']
+        }] }); })();
 export class MyComponent {
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
@@ -380,7 +435,7 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
     i18n-title="m2|d2" title="{{ valueA }} and {{ valueB }} and again {{ valueA + valueB }}"
     i18n-aria-roledescription aria-roledescription="{{ valueC }}"
   ></div>
-  `, isInline: true } });
+  `, isInline: true }, directives: [{ type: DivDir, selector: "div", inputs: ["aria-label", "aria-roledescription"] }], pipes: { "uppercase": UppercasePipe } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -402,36 +457,62 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [UppercasePipe, MyComponent, DivDir] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [UppercasePipe, MyComponent, DivDir] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_basic.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class UppercasePipe {
+    transform(v: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<UppercasePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<UppercasePipe, "uppercase">;
+}
+export declare class DivDir {
+    al: any;
+    arl: any;
+    static ɵfac: i0.ɵɵFactoryDef<DivDir, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<DivDir, "div", never, { "al": "aria-label"; "arl": "aria-roledescription"; }, {}, never>;
+}
 export declare class MyComponent {
+    valueA: any;
+    valueB: any;
+    valueC: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof UppercasePipe, typeof MyComponent, typeof DivDir], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_custom_config.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class UppercasePipe {
+    transform(v) { }
+}
+UppercasePipe.ɵfac = function UppercasePipe_Factory(t) { return new (t || UppercasePipe)(); };
+UppercasePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "uppercase", type: UppercasePipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(UppercasePipe, [{
+        type: Pipe,
+        args: [{ name: 'uppercase' }]
+    }], null, null); })();
 export class MyComponent {
+    constructor() {
+        this.valueA = '';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
   <div i18n-title="m|d" title="intro {% valueA | uppercase %}"></div>
-  `, isInline: true }, interpolation: ["{%", "%}"] });
+  `, isInline: true }, pipes: { "uppercase": UppercasePipe }, interpolation: ["{%", "%}"] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -446,38 +527,56 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [UppercasePipe, MyComponent] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [UppercasePipe, MyComponent] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_custom_config.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class UppercasePipe {
+    transform(v: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<UppercasePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<UppercasePipe, "uppercase">;
+}
 export declare class MyComponent {
+    valueA: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof UppercasePipe, typeof MyComponent], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_nested_context.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class UppercasePipe {
+    transform(v) { }
+}
+UppercasePipe.ɵfac = function UppercasePipe_Factory(t) { return new (t || UppercasePipe)(); };
+UppercasePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "uppercase", type: UppercasePipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(UppercasePipe, [{
+        type: Pipe,
+        args: [{ name: 'uppercase' }]
+    }], null, null); })();
 export class MyComponent {
+    constructor() {
+        this.outer = '';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
   <div *ngFor="let outer of items">
     <div i18n-title="m|d" title="different scope {{ outer | uppercase }}"></div>
   </div>
-  `, isInline: true } });
+  `, isInline: true }, pipes: { "uppercase": UppercasePipe } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -493,17 +592,67 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [UppercasePipe, MyComponent] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [UppercasePipe, MyComponent] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_nested_context.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class UppercasePipe {
+    transform(v: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<UppercasePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<UppercasePipe, "uppercase">;
+}
 export declare class MyComponent {
+    outer: string;
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof UppercasePipe, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: interpolation_complex_expressions.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
+  <div i18n-title title="{{valueA.getRawValue()?.getTitle()}} title"></div>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: `
+  <div i18n-title title="{{valueA.getRawValue()?.getTitle()}} title"></div>
+  `
+            }]
+    }], null, null); })();
+export class MyModule {
+}
+MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
+MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: interpolation_complex_expressions.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    valueA: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -547,49 +696,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
-    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    valueA: any;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
-}
-export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
-    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
-}
-
-/****************************************************************************************************
- * PARTIAL FILE: interpolation_complex_expressions.js
- ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
-import * as i0 from "@angular/core";
-export class MyComponent {
-}
-MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
-MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
-  <div i18n-title title="{{valueA.getRawValue()?.getTitle()}} title"></div>
-  `, isInline: true } });
-/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
-        type: Component,
-        args: [{
-                selector: 'my-component',
-                template: `
-  <div i18n-title title="{{valueA.getRawValue()?.getTitle()}} title"></div>
-  `
-            }]
-    }], null, null); })();
-export class MyModule {
-}
-MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
-MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
-/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
-        type: NgModule,
-        args: [{ declarations: [MyComponent] }]
-    }], null, null); })();
-
-/****************************************************************************************************
- * PARTIAL FILE: interpolation_complex_expressions.d.ts
- ****************************************************************************************************/
-import * as i0 from "@angular/core";
-export declare class MyComponent {
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/bound_attributes.ts

@@ -10,6 +10,8 @@ import {Component, NgModule} from '@angular/core';
   `
 })
 export class MyComponent {
+  title = '';
+  label = '';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_basic.ts

@@ -1,4 +1,15 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, Directive, Input, NgModule, Pipe} from '@angular/core';
+
+@Pipe({name: 'uppercase'})
+export class UppercasePipe {
+  transform(v: any) {}
+}
+
+@Directive({selector: 'div'})
+export class DivDir {
+  @Input('aria-label') al!: any;
+  @Input('aria-roledescription') arl!: any;
+}
 
 @Component({
   selector: 'my-component',
@@ -15,8 +26,11 @@ import {Component, NgModule} from '@angular/core';
   `
 })
 export class MyComponent {
+  valueA: any;
+  valueB: any;
+  valueC: any;
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [UppercasePipe, MyComponent, DivDir]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_complex_expressions.ts

@@ -7,6 +7,7 @@ import {Component, NgModule} from '@angular/core';
   `
 })
 export class MyComponent {
+  valueA!: any;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_custom_config.ts

@@ -1,4 +1,9 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, Pipe} from '@angular/core';
+
+@Pipe({name: 'uppercase'})
+export class UppercasePipe {
+  transform(v: any) {}
+}
 
 @Component({
   selector: 'my-component',
@@ -8,8 +13,9 @@ import {Component, NgModule} from '@angular/core';
   interpolation: ['{%', '%}'],
 })
 export class MyComponent {
+  valueA = '';
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [UppercasePipe, MyComponent]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_nested_context.ts

@@ -1,4 +1,9 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, Pipe} from '@angular/core';
+
+@Pipe({name: 'uppercase'})
+export class UppercasePipe {
+  transform(v: any) {}
+}
 
 @Component({
   selector: 'my-component',
@@ -9,8 +14,9 @@ import {Component, NgModule} from '@angular/core';
   `
 })
 export class MyComponent {
+  outer = '';
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [UppercasePipe, MyComponent]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_interpolation.ts

@@ -7,6 +7,7 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  name = '';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_interpolation_structural.ts

@@ -1,4 +1,9 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, Pipe} from '@angular/core';
+
+@Pipe({name: 'uppercase'})
+export class UppercasePipe {
+  transform(v: any) {}
+}
 
 @Component({
   selector: 'my-component',
@@ -7,8 +12,9 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  name = '';
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [UppercasePipe, MyComponent]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_structural.ts

@@ -7,6 +7,7 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  visible = false;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/GOLDEN_PARTIAL.js

@@ -4,6 +4,9 @@
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.gender = 'male';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -33,6 +36,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    gender: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -47,6 +51,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.gender = 'male';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -76,6 +83,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    gender: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -90,6 +98,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.age = 20;
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -119,6 +130,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    age: number;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -133,6 +145,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.gender = 'female';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -174,6 +189,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    gender: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -188,6 +204,10 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.age = 1;
+        this.other = 'bla';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -218,6 +238,8 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    age: number;
+    other: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -232,6 +254,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.gender = 'female';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -269,6 +294,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    gender: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -283,6 +309,12 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.gender = 'female';
+        this.ageA = 1;
+        this.ageB = 2;
+        this.ageC = 3;
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -312,6 +344,10 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    gender: string;
+    ageA: number;
+    ageB: number;
+    ageC: number;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -326,6 +362,10 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.gender = 'male';
+        this.age = 1;
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -361,6 +401,8 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    gender: string;
+    age: number;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -375,6 +417,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.gender = 'male';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -420,6 +465,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    gender: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -434,6 +480,10 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.age = 1;
+        this.gender = 'male';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -475,6 +525,8 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    age: number;
+    gender: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -489,6 +541,10 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.count = 0;
+        this.name = 'Andrew';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -532,6 +588,8 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    count: number;
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -546,6 +604,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.gender = 'female';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -585,6 +646,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    gender: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -599,6 +661,11 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.gender = 'male';
+        this.weight = 1;
+        this.height = 1;
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -638,6 +705,9 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    gender: string;
+    weight: number;
+    height: number;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -652,6 +722,12 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.gender = 'male';
+        this.weight = 1;
+        this.height = 1;
+        this.age = 1;
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -693,6 +769,10 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    gender: string;
+    weight: number;
+    height: number;
+    age: number;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -707,6 +787,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.count = 1;
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -736,6 +819,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    count: number;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -750,6 +834,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.count = 0;
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -785,6 +872,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    count: number;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/bare_icu.ts

@@ -13,6 +13,7 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'female';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/custom_interpolation.ts

@@ -8,6 +8,8 @@ import {Component, NgModule} from '@angular/core';
   interpolation: ['{%', '%}'],
 })
 export class MyComponent {
+  age = 1;
+  other = 'bla';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/different_contexts.ts

@@ -12,6 +12,7 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'female';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/escape_quotes.ts

@@ -7,6 +7,7 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'male';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/expressions.ts

@@ -7,6 +7,10 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'female';
+  ageA = 1;
+  ageB = 2;
+  ageC = 3;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/html_content.ts

@@ -11,6 +11,7 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'female';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/icu_only.ts

@@ -7,6 +7,7 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  age = 20;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/icu_with_interpolations.ts

@@ -12,6 +12,9 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'male';
+  weight = 1;
+  height = 1;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/keyword_spaces.ts

@@ -10,6 +10,7 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  count = 0;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/metadata.ts

@@ -7,6 +7,7 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  count = 1;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/multiple_icus.ts

@@ -10,6 +10,8 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  gender = 'male';
+  age = 1;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/named_interpolations.ts

@@ -13,6 +13,10 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'male';
+  weight = 1;
+  height = 1;
+  age = 1;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/nested_icu_in_other_block.ts

@@ -14,6 +14,8 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  count = 0;
+  name = 'Andrew';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/nested_icus.ts

@@ -13,6 +13,8 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  age = 1;
+  gender = 'male';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/shared_placeholder.ts

@@ -15,6 +15,7 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'male';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/single_icu.ts

@@ -7,6 +7,7 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'male';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/GOLDEN_PARTIAL.js

@@ -51,6 +51,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    value: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -112,6 +113,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    value: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -153,6 +155,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    value: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -194,6 +197,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    value: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -255,6 +259,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    value: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -316,6 +321,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    value: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -357,6 +363,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    value: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -398,6 +405,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    value: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_legacy.ts

@@ -7,6 +7,7 @@ import {Component, NgModule} from '@angular/core';
   templateUrl: 'template.html'
 })
 export class MyComponent {
+  value!: any;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_legacy_normalized.ts

@@ -7,6 +7,7 @@ import {Component, NgModule} from '@angular/core';
   templateUrl: 'template.html'
 })
 export class MyComponent {
+  value!: any;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_non_legacy.ts

@@ -7,6 +7,7 @@ import {Component, NgModule} from '@angular/core';
   templateUrl: 'template.html'
 })
 export class MyComponent {
+  value!: any;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/inline_template_legacy.ts

@@ -17,6 +17,7 @@ Some Message\r\n
 }</div>`
 })
 export class MyComponent {
+  value!: any;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/inline_template_non_legacy.ts

@@ -17,6 +17,7 @@ Some Message\r\n
 }</div>`
 })
 export class MyComponent {
+  value!: any;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/GOLDEN_PARTIAL.js

@@ -141,6 +141,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.count = 1;
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '<div i18n>`{{ count }}`</div>', isInline: true } });
@@ -166,6 +169,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    count: number;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -231,6 +235,10 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.valueA = '';
+        this.valueB = '';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -266,6 +274,8 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    valueA: string;
+    valueB: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -280,6 +290,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.valueA = '';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -310,6 +323,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    valueA: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -321,8 +335,17 @@ export declare class MyModule {
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_complex_expressions.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class AsyncPipe {
+    transform(v) { }
+}
+AsyncPipe.ɵfac = function AsyncPipe_Factory(t) { return new (t || AsyncPipe)(); };
+AsyncPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "async", type: AsyncPipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AsyncPipe, [{
+        type: Pipe,
+        args: [{ name: 'async' }]
+    }], null, null); })();
 export class MyComponent {
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
@@ -332,7 +355,7 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
     {{ valueA?.a?.b }}
     {{ valueA.getRawValue()?.getTitle() }}
   </div>
-  `, isInline: true } });
+  `, isInline: true }, pipes: { "async": AsyncPipe } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -350,38 +373,60 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, AsyncPipe] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [MyComponent, AsyncPipe] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_complex_expressions.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class AsyncPipe {
+    transform(v: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<AsyncPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<AsyncPipe, "async">;
+}
 export declare class MyComponent {
+    valueA: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof AsyncPipe], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 
 /****************************************************************************************************
  * PARTIAL FILE: bindings_in_content.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class UppercasePipe {
+    transform(v) { }
+}
+UppercasePipe.ɵfac = function UppercasePipe_Factory(t) { return new (t || UppercasePipe)(); };
+UppercasePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "uppercase", type: UppercasePipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(UppercasePipe, [{
+        type: Pipe,
+        args: [{ name: 'uppercase' }]
+    }], null, null); })();
 export class MyComponent {
+    constructor() {
+        this.one = 1;
+        this.two = 2;
+        this.three = 3;
+        this.four = 4;
+        this.five = 5;
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
   <div i18n>My i18n block #{{ one }}</div>
   <div i18n>My i18n block #{{ two | uppercase }}</div>
   <div i18n>My i18n block #{{ three + four + five }}</div>
-  `, isInline: true } });
+  `, isInline: true }, pipes: { "uppercase": UppercasePipe } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -397,31 +442,55 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, UppercasePipe] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [MyComponent, UppercasePipe] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: bindings_in_content.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class UppercasePipe {
+    transform(v: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<UppercasePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<UppercasePipe, "uppercase">;
+}
 export declare class MyComponent {
+    one: number;
+    two: number;
+    three: number;
+    four: number;
+    five: number;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof UppercasePipe], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 
 /****************************************************************************************************
  * PARTIAL FILE: nested_elements.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class UppercasePipe {
+    transform(v) { }
+}
+UppercasePipe.ɵfac = function UppercasePipe_Factory(t) { return new (t || UppercasePipe)(); };
+UppercasePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "uppercase", type: UppercasePipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(UppercasePipe, [{
+        type: Pipe,
+        args: [{ name: 'uppercase' }]
+    }], null, null); })();
 export class MyComponent {
+    constructor() {
+        this.one = 1;
+        this.two = 2;
+        this.nestedInBlockTwo = '';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -439,7 +508,7 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
       </div>
     </div>
   </div>
-`, isInline: true } });
+`, isInline: true }, pipes: { "uppercase": UppercasePipe } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -466,30 +535,47 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, UppercasePipe] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [MyComponent, UppercasePipe] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: nested_elements.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class UppercasePipe {
+    transform(v: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<UppercasePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<UppercasePipe, "uppercase">;
+}
 export declare class MyComponent {
+    one: number;
+    two: number;
+    nestedInBlockTwo: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof UppercasePipe], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 
 /****************************************************************************************************
  * PARTIAL FILE: nested_elements_with_i18n_attributes.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class UppercasePipe {
+    transform(v) { }
+}
+UppercasePipe.ɵfac = function UppercasePipe_Factory(t) { return new (t || UppercasePipe)(); };
+UppercasePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "uppercase", type: UppercasePipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(UppercasePipe, [{
+        type: Pipe,
+        args: [{ name: 'uppercase' }]
+    }], null, null); })();
 export class MyComponent {
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
@@ -506,7 +592,7 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
     Plain text in nested element (block #2)
   </span>
 </div>
-`, isInline: true } });
+`, isInline: true }, pipes: { "uppercase": UppercasePipe } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -531,22 +617,32 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [UppercasePipe, MyComponent] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [UppercasePipe, MyComponent] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: nested_elements_with_i18n_attributes.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class UppercasePipe {
+    transform(v: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<UppercasePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<UppercasePipe, "uppercase">;
+}
 export declare class MyComponent {
+    valueA: any;
+    valueB: any;
+    valueC: any;
+    valueD: any;
+    valueE: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof UppercasePipe, typeof MyComponent], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 
@@ -792,6 +888,7 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    onClick() { }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -821,6 +918,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    onClick(): void;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/backtick_quotes.ts

@@ -5,6 +5,7 @@ import {Component, NgModule} from '@angular/core';
   template: '<div i18n>`{{ count }}`</div>',
 })
 export class MyComponent {
+  count = 1;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/bindings_in_content.ts

@@ -1,4 +1,9 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, Pipe} from '@angular/core';
+
+@Pipe({name: 'uppercase'})
+export class UppercasePipe {
+  transform(v: any) {}
+}
 
 @Component({
   selector: 'my-component',
@@ -9,8 +14,13 @@ import {Component, NgModule} from '@angular/core';
   `
 })
 export class MyComponent {
+  one = 1;
+  two = 2;
+  three = 3;
+  four = 4;
+  five = 5;
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [MyComponent, UppercasePipe]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/event_listeners.ts

@@ -7,6 +7,7 @@ import {Component, NgModule} from '@angular/core';
   `
 })
 export class MyComponent {
+  onClick() {}
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/interpolation_complex_expressions.ts

@@ -1,4 +1,9 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, Pipe} from '@angular/core';
+
+@Pipe({name: 'async'})
+export class AsyncPipe {
+  transform(v: any) {}
+}
 
 @Component({
   selector: 'my-component',
@@ -11,8 +16,9 @@ import {Component, NgModule} from '@angular/core';
   `
 })
 export class MyComponent {
+  valueA!: any;
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [MyComponent, AsyncPipe]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/interpolation_custom_config.ts

@@ -8,6 +8,7 @@ import {Component, NgModule} from '@angular/core';
   interpolation: ['{%', '%}'],
 })
 export class MyComponent {
+  valueA = '';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/named_interpolations.ts

@@ -10,6 +10,8 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  valueA = '';
+  valueB = '';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/nested_elements.ts

@@ -1,4 +1,9 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, Pipe} from '@angular/core';
+
+@Pipe({name: 'uppercase'})
+export class UppercasePipe {
+  transform(v: any) {}
+}
 
 @Component({
   selector: 'my-component',
@@ -20,8 +25,11 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  one = 1;
+  two = 2;
+  nestedInBlockTwo = '';
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [MyComponent, UppercasePipe]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/nested_elements_with_i18n_attributes.ts

@@ -1,4 +1,9 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, Pipe} from '@angular/core';
+
+@Pipe({name: 'uppercase'})
+export class UppercasePipe {
+  transform(v: any) {}
+}
 
 @Component({
   selector: 'my-component',
@@ -18,8 +23,13 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  valueA!: any;
+  valueB!: any;
+  valueC!: any;
+  valueD!: any;
+  valueE!: any;
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [UppercasePipe, MyComponent]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/GOLDEN_PARTIAL.js

@@ -1,14 +1,26 @@
 /****************************************************************************************************
  * PARTIAL FILE: single_ng-container.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class UppercasePipe {
+    transform(v) { }
+}
+UppercasePipe.ɵfac = function UppercasePipe_Factory(t) { return new (t || UppercasePipe)(); };
+UppercasePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "uppercase", type: UppercasePipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(UppercasePipe, [{
+        type: Pipe,
+        args: [{ name: 'uppercase' }]
+    }], null, null); })();
 export class MyComponent {
+    constructor() {
+        this.valueA = '';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
   <ng-container i18n>Some content: {{ valueA | uppercase }}</ng-container>
-`, isInline: true } });
+`, isInline: true }, pipes: { "uppercase": UppercasePipe } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -22,22 +34,28 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, UppercasePipe] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [MyComponent, UppercasePipe] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: single_ng-container.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class UppercasePipe {
+    transform(v: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<UppercasePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<UppercasePipe, "uppercase">;
+}
 export declare class MyComponent {
+    valueA: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof UppercasePipe], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 
@@ -87,9 +105,22 @@ export declare class MyModule {
 /****************************************************************************************************
  * PARTIAL FILE: child_elements.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class UppercasePipe {
+    transform(v) { }
+}
+UppercasePipe.ɵfac = function UppercasePipe_Factory(t) { return new (t || UppercasePipe)(); };
+UppercasePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "uppercase", type: UppercasePipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(UppercasePipe, [{
+        type: Pipe,
+        args: [{ name: 'uppercase' }]
+    }], null, null); })();
 export class MyComponent {
+    constructor() {
+        this.valueA = '';
+        this.valueB = '';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -97,7 +128,7 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
     <ng-template>Template content: {{ valueA | uppercase }}</ng-template>
     <ng-container>Container content: {{ valueB | uppercase }}</ng-container>
   </div>
-`, isInline: true } });
+`, isInline: true }, pipes: { "uppercase": UppercasePipe } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -114,22 +145,29 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, UppercasePipe] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [MyComponent, UppercasePipe] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: child_elements.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class UppercasePipe {
+    transform(v: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<UppercasePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<UppercasePipe, "uppercase">;
+}
 export declare class MyComponent {
+    valueA: string;
+    valueB: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof UppercasePipe], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 
@@ -139,6 +177,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.age = 0;
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -170,6 +211,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    age: number;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -247,6 +289,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.gender = 'female';
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -278,6 +323,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    gender: string;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/bare_icus.ts

@@ -8,6 +8,7 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  age = 0;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/child_elements.ts

@@ -1,4 +1,9 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, Pipe} from '@angular/core';
+
+@Pipe({name: 'uppercase'})
+export class UppercasePipe {
+  transform(v: any) {}
+}
 
 @Component({
   selector: 'my-component',
@@ -10,8 +15,10 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  valueA = '';
+  valueB = '';
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [MyComponent, UppercasePipe]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/icus.ts

@@ -8,6 +8,7 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  gender = 'female';
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/single_ng-container.ts

@@ -1,4 +1,9 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, Pipe} from '@angular/core';
+
+@Pipe({name: 'uppercase'})
+export class UppercasePipe {
+  transform(v: any) {}
+}
 
 @Component({
   selector: 'my-component',
@@ -7,8 +12,9 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  valueA = '';
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [MyComponent, UppercasePipe]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/self-closing_i18n_instructions/GOLDEN_PARTIAL.js

@@ -47,6 +47,9 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    constructor() {
+        this.age = 1;
+    }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -76,6 +79,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    age: number;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/self-closing_i18n_instructions/icu_only.ts

@@ -7,6 +7,7 @@ import {Component, NgModule} from '@angular/core';
   `,
 })
 export class MyComponent {
+  age = 1;
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/GOLDEN_PARTIAL.js

@@ -7,10 +7,10 @@ export class MyComponent {
     onClick(event) { }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
-MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<div (click)="onClick($event); 1 == 2"></div>`, isInline: true } });
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<div (click)="onClick($event); 1 == 1"></div>`, isInline: true } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
-        args: [{ selector: 'my-component', template: `<div (click)="onClick($event); 1 == 2"></div>` }]
+        args: [{ selector: 'my-component', template: `<div (click)="onClick($event); 1 == 1"></div>` }]
     }], null, null); })();
 export class MyModule {
 }
@@ -53,7 +53,7 @@ export class MyComponent {
     onClick(event) { }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
-MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<my-app (click)="onClick($event);"></my-app>`, isInline: true } });
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<my-app (click)="onClick($event);"></my-app>`, isInline: true }, directives: [{ type: MyApp, selector: "my-app" }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{ selector: 'my-component', template: `<my-app (click)="onClick($event);"></my-app>` }]
@@ -62,10 +62,10 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, MyApp] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [MyComponent, MyApp] }]
     }], null, null); })();
 
 /****************************************************************************************************
@@ -82,7 +82,7 @@ export declare class MyComponent {
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof MyApp], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 
@@ -145,6 +145,7 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    onClick(v) { }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
@@ -176,6 +177,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    onClick(v: any): void;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -190,6 +192,8 @@ export declare class MyModule {
 import { Component, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
 export class MyComponent {
+    click() { }
+    change() { }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<div (click)="click()" (change)="change()"></div>`, isInline: true } });
@@ -215,6 +219,8 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    click(): void;
+    change(): void;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
@@ -226,15 +232,38 @@ export declare class MyModule {
 /****************************************************************************************************
  * PARTIAL FILE: cross_element_chained_listeners.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, EventEmitter, NgModule, Output } from '@angular/core';
 import * as i0 from "@angular/core";
+export class SomeComp {
+    constructor() {
+        this.update = new EventEmitter();
+        this.delete = new EventEmitter();
+    }
+}
+SomeComp.ɵfac = function SomeComp_Factory(t) { return new (t || SomeComp)(); };
+SomeComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: SomeComp, selector: "some-comp", outputs: { update: "update", delete: "delete" }, ngImport: i0, template: { source: '', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeComp, [{
+        type: Component,
+        args: [{
+                selector: 'some-comp',
+                template: '',
+            }]
+    }], null, { update: [{
+            type: Output
+        }], delete: [{
+            type: Output
+        }] }); })();
 export class MyComponent {
+    click() { }
+    change() { }
+    delete() { }
+    update() { }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
       <div (click)="click()" (change)="change()"></div>
       <some-comp (update)="update()" (delete)="delete()"></some-comp>
-    `, isInline: true } });
+    `, isInline: true }, directives: [{ type: SomeComp, selector: "some-comp", outputs: ["update", "delete"] }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -249,22 +278,33 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, SomeComp] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [MyComponent, SomeComp] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: cross_element_chained_listeners.d.ts
  ****************************************************************************************************/
+import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
+export declare class SomeComp {
+    update: EventEmitter<any>;
+    delete: EventEmitter<any>;
+    static ɵfac: i0.ɵɵFactoryDef<SomeComp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<SomeComp, "some-comp", never, {}, { "update": "update"; "delete": "delete"; }, never, never>;
+}
 export declare class MyComponent {
+    click(): void;
+    change(): void;
+    delete(): void;
+    update(): void;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof SomeComp], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 
@@ -442,24 +482,52 @@ export {};
 /****************************************************************************************************
  * PARTIAL FILE: event_in_property_binding.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, Directive, Input, NgModule } from '@angular/core';
 import * as i0 from "@angular/core";
+export class DivDir {
+}
+DivDir.ɵfac = function DivDir_Factory(t) { return new (t || DivDir)(); };
+DivDir.ɵdir = i0.ɵɵngDeclareDirective({ version: "0.0.0-PLACEHOLDER", type: DivDir, selector: "div", inputs: { event: "event" }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(DivDir, [{
+        type: Directive,
+        args: [{ selector: 'div' }]
+    }], null, { event: [{
+            type: Input
+        }] }); })();
 class Comp {
     constructor() {
         this.$event = 1;
     }
 }
 Comp.ɵfac = function Comp_Factory(t) { return new (t || Comp)(); };
-Comp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: Comp, selector: "ng-component", ngImport: i0, template: { source: '<div [event]="$event"></div>', isInline: true } });
+Comp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: Comp, selector: "ng-component", ngImport: i0, template: { source: '<div [event]="$event"></div>', isInline: true }, directives: [{ type: DivDir, selector: "div", inputs: ["event"] }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Comp, [{
         type: Component,
         args: [{ template: '<div [event]="$event"></div>' }]
     }], null, null); })();
+export class MyMod {
+}
+MyMod.ɵmod = i0.ɵɵdefineNgModule({ type: MyMod });
+MyMod.ɵinj = i0.ɵɵdefineInjector({ factory: function MyMod_Factory(t) { return new (t || MyMod)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyMod, { declarations: [Comp, DivDir] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyMod, [{
+        type: NgModule,
+        args: [{ declarations: [Comp, DivDir] }]
+    }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: event_in_property_binding.d.ts
  ****************************************************************************************************/
-export {};
+import * as i0 from "@angular/core";
+export declare class DivDir {
+    event: any;
+    static ɵfac: i0.ɵɵFactoryDef<DivDir, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<DivDir, "div", never, { "event": "event"; }, {}, never>;
+}
+export declare class MyMod {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyMod, [typeof Comp, typeof DivDir], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyMod>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: event_arg_host_listener_implicit_meaning.js

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener.ts

@@ -9,6 +9,6 @@ export class MyComponent {
   onClick(event: any) {}
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [MyComponent, MyApp]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners.ts

@@ -1,4 +1,13 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, EventEmitter, NgModule, Output} from '@angular/core';
+
+@Component({
+  selector: 'some-comp',
+  template: '',
+})
+export class SomeComp {
+  @Output() update = new EventEmitter<any>();
+  @Output() delete = new EventEmitter<any>();
+}
 
 @Component({
   selector: 'my-component',
@@ -8,8 +17,12 @@ import {Component, NgModule} from '@angular/core';
     `
 })
 export class MyComponent {
+  click() {}
+  change() {}
+  delete() {}
+  update() {}
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [MyComponent, SomeComp]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener.ts

@@ -1,6 +1,6 @@
 import {Component, NgModule} from '@angular/core';
 
-@Component({selector: 'my-component', template: `<div (click)="onClick($event); 1 == 2"></div>`})
+@Component({selector: 'my-component', template: `<div (click)="onClick($event); 1 == 1"></div>`})
 export class MyComponent {
   onClick(event: any) {}
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener_template.js

@@ -5,7 +5,7 @@ template: function MyComponent_Template(rf, ctx) {
     $r3$.ɵɵelementStart(0, "div", 0);
     $r3$.ɵɵlistener("click", function MyComponent_Template_div_click_0_listener($event) {
       ctx.onClick($event);
-      return 1 == 2;
+      return 1 == 1;
     });
     $r3$.ɵɵelementEnd();
   }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding.ts

@@ -1,6 +1,15 @@
-import {Component} from '@angular/core';
+import {Component, Directive, Input, NgModule} from '@angular/core';
+
+@Directive({selector: 'div'})
+export class DivDir {
+  @Input() event!: any;
+}
 
 @Component({template: '<div [event]="$event"></div>'})
 class Comp {
   $event = 1;
 }
+
+@NgModule({declarations: [Comp, DivDir]})
+export class MyMod {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener.ts

@@ -8,6 +8,7 @@ import {Component, NgModule} from '@angular/core';
   `
 })
 export class MyComponent {
+  onClick(v: any) {}
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners.ts

@@ -5,6 +5,8 @@ import {Component, NgModule} from '@angular/core';
   template: `<div (click)="click()" (change)="change()"></div>`,
 })
 export class MyComponent {
+  click() {}
+  change() {}
 }
 
 @NgModule({declarations: [MyComponent]})

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/GOLDEN_PARTIAL.js

@@ -150,9 +150,7 @@ export class MyComponent {
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
 MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", host: { properties: { "style!important": "myStyleExp", "class!important": "myClassExp", "class.foo!important": "myFooClassExp", "style.width!important": "myWidthExp" } }, ngImport: i0, template: { source: `
-    <div [style!important]="myStyleExp"
+    <div [style.height!important]="myHeightExp"
-         [class!important]="myClassExp"
-         [style.height!important]="myHeightExp"
          [class.bar!important]="myBarClassExp"></div>
   `, isInline: true } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
@@ -160,9 +158,7 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
         args: [{
                 selector: 'my-component',
                 template: `
-    <div [style!important]="myStyleExp"
+    <div [style.height!important]="myHeightExp"
-         [class!important]="myClassExp"
-         [style.height!important]="myHeightExp"
          [class.bar!important]="myBarClassExp"></div>
   `,
                 host: { '[style!important]': 'myStyleExp', '[class!important]': 'myClassExp' }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/important.ts

@@ -3,9 +3,7 @@ import {Component, HostBinding, NgModule} from '@angular/core';
 @Component({
   selector: 'my-component',
   template: `
-    <div [style!important]="myStyleExp"
+    <div [style.height!important]="myHeightExp"
-         [class!important]="myClassExp"
-         [style.height!important]="myHeightExp"
          [class.bar!important]="myBarClassExp"></div>
   `,
   host: {'[style!important]': 'myStyleExp', '[class!important]': 'myClassExp'}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/important_host.js

@@ -3,8 +3,6 @@ function MyComponent_Template(rf, ctx) {
     $r3$.ɵɵelement(0, "div");
   }
   if (rf & 2) {
-    $r3$.ɵɵstyleMap(ctx.myStyleExp);
-    $r3$.ɵɵclassMap(ctx.myClassExp);
     $r3$.ɵɵstyleProp("height", ctx.myHeightExp);
     $r3$.ɵɵclassProp("bar", ctx.myBarClassExp);
   }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/mixed_style_and_class/GOLDEN_PARTIAL.js

@@ -49,8 +49,26 @@ export declare class MyModule {
 /****************************************************************************************************
  * PARTIAL FILE: pipe_bindings.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class StylePipe {
+    transform(v) { }
+}
+StylePipe.ɵfac = function StylePipe_Factory(t) { return new (t || StylePipe)(); };
+StylePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "stylePipe", type: StylePipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(StylePipe, [{
+        type: Pipe,
+        args: [{ name: 'stylePipe' }]
+    }], null, null); })();
+export class ClassPipe {
+    transform(v) { }
+}
+ClassPipe.ɵfac = function ClassPipe_Factory(t) { return new (t || ClassPipe)(); };
+ClassPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "classPipe", type: ClassPipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ClassPipe, [{
+        type: Pipe,
+        args: [{ name: 'classPipe' }]
+    }], null, null); })();
 export class MyComponent {
     constructor() {
         this.myStyleExp = [{ color: 'red' }, { color: 'blue', duration: 1000 }];
@@ -58,7 +76,7 @@ export class MyComponent {
     }
 }
 MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
-MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<div [style]="myStyleExp | stylePipe" [class]="myClassExp | classPipe"></div>`, isInline: true } });
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<div [style]="myStyleExp | stylePipe" [class]="myClassExp | classPipe"></div>`, isInline: true }, pipes: { "stylePipe": StylePipe, "classPipe": ClassPipe } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -70,16 +88,26 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, StylePipe, ClassPipe] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [MyComponent, StylePipe, ClassPipe] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: pipe_bindings.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class StylePipe {
+    transform(v: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<StylePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<StylePipe, "stylePipe">;
+}
+export declare class ClassPipe {
+    transform(v: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<ClassPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<ClassPipe, "classPipe">;
+}
 export declare class MyComponent {
     myStyleExp: ({
         color: string;
@@ -93,15 +121,24 @@ export declare class MyComponent {
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof StylePipe, typeof ClassPipe], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 
 /****************************************************************************************************
  * PARTIAL FILE: pipe_bindings_slots.js
  ****************************************************************************************************/
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
+export class PipePipe {
+    transform(v) { }
+}
+PipePipe.ɵfac = function PipePipe_Factory(t) { return new (t || PipePipe)(); };
+PipePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "pipe", type: PipePipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(PipePipe, [{
+        type: Pipe,
+        args: [{ name: 'pipe' }]
+    }], null, null); })();
 export class MyComponent {
     constructor() {
         this.myStyleExp = {};
@@ -119,7 +156,7 @@ MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", ty
          [style]="myStyleExp | pipe:1000"
          [style.bar]="barExp | pipe:3000"
          [style.baz]="bazExp | pipe:4000">
-         {{ item }}</div>`, isInline: true } });
+         {{ item }}</div>`, isInline: true }, pipes: { "pipe": PipePipe } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
         type: Component,
         args: [{
@@ -137,16 +174,21 @@ export class MyModule {
 }
 MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
 MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, PipePipe] }); })();
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
         type: NgModule,
-        args: [{ declarations: [MyComponent] }]
+        args: [{ declarations: [MyComponent, PipePipe] }]
     }], null, null); })();
 
 /****************************************************************************************************
  * PARTIAL FILE: pipe_bindings_slots.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
+export declare class PipePipe {
+    transform(v: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<PipePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<PipePipe, "pipe">;
+}
 export declare class MyComponent {
     myStyleExp: {};
     fooExp: string;
@@ -158,7 +200,7 @@ export declare class MyComponent {
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
 export declare class MyModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof PipePipe], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
 

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/mixed_style_and_class/pipe_bindings.ts

@@ -1,4 +1,14 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, Pipe} from '@angular/core';
+
+@Pipe({name: 'stylePipe'})
+export class StylePipe {
+  transform(v: any) {}
+}
+
+@Pipe({name: 'classPipe'})
+export class ClassPipe {
+  transform(v: any) {}
+}
 
 @Component({
   selector: 'my-component',
@@ -9,6 +19,6 @@ export class MyComponent {
   myClassExp = 'foo bar apple';
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [MyComponent, StylePipe, ClassPipe]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/mixed_style_and_class/pipe_bindings_slots.ts

@@ -1,4 +1,9 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, Pipe} from '@angular/core';
+
+@Pipe({name: 'pipe'})
+export class PipePipe {
+  transform(v: any) {}
+}
 
 @Component({
   selector: 'my-component',
@@ -19,6 +24,6 @@ export class MyComponent {
   item = 1;
 }
 
-@NgModule({declarations: [MyComponent]})
+@NgModule({declarations: [MyComponent, PipePipe]})
 export class MyModule {
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_template/GOLDEN_PARTIAL.js

@@ -846,6 +846,7 @@ MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) {
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class MyComponent {
+    a: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_template/nested_ternary_operation.ts

@@ -6,6 +6,7 @@ import {Component, NgModule} from '@angular/core';
     {{a?.b ? 1 : 2 }}`,
 })
 export class MyComponent {
+  a!: any;
 }
 
 @NgModule({declarations: [MyComponent]})