From 6cc9ab120bb757798158d0d35b356fd735d84ced Mon Sep 17 00:00:00 2001
From: Andrew Scott <atscott@google.com>
Date: Fri, 4 Dec 2020 16:39:12 -0800
Subject: [PATCH] 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
---
 .../src/ngtsc/core/api/src/options.ts         |  11 -
 .../src/ngtsc/core/src/compiler.ts            |   5 -
 .../GOLDEN_PARTIAL.js                         |  70 +++++-
 .../constant_array_literals.js                |   1 +
 .../constant_array_literals.ts                |  12 +-
 .../constant_object_literals.js               |   1 +
 .../constant_object_literals.ts               |  12 +-
 .../content_projection/GOLDEN_PARTIAL.js      |  84 +++----
 .../ng_project_as_compound_selector.js        |   1 +
 .../ng_project_as_compound_selector.ts        |   8 +-
 .../ng_project_as_selector.js                 |   1 +
 .../ng_project_as_selector.ts                 |   8 +-
 .../content_projection/root_template.ts       |   8 +-
 .../pipes/GOLDEN_PARTIAL.js                   |   4 +
 .../pipes/pipe_invocation.ts                  |   1 +
 .../value_composition/GOLDEN_PARTIAL.js       |  22 +-
 .../value_composition/no_selector.ts          |   6 +-
 .../value_composition/no_selector_def.js      |   1 +
 .../elements/GOLDEN_PARTIAL.js                |  90 ++++++-
 .../r3_compiler_compliance/elements/mathml.ts |  10 +-
 .../elements/property_pure_functions.ts       |  22 +-
 .../animations/GOLDEN_PARTIAL.js              |   2 +
 .../animations/static_animation_attribute.ts  |   2 +
 .../attribute_bindings/GOLDEN_PARTIAL.js      |  39 ++-
 ...multiple_bindings_for_multiple_elements.ts |  10 +-
 .../exclude_bindings_from_consts.ts           |   1 +
 .../interpolated_attributes.ts                |   9 +
 .../property_bindings/GOLDEN_PARTIAL.js       | 194 ++++++++++++++-
 .../chain_bindings_with_interpolations.ts     |  12 +-
 ...multiple_bindings_for_multiple_elements.ts |  17 +-
 .../chain_multiple_bindings_mixed.ts          |  11 +-
 ...n_multiple_bindings_with_child_elements.ts |  11 +-
 .../chain_synthetic_bindings.ts               |   1 +
 .../interpolated_properties.ts                |   9 +
 .../property_bindings/temporary_variables.js  |   2 +-
 .../property_bindings/temporary_variables.ts  |  15 +-
 .../element_attributes/GOLDEN_PARTIAL.js      | 229 +++++++++++++-----
 .../element_attributes/bound_attributes.ts    |   4 +-
 .../element_attributes/interpolation_basic.ts |  20 +-
 .../interpolation_complex_expressions.ts      |   3 +-
 .../interpolation_custom_config.ts            |  12 +-
 .../interpolation_nested_context.ts           |  12 +-
 .../ng-template_interpolation.ts              |   3 +-
 .../ng-template_interpolation_structural.ts   |  12 +-
 .../ng-template_structural.ts                 |   3 +-
 .../icu_logic/GOLDEN_PARTIAL.js               |  88 +++++++
 .../icu_logic/bare_icu.ts                     |   3 +-
 .../icu_logic/custom_interpolation.ts         |   4 +-
 .../icu_logic/different_contexts.ts           |   3 +-
 .../icu_logic/escape_quotes.ts                |   3 +-
 .../icu_logic/expressions.ts                  |   6 +-
 .../icu_logic/html_content.ts                 |   3 +-
 .../icu_logic/icu_only.ts                     |   3 +-
 .../icu_logic/icu_with_interpolations.ts      |   5 +-
 .../icu_logic/keyword_spaces.ts               |   3 +-
 .../icu_logic/metadata.ts                     |   3 +-
 .../icu_logic/multiple_icus.ts                |   4 +-
 .../icu_logic/named_interpolations.ts         |   6 +-
 .../icu_logic/nested_icu_in_other_block.ts    |   4 +-
 .../icu_logic/nested_icus.ts                  |   4 +-
 .../icu_logic/shared_placeholder.ts           |   3 +-
 .../icu_logic/single_icu.ts                   |   3 +-
 .../GOLDEN_PARTIAL.js                         |   8 +
 .../external_template_legacy.ts               |   3 +-
 .../external_template_legacy_normalized.ts    |   3 +-
 .../external_template_non_legacy.ts           |   3 +-
 .../inline_template_legacy.ts                 |   3 +-
 .../inline_template_non_legacy.ts             |   3 +-
 .../nested_nodes/GOLDEN_PARTIAL.js            | 138 +++++++++--
 .../nested_nodes/backtick_quotes.ts           |   3 +-
 .../nested_nodes/bindings_in_content.ts       |  16 +-
 .../nested_nodes/event_listeners.ts           |   3 +-
 .../interpolation_complex_expressions.ts      |  12 +-
 .../interpolation_custom_config.ts            |   3 +-
 .../nested_nodes/named_interpolations.ts      |   4 +-
 .../nested_nodes/nested_elements.ts           |  14 +-
 .../nested_elements_with_i18n_attributes.ts   |  16 +-
 .../GOLDEN_PARTIAL.js                         |  66 ++++-
 .../ng-container_ng-template/bare_icus.ts     |   3 +-
 .../child_elements.ts                         |  13 +-
 .../ng-container_ng-template/icus.ts          |   3 +-
 .../single_ng-container.ts                    |  12 +-
 .../GOLDEN_PARTIAL.js                         |   4 +
 .../icu_only.ts                               |   3 +-
 .../GOLDEN_PARTIAL.js                         |  96 ++++++--
 .../component_listener.ts                     |   2 +-
 .../cross_element_chained_listeners.ts        |  17 +-
 .../element_listener.ts                       |   2 +-
 .../element_listener_template.js              |   2 +-
 .../event_in_property_binding.ts              |  11 +-
 .../local_ref_before_listener.ts              |   1 +
 .../same_element_chained_listeners.ts         |   2 +
 .../host_bindings/GOLDEN_PARTIAL.js           |   8 +-
 .../host_bindings/important.ts                |   4 +-
 .../host_bindings/important_host.js           |   2 -
 .../mixed_style_and_class/GOLDEN_PARTIAL.js   |  62 ++++-
 .../mixed_style_and_class/pipe_bindings.ts    |  14 +-
 .../pipe_bindings_slots.ts                    |   9 +-
 .../GOLDEN_PARTIAL.js                         |   1 +
 .../nested_ternary_operation.ts               |   1 +
 .../compliance/test_helpers/compile_test.ts   |   1 -
 packages/compiler-cli/test/ngtsc/env.ts       |   1 -
 .../test/ngtsc/incremental_error_spec.ts      |   4 +-
 .../compiler-cli/test/ngtsc/ngtsc_spec.ts     | 128 ++++++----
 .../test/ngtsc/template_mapping_spec.ts       |  35 ++-
 .../test/ngtsc/template_typecheck_spec.ts     |   4 +-
 106 files changed, 1530 insertions(+), 372 deletions(-)

diff --git a/packages/compiler-cli/src/ngtsc/core/api/src/options.ts b/packages/compiler-cli/src/ngtsc/core/api/src/options.ts
index 2b168db540..fc86d664f1 100644
--- a/packages/compiler-cli/src/ngtsc/core/api/src/options.ts
+++ b/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.
    *
diff --git a/packages/compiler-cli/src/ngtsc/core/src/compiler.ts b/packages/compiler-cli/src/ngtsc/core/src/compiler.ts
index a566ed8ae6..04f48a5da1 100644
--- a/packages/compiler-cli/src/ngtsc/core/src/compiler.ts
+++ b/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.
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/GOLDEN_PARTIAL.js
index 216d0b47d3..db38c5464e 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/GOLDEN_PARTIAL.js
+++ b/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
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.js
index c44abb2296..63acebbf5b 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.js
+++ b/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
 });
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.ts
index 7c04db2343..e648d218bd 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.ts
+++ b/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 {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.js
index b157ac1009..001745418a 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.js
+++ b/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
 });
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.ts
index 08fd0e826b..f9d4b14aa5 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.ts
+++ b/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 {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/GOLDEN_PARTIAL.js
index 786f6e277a..88c652942e 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/GOLDEN_PARTIAL.js
+++ b/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] }]
-    }], 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>' }]
+        args: [{ declarations: [SimpleComponent, ComplexComponent, MyApp] }]
     }], 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] }]
-    }], 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>' }]
+        args: [{ declarations: [MyApp, SimpleComponent] }]
     }], 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] }]
-    }], 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>' }]
+        args: [{ declarations: [SimpleComponent, MyApp] }]
     }], 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
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.js
index 4b4b5caf8e..e1c2b39730 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.js
+++ b/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
 })
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.ts
index 6de1a85eef..50d4ddaae4 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.ts
+++ b/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 {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.js
index ca46011524..4317ac286c 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.js
+++ b/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
 })
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.ts
index 10616df958..9bf0bbb0db 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.ts
+++ b/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 {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template.ts
index 82f8dd28cd..f06c9b3ce0 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template.ts
+++ b/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 {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/GOLDEN_PARTIAL.js
index 74023cb903..56ec109efd 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/GOLDEN_PARTIAL.js
+++ b/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>;
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.ts
index 607de19903..d189c6ad54 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.ts
+++ b/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]})
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/GOLDEN_PARTIAL.js
index be8a485802..7f13f3ee35 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/GOLDEN_PARTIAL.js
+++ b/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>;
 }
 
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector.ts
index 74aafb0d52..6647d6ef93 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector.ts
+++ b/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 {
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_def.js
index ddd2dbc6ea..7a07c2ffd8 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_def.js
+++ b/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
 });
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/elements/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/elements/GOLDEN_PARTIAL.js
index cf8fe9d6a4..4c9eafc9a3 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/elements/GOLDEN_PARTIAL.js
+++ b/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>;
 }
 
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/elements/mathml.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/elements/mathml.ts
index 57c7da1aed..289ff32ec6 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/elements/mathml.ts
+++ b/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 {
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/elements/property_pure_functions.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/elements/property_pure_functions.ts
index 674a467ef3..8ddbdca0de 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/elements/property_pure_functions.ts
+++ b/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 {
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/GOLDEN_PARTIAL.js
index 773861c685..a8acc8b3f3 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/GOLDEN_PARTIAL.js
+++ b/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>;
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/static_animation_attribute.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/static_animation_attribute.ts
index 1eb3aa12bc..8e2881f95c 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/static_animation_attribute.ts
+++ b/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]})
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/GOLDEN_PARTIAL.js
index f361558ad9..0102bddbda 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/GOLDEN_PARTIAL.js
+++ b/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>;
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/chain_multiple_bindings_for_multiple_elements.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/chain_multiple_bindings_for_multiple_elements.ts
index 0b5873405c..00ef87e02a 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/chain_multiple_bindings_for_multiple_elements.ts
+++ b/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 {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/exclude_bindings_from_consts.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/exclude_bindings_from_consts.ts
index 46b31f12bf..9d9d68d4ce 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/exclude_bindings_from_consts.ts
+++ b/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]})
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/interpolated_attributes.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/interpolated_attributes.ts
index cc32ff7225..7939adebeb 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/attribute_bindings/interpolated_attributes.ts
+++ b/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]})
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/GOLDEN_PARTIAL.js
index ac99ed662e..a073eeb04b 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/GOLDEN_PARTIAL.js
+++ b/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>;
+}
 
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_bindings_with_interpolations.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_bindings_with_interpolations.ts
index 6b54c973e5..c2b4069ff4 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_bindings_with_interpolations.ts
+++ b/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 {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_for_multiple_elements.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_for_multiple_elements.ts
index 6fa16b4a24..6b3900610c 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_for_multiple_elements.ts
+++ b/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 {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_mixed.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_mixed.ts
index 51008fe513..470097eeab 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_mixed.ts
+++ b/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 {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_with_child_elements.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_with_child_elements.ts
index 8a8a9c366d..caa0bba859 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_with_child_elements.ts
+++ b/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 {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_synthetic_bindings.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_synthetic_bindings.ts
index 5d4c37e20d..51e58927d0 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/chain_synthetic_bindings.ts
+++ b/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 = '';
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/interpolated_properties.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/interpolated_properties.ts
index c1e5a2de51..958af1a7b0 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/interpolated_properties.ts
+++ b/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]})
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/temporary_variables.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/temporary_variables.js
index fb38c1af01..eccf250d9e 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/temporary_variables.js
+++ b/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);
   }
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/temporary_variables.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/temporary_variables.ts
index fd7bb37b92..dd22ac48fa 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/temporary_variables.ts
+++ b/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 {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/GOLDEN_PARTIAL.js
index 62009e376c..f7a1eef67d 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/GOLDEN_PARTIAL.js
+++ b/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>;
-    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 {
+    valueA: any;
     static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/bound_attributes.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/bound_attributes.ts
index b0e1b2b7d9..e6a92afbbd 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/bound_attributes.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/bound_attributes.ts
@@ -10,8 +10,10 @@ import {Component, NgModule} from '@angular/core';
   `
 })
 export class MyComponent {
+  title = '';
+  label = '';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_basic.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_basic.ts
index 799f34b30a..85e93b5c87 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_basic.ts
+++ b/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 {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_complex_expressions.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_complex_expressions.ts
index 7a87fab3a8..1fb6aaf5ef 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_complex_expressions.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_complex_expressions.ts
@@ -7,8 +7,9 @@ import {Component, NgModule} from '@angular/core';
   `
 })
 export class MyComponent {
+  valueA!: any;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_custom_config.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_custom_config.ts
index 7e94667410..1a7f852efb 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_custom_config.ts
+++ b/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 {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_nested_context.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_nested_context.ts
index 5614807fe7..21f34052cd 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/interpolation_nested_context.ts
+++ b/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 {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_interpolation.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_interpolation.ts
index 0a136319d0..650a8b330c 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_interpolation.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_interpolation.ts
@@ -7,8 +7,9 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  name = '';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_interpolation_structural.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_interpolation_structural.ts
index d61223b76a..aae20cd029 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_interpolation_structural.ts
+++ b/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 {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_structural.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_structural.ts
index 9c2a5b92a4..dd36c8cd83 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_structural.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/element_attributes/ng-template_structural.ts
@@ -7,8 +7,9 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  visible = false;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/GOLDEN_PARTIAL.js
index 6b9a671dae..d2078d1b0e 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/GOLDEN_PARTIAL.js
+++ b/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>;
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/bare_icu.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/bare_icu.ts
index 10ed95ab1b..484995c49d 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/bare_icu.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/bare_icu.ts
@@ -13,8 +13,9 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'female';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/custom_interpolation.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/custom_interpolation.ts
index 9c01465bf6..f4f7fbe9af 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/custom_interpolation.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/custom_interpolation.ts
@@ -8,8 +8,10 @@ import {Component, NgModule} from '@angular/core';
   interpolation: ['{%', '%}'],
 })
 export class MyComponent {
+  age = 1;
+  other = 'bla';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/different_contexts.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/different_contexts.ts
index 1f82608e06..7272417cd6 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/different_contexts.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/different_contexts.ts
@@ -12,8 +12,9 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'female';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/escape_quotes.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/escape_quotes.ts
index 65817503b2..512a895a44 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/escape_quotes.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/escape_quotes.ts
@@ -7,8 +7,9 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'male';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/expressions.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/expressions.ts
index ded54469e7..3910c06fbf 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/expressions.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/expressions.ts
@@ -7,8 +7,12 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'female';
+  ageA = 1;
+  ageB = 2;
+  ageC = 3;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/html_content.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/html_content.ts
index 2739dfb294..c11acbcec1 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/html_content.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/html_content.ts
@@ -11,8 +11,9 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'female';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/icu_only.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/icu_only.ts
index f243e3d692..49e6e8b097 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/icu_only.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/icu_only.ts
@@ -7,8 +7,9 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  age = 20;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/icu_with_interpolations.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/icu_with_interpolations.ts
index 07a10973bb..6ed46a9f08 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/icu_with_interpolations.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/icu_with_interpolations.ts
@@ -12,8 +12,11 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'male';
+  weight = 1;
+  height = 1;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/keyword_spaces.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/keyword_spaces.ts
index e7c711f477..2f7480bd35 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/keyword_spaces.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/keyword_spaces.ts
@@ -10,8 +10,9 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  count = 0;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/metadata.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/metadata.ts
index 5380a92f97..a3817ea362 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/metadata.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/metadata.ts
@@ -7,8 +7,9 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  count = 1;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/multiple_icus.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/multiple_icus.ts
index bfe6a15822..c07686aa56 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/multiple_icus.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/multiple_icus.ts
@@ -10,8 +10,10 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  gender = 'male';
+  age = 1;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/named_interpolations.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/named_interpolations.ts
index aa311c3354..ecacfe3220 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/named_interpolations.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/named_interpolations.ts
@@ -13,8 +13,12 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'male';
+  weight = 1;
+  height = 1;
+  age = 1;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/nested_icu_in_other_block.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/nested_icu_in_other_block.ts
index bbcdde3755..ef65ff7792 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/nested_icu_in_other_block.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/nested_icu_in_other_block.ts
@@ -14,8 +14,10 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  count = 0;
+  name = 'Andrew';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/nested_icus.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/nested_icus.ts
index 0b267229ff..1737f28090 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/nested_icus.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/nested_icus.ts
@@ -13,8 +13,10 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  age = 1;
+  gender = 'male';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/shared_placeholder.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/shared_placeholder.ts
index 83649faea6..a4a25f92cf 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/shared_placeholder.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/shared_placeholder.ts
@@ -15,8 +15,9 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'male';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/single_icu.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/single_icu.ts
index 55f82b75c3..3263fd2350 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/single_icu.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/icu_logic/single_icu.ts
@@ -7,8 +7,9 @@ import {Component, NgModule} from '@angular/core';
 `
 })
 export class MyComponent {
+  gender = 'male';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/GOLDEN_PARTIAL.js
index 39b05a9da2..edf9cd46b6 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/GOLDEN_PARTIAL.js
+++ b/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>;
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_legacy.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_legacy.ts
index 7e3a6f14d1..26ea41f171 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_legacy.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_legacy.ts
@@ -7,8 +7,9 @@ import {Component, NgModule} from '@angular/core';
   templateUrl: 'template.html'
 })
 export class MyComponent {
+  value!: any;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_legacy_normalized.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_legacy_normalized.ts
index 7e3a6f14d1..26ea41f171 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_legacy_normalized.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_legacy_normalized.ts
@@ -7,8 +7,9 @@ import {Component, NgModule} from '@angular/core';
   templateUrl: 'template.html'
 })
 export class MyComponent {
+  value!: any;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_non_legacy.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_non_legacy.ts
index 7e3a6f14d1..26ea41f171 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_non_legacy.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/external_template_non_legacy.ts
@@ -7,8 +7,9 @@ import {Component, NgModule} from '@angular/core';
   templateUrl: 'template.html'
 })
 export class MyComponent {
+  value!: any;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/inline_template_legacy.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/inline_template_legacy.ts
index 4cce3c69a6..e488573f5a 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/inline_template_legacy.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/inline_template_legacy.ts
@@ -17,8 +17,9 @@ Some Message\r\n
 }</div>`
 })
 export class MyComponent {
+  value!: any;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/inline_template_non_legacy.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/inline_template_non_legacy.ts
index 4cce3c69a6..e488573f5a 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/inline_template_non_legacy.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/line_ending_normalization/inline_template_non_legacy.ts
@@ -17,8 +17,9 @@ Some Message\r\n
 }</div>`
 })
 export class MyComponent {
+  value!: any;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/GOLDEN_PARTIAL.js
index a12ac75a2e..e8ea000656 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/GOLDEN_PARTIAL.js
+++ b/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>;
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/backtick_quotes.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/backtick_quotes.ts
index 6337d35ab5..3fc6e6d180 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/backtick_quotes.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/backtick_quotes.ts
@@ -5,8 +5,9 @@ import {Component, NgModule} from '@angular/core';
   template: '<div i18n>`{{ count }}`</div>',
 })
 export class MyComponent {
+  count = 1;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/bindings_in_content.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/bindings_in_content.ts
index 4a4ea77d5d..bc7a051a1f 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/bindings_in_content.ts
+++ b/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 {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/event_listeners.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/event_listeners.ts
index 987a192757..6c90d941f4 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/event_listeners.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/event_listeners.ts
@@ -7,8 +7,9 @@ import {Component, NgModule} from '@angular/core';
   `
 })
 export class MyComponent {
+  onClick() {}
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/interpolation_complex_expressions.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/interpolation_complex_expressions.ts
index 394b39565b..dff55cca7b 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/interpolation_complex_expressions.ts
+++ b/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 {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/interpolation_custom_config.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/interpolation_custom_config.ts
index efbd1e39ed..f224406bb3 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/interpolation_custom_config.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/interpolation_custom_config.ts
@@ -8,8 +8,9 @@ import {Component, NgModule} from '@angular/core';
   interpolation: ['{%', '%}'],
 })
 export class MyComponent {
+  valueA = '';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/named_interpolations.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/named_interpolations.ts
index 5ddfce4ae9..8568305b39 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/named_interpolations.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/named_interpolations.ts
@@ -10,8 +10,10 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  valueA = '';
+  valueB = '';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/nested_elements.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/nested_elements.ts
index 9a3d88576a..e8ceca53ed 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/nested_elements.ts
+++ b/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 {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/nested_elements_with_i18n_attributes.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/nested_elements_with_i18n_attributes.ts
index ba16f92f74..dba8e5c2e6 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/nested_nodes/nested_elements_with_i18n_attributes.ts
+++ b/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 {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/GOLDEN_PARTIAL.js
index b93dfa7968..7e372a2f9d 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/GOLDEN_PARTIAL.js
+++ b/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>;
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/bare_icus.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/bare_icus.ts
index 5ede4fd032..87fdb79f26 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/bare_icus.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/bare_icus.ts
@@ -8,8 +8,9 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  age = 0;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/child_elements.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/child_elements.ts
index 363f9ab63b..551f9cad62 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/child_elements.ts
+++ b/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 {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/icus.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/icus.ts
index 3eb4e1de4e..5d59b79ef6 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/icus.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/icus.ts
@@ -8,8 +8,9 @@ import {Component, NgModule} from '@angular/core';
 `,
 })
 export class MyComponent {
+  gender = 'female';
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/single_ng-container.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/single_ng-container.ts
index 21575e742d..08c1d64bff 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/ng-container_ng-template/single_ng-container.ts
+++ b/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 {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/self-closing_i18n_instructions/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/self-closing_i18n_instructions/GOLDEN_PARTIAL.js
index 1c4fe48f24..7f5095090f 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/self-closing_i18n_instructions/GOLDEN_PARTIAL.js
+++ b/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>;
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/self-closing_i18n_instructions/icu_only.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/self-closing_i18n_instructions/icu_only.ts
index d536823bcf..d5e95f2dbe 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/self-closing_i18n_instructions/icu_only.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_i18n/self-closing_i18n_instructions/icu_only.ts
@@ -7,8 +7,9 @@ import {Component, NgModule} from '@angular/core';
   `,
 })
 export class MyComponent {
+  age = 1;
 }
 
 @NgModule({declarations: [MyComponent]})
 export class MyModule {
-}
\ No newline at end of file
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/GOLDEN_PARTIAL.js
index 44db7a2781..684be802ac 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/GOLDEN_PARTIAL.js
+++ b/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
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener.ts
index a52959bdaf..1c0efc2422 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener.ts
+++ b/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 {
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners.ts
index e08d4e463d..5f0ec78091 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners.ts
+++ b/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 {
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener.ts
index c08dae8677..8dcd7379b2 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener.ts
+++ b/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) {}
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener_template.js
index f9ca44ea8d..c460a2d866 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener_template.js
+++ b/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();
   }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding.ts
index cce008a159..b54bdf22de 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding.ts
+++ b/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 {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener.ts
index 145de618a1..310f910c91 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener.ts
+++ b/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]})
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners.ts
index 26670776db..545d1905f3 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners.ts
+++ b/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]})
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/GOLDEN_PARTIAL.js
index 081e7fe25b..744e86c7eb 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/GOLDEN_PARTIAL.js
+++ b/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"
-         [class!important]="myClassExp"
-         [style.height!important]="myHeightExp"
+    <div [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"
-         [class!important]="myClassExp"
-         [style.height!important]="myHeightExp"
+    <div [style.height!important]="myHeightExp"
          [class.bar!important]="myBarClassExp"></div>
   `,
                 host: { '[style!important]': 'myStyleExp', '[class!important]': 'myClassExp' }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/important.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/important.ts
index 15ddd97110..09884eed71 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/important.ts
+++ b/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"
-         [class!important]="myClassExp"
-         [style.height!important]="myHeightExp"
+    <div [style.height!important]="myHeightExp"
          [class.bar!important]="myBarClassExp"></div>
   `,
   host: {'[style!important]': 'myStyleExp', '[class!important]': 'myClassExp'}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/important_host.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/important_host.js
index b5c96ca28d..f1867736ce 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/important_host.js
+++ b/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);
   }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/mixed_style_and_class/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/mixed_style_and_class/GOLDEN_PARTIAL.js
index 914bdbe513..7c96d7c9e7 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/mixed_style_and_class/GOLDEN_PARTIAL.js
+++ b/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>;
 }
 
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/mixed_style_and_class/pipe_bindings.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/mixed_style_and_class/pipe_bindings.ts
index 4694ab0481..da6554bcab 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/mixed_style_and_class/pipe_bindings.ts
+++ b/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 {
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/mixed_style_and_class/pipe_bindings_slots.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/mixed_style_and_class/pipe_bindings_slots.ts
index fffe666492..c594fb8594 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/mixed_style_and_class/pipe_bindings_slots.ts
+++ b/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 {
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_template/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_template/GOLDEN_PARTIAL.js
index fa52bbb8af..ac642d3f3c 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_template/GOLDEN_PARTIAL.js
+++ b/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>;
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_template/nested_ternary_operation.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_template/nested_ternary_operation.ts
index f166397e08..889acf0618 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_template/nested_ternary_operation.ts
+++ b/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]})
diff --git a/packages/compiler-cli/test/compliance/test_helpers/compile_test.ts b/packages/compiler-cli/test/compliance/test_helpers/compile_test.ts
index e8a04a4156..41019853da 100644
--- a/packages/compiler-cli/test/compliance/test_helpers/compile_test.ts
+++ b/packages/compiler-cli/test/compliance/test_helpers/compile_test.ts
@@ -118,7 +118,6 @@ function getOptions(
     typeRoots: ['node_modules/@types'],
     ...convertedCompilerOptions.options,
     enableIvy: true,
-    ivyTemplateTypeCheck: false,
     enableI18nLegacyMessageIdFormat: false,
     ...angularCompilerOptions,
   };
diff --git a/packages/compiler-cli/test/ngtsc/env.ts b/packages/compiler-cli/test/ngtsc/env.ts
index 0c910065af..63df6d5444 100644
--- a/packages/compiler-cli/test/ngtsc/env.ts
+++ b/packages/compiler-cli/test/ngtsc/env.ts
@@ -72,7 +72,6 @@ export class NgtscTestEnvironment {
       },
       "angularCompilerOptions": {
         "enableIvy": true,
-        "ivyTemplateTypeCheck": false
       },
       "exclude": [
         "built"
diff --git a/packages/compiler-cli/test/ngtsc/incremental_error_spec.ts b/packages/compiler-cli/test/ngtsc/incremental_error_spec.ts
index 8e99294340..6b35e83eae 100644
--- a/packages/compiler-cli/test/ngtsc/incremental_error_spec.ts
+++ b/packages/compiler-cli/test/ngtsc/incremental_error_spec.ts
@@ -439,11 +439,11 @@ runInEachFileSystem(() => {
         env.driveMain();
         env.flushWrittenFileTracking();
 
-        // Update ACmp to have a different selector, isn't matched in BCmp's template.
+        // Update ACmp
         env.write('a.ts', `
           import {Component} from '@angular/core';
 
-          @Component({selector: 'not-a-cmp', template: '...'})
+          @Component({selector: 'a-cmp', template: 'new template'})
           export class ACmp {}
        `);
 
diff --git a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
index 46bae12cc3..5bef51d006 100644
--- a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
+++ b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
@@ -418,7 +418,6 @@ runInEachFileSystem(os => {
           env.tsconfig({
             'fullTemplateTypeCheck': false,
             'annotateForClosureCompiler': true,
-            'ivyTemplateTypeCheck': true,
           });
           env.write('test.ts', `
             import {Component, Directive, NgModule} from '@angular/core';
@@ -689,7 +688,9 @@ runInEachFileSystem(os => {
           selector: 'app',
           template: '{{ count | number }}'
         })
-        export class App {}
+        export class App {
+          count = 0;
+        }
 
         @NgModule({
           imports: [ModuleA],
@@ -738,7 +739,9 @@ runInEachFileSystem(os => {
               selector: 'app',
               template: '{{ count | number }}'
             })
-            export class App {}
+            export class App {
+              count = 0;
+            }
 
             @NgModule({
               imports: [ModuleA, ModuleB],
@@ -1335,6 +1338,15 @@ runInEachFileSystem(os => {
     });
 
     it('should compile NgModules with references to absolute components', () => {
+      env.write('tsconfig.json', JSON.stringify({
+        extends: './tsconfig-base.json',
+        compilerOptions: {
+          baseUrl: '.',
+          paths: {
+            '*': ['*', 'shared/*'],
+          },
+        },
+      }));
       env.write('test.ts', `
       import {NgModule} from '@angular/core';
       import {Foo} from 'foo';
@@ -1344,7 +1356,7 @@ runInEachFileSystem(os => {
       })
       export class FooModule {}
     `);
-      env.write('node_modules/foo/index.ts', `
+      env.write('shared/foo/index.ts', `
       import {Component} from '@angular/core';
 
       @Component({
@@ -1541,7 +1553,9 @@ runInEachFileSystem(os => {
         export class TestPipe {}
 
         @Component({selector: 'test-cmp', template: '{{value | test}}'})
-        export class TestCmp {}
+        export class TestCmp {
+          value = '';
+        }
 
         @NgModule({declarations: [TestPipe, TestCmp]})
         export class TestModule {}
@@ -2276,10 +2290,10 @@ runInEachFileSystem(os => {
         });
 
         it('should report an error when using a missing type as injection token', () => {
-          // This test replicates the situation where a symbol does not have any declarations at
-          // all, e.g. because it's imported from a missing module. This would result in a
-          // semantic TypeScript diagnostic which we ignore in this test to verify that ngtsc's
-          // analysis is able to operate in this situation.
+          // This test replicates the situation where a symbol does not have any
+          // declarations at all, e.g. because it's imported from a missing module. This
+          // would result in a semantic TypeScript diagnostic which we ignore in this
+          // test to verify that ngtsc's analysis is able to operate in this situation.
           env.tsconfig({strictInjectionParameters: true});
           env.write(`test.ts`, `
              import {Injectable} from '@angular/core';
@@ -3563,7 +3577,9 @@ runInEachFileSystem(os => {
        selector: 'test',
        template: '<div i18n="@@custom">Some text {age, plural, 10 {ten} other {other}}</div>'
      })
-     class FooCmp {}`);
+     class FooCmp {
+       age = 1;
+     }`);
       env.driveMain();
       const jsContents = env.getContents('test.js');
       expect(jsContents)
@@ -3666,7 +3682,7 @@ runInEachFileSystem(os => {
       import {Component} from '@angular/core';
        @Component({
         selector: 'test',
-        template: '<div [someProp]></div>'
+        template: '<div [class]></div>'
       })
       class FooCmp {}
     `);
@@ -3783,8 +3799,8 @@ runInEachFileSystem(os => {
       });
 
       it('should not be generated for .js files', () => {
-        // This test verifies that the compiler does not attempt to generate shim files for non-TS
-        // input files (in this case, other.js).
+        // This test verifies that the compiler does not attempt to generate shim files
+        // for non-TS input files (in this case, other.js).
         env.write('test.ts', `
           import {Component, NgModule} from '@angular/core';
 
@@ -3810,10 +3826,10 @@ runInEachFileSystem(os => {
       });
 
       it('should be able to depend on an existing factory shim', () => {
-        // This test verifies that ngfactory files from the compilations of dependencies are
-        // available to import in a fresh compilation. It is derived from a bug observed in g3 where
-        // the shim system accidentally caused TypeScript to think that *.ngfactory.ts files always
-        // exist.
+        // This test verifies that ngfactory files from the compilations of dependencies
+        // are available to import in a fresh compilation. It is derived from a bug
+        // observed in g3 where the shim system accidentally caused TypeScript to think
+        // that *.ngfactory.ts files always exist.
         env.write('other.ngfactory.d.ts', `
           export class OtherNgFactory {}
         `);
@@ -3826,8 +3842,9 @@ runInEachFileSystem(os => {
       });
 
       it('should generate factory shims for files not listed in root files', () => {
-        // This test verifies that shims are generated for all files in the user's program, even if
-        // only a subset of those files are listed in the tsconfig as root files.
+        // This test verifies that shims are generated for all files in the user's
+        // program, even if only a subset of those files are listed in the tsconfig as
+        // root files.
 
         env.tsconfig({'generateNgFactoryShims': true}, /* extraRootDirs */ undefined, [
           absoluteFrom('/test.ts'),
@@ -4736,8 +4753,7 @@ runInEachFileSystem(os => {
     });
 
     describe('local refs', () => {
-      it('should not generate an error when a local ref is unresolved' +
-             ' (outside of template type-checking)',
+      it('should not generate an error when a local ref is unresolved (outside of template type-checking)',
          () => {
            env.write('test.ts', `
           import {Component} from '@angular/core';
@@ -4748,7 +4764,9 @@ runInEachFileSystem(os => {
           export class TestCmp {}
         `);
            const diags = env.driveDiagnostics();
-           expect(diags.length).toBe(0);
+           expect(diags.length).toBe(1);
+           expect(diags[0].messageText)
+               .toEqual(`No directive found with exportAs 'unknownTarget'.`);
          });
     });
 
@@ -5770,7 +5788,7 @@ runInEachFileSystem(os => {
       it('should generate sanitizers for unsafe attributes in hostBindings fn in Directives',
          () => {
            env.write(`test.ts`, `
-        import {Component, Directive, HostBinding} from '@angular/core';
+        import {Component, Directive, HostBinding, NgModule, Input} from '@angular/core';
 
         @Directive({
           selector: '[unsafeAttrs]'
@@ -5793,13 +5811,20 @@ runInEachFileSystem(os => {
 
           @HostBinding('attr.title')
           attrSafeTitle: string;
+
+          @Input() unsafeAttrs: any;
         }
 
         @Component({
           selector: 'foo',
           template: '<a [unsafeAttrs]="ctxProp">Link Title</a>'
         })
-        class FooCmp {}
+        class FooCmp {
+          ctxProp = '';
+        }
+
+        @NgModule({declarations: [FooCmp, UnsafeAttrsDirective]})
+        export class Module {}
       `);
 
            env.driveMain();
@@ -5818,7 +5843,7 @@ runInEachFileSystem(os => {
       it('should generate sanitizers for unsafe properties in hostBindings fn in Directives',
          () => {
            env.write(`test.ts`, `
-        import {Component, Directive, HostBinding} from '@angular/core';
+        import {Component, Directive, HostBinding, Input, NgModule} from '@angular/core';
 
         @Directive({
           selector: '[unsafeProps]'
@@ -5841,13 +5866,20 @@ runInEachFileSystem(os => {
 
           @HostBinding('title')
           propSafeTitle: string;
+
+          @Input() unsafeProps: any;
         }
 
         @Component({
           selector: 'foo',
           template: '<a [unsafeProps]="ctxProp">Link Title</a>'
         })
-        class FooCmp {}
+        class FooCmp {
+          ctxProp = '';
+        }
+
+        @NgModule({declarations: [FooCmp, UnsafePropsDirective]})
+        class MyModule {}
       `);
 
            env.driveMain();
@@ -7041,7 +7073,8 @@ export const Foo = Foo__PRE_R3__;
         env.driveMain();
         const jsContents = env.getContents('test.js');
 
-        // Verify that long styles present in both components are extracted to a separate var.
+        // Verify that long styles present in both components are extracted to a
+        // separate var.
         expect(jsContents)
             .toContain(
                 '_c0 = "div[_ngcontent-%COMP%] { background: url(/some-very-very-long-path.png); }";');
@@ -7049,27 +7082,29 @@ export const Foo = Foo__PRE_R3__;
         expect(jsContents)
             .toContain(
                 'styles: [' +
-                // This style is present in both components, but was not extracted into a separate
-                // var since it doesn't reach length threshold (50 chars) in `ConstantPool`.
+                // This style is present in both components, but was not extracted into
+                // a separate var since it doesn't reach length threshold (50 chars) in
+                // `ConstantPool`.
                 '"span[_ngcontent-%COMP%] { font-size: larger; }", ' +
-                // Style that is present in both components, but reaches length threshold -
-                // extracted to a separate var.
+                // Style that is present in both components, but reaches length
+                // threshold - extracted to a separate var.
                 '_c0, ' +
-                // Style that is unique to this component, but that reaches length threshold -
-                // remains a string in the `styles` array.
+                // Style that is unique to this component, but that reaches length
+                // threshold - remains a string in the `styles` array.
                 '"img[_ngcontent-%COMP%] { background: url(/a/some-very-very-long-path.png); }"]');
 
         expect(jsContents)
             .toContain(
                 'styles: [' +
-                // This style is present in both components, but was not extracted into a separate
-                // var since it doesn't reach length threshold (50 chars) in `ConstantPool`.
+                // This style is present in both components, but was not extracted into
+                // a separate var since it doesn't reach length threshold (50 chars) in
+                // `ConstantPool`.
                 '"span[_ngcontent-%COMP%] { font-size: larger; }", ' +
-                // Style that is present in both components, but reaches length threshold -
-                // extracted to a separate var.
+                // Style that is present in both components, but reaches length
+                // threshold - extracted to a separate var.
                 '_c0, ' +
-                // Style that is unique to this component, but that reaches length threshold -
-                // remains a string in the `styles` array.
+                // Style that is unique to this component, but that reaches length
+                // threshold - remains a string in the `styles` array.
                 '"img[_ngcontent-%COMP%] { background: url(/b/some-very-very-long-path.png); }"]');
       });
 
@@ -7105,9 +7140,9 @@ export const Foo = Foo__PRE_R3__;
         env.driveMain();
         const jsContents = env.getContents('test.js');
 
-        // Verify that long strings are extracted to a separate var. This should be wrapped in a
-        // function to trick Closure not to inline the contents for very large strings.
-        // See: https://github.com/angular/angular/pull/38253.
+        // Verify that long strings are extracted to a separate var. This should be
+        // wrapped in a function to trick Closure not to inline the contents for very
+        // large strings. See: https://github.com/angular/angular/pull/38253.
         expect(jsContents)
             .toContain(
                 '_c0 = function () {' +
@@ -7514,10 +7549,11 @@ export const Foo = Foo__PRE_R3__;
          });
 
       describe('template parsing diagnostics', () => {
-        // These tests validate that errors which occur during template parsing are expressed as
-        // diagnostics instead of a compiler crash (which used to be the case). They only assert
-        // that the error is produced with an accurate span - the exact semantics of the errors are
-        // tested separately, via the parser tests.
+        // These tests validate that errors which occur during template parsing are
+        // expressed as diagnostics instead of a compiler crash (which used to be the
+        // case). They only assert that the error is produced with an accurate span -
+        // the exact semantics of the errors are tested separately, via the parser
+        // tests.
         it('should emit a diagnostic for a template parsing error', () => {
           env.write('test.ts', `
             import {Component} from '@angular/core';
diff --git a/packages/compiler-cli/test/ngtsc/template_mapping_spec.ts b/packages/compiler-cli/test/ngtsc/template_mapping_spec.ts
index 6a08157e75..0fda1f1f78 100644
--- a/packages/compiler-cli/test/ngtsc/template_mapping_spec.ts
+++ b/packages/compiler-cli/test/ngtsc/template_mapping_spec.ts
@@ -430,9 +430,9 @@ runInEachFileSystem((os) => {
         it('should correctly handle collapsed whitespace in interpolation placeholder source-mappings',
            () => {
              const mappings = compileAndMap(
-                 `<div i18n title="  pre-title {{title_value}}  post-title" i18n-title>  pre-body {{body_value}}  post-body</div>`);
+                 `<div i18n title="  pre-title {{name}}  post-title" i18n-title>  pre-body {{greeting}}  post-body</div>`);
              expectMapping(mappings, {
-               source: '<div i18n title="  pre-title {{title_value}}  post-title" i18n-title>  ',
+               source: '<div i18n title="  pre-title {{name}}  post-title" i18n-title>  ',
                generated: 'i0.ɵɵelementStart(0, "div", 0)',
                sourceUrl: '../test.ts',
              });
@@ -447,7 +447,7 @@ runInEachFileSystem((os) => {
                sourceUrl: '../test.ts',
              });
              expectMapping(mappings, {
-               source: '{{body_value}}',
+               source: '{{greeting}}',
                generated: '"\\uFFFD0\\uFFFD"',
                sourceUrl: '../test.ts',
              });
@@ -693,13 +693,38 @@ runInEachFileSystem((os) => {
       const templateConfig = templateUrl ? `templateUrl: '${templateUrl}'` :
                                            ('template: `' + template.replace(/`/g, '\\`') + '`');
       env.write('test.ts', `
-        import {Component} from '@angular/core';
+        import {Component, Directive, Input, Output, EventEmitter, Pipe, NgModule} from '@angular/core';
+
+        @Directive({
+          selector: '[ngModel],[attr],[ngModelChange]'
+        })
+        export class AllDirective {
+          @Input() ngModel!: any;
+          @Output() ngModelChange = new EventEmitter<any>();
+          @Input() attr!: any;
+        }
+
+        @Pipe({name: 'percent'})
+        export class PercentPipe {
+          transform(v: any) {}
+        }
 
         @Component({
           selector: 'test-cmp',
           ${templateConfig}
         })
-        export class TestCmp {}
+        export class TestCmp {
+          name = '';
+          isInitial = false;
+          doSomething() {}
+          items: any[] = [];
+          greeting = '';
+        }
+
+        @NgModule({
+          declarations: [TestCmp, AllDirective, PercentPipe],
+        })
+        export class Module {}
     `);
       if (templateUrl) {
         env.write(templateUrl, template);
diff --git a/packages/compiler-cli/test/ngtsc/template_typecheck_spec.ts b/packages/compiler-cli/test/ngtsc/template_typecheck_spec.ts
index 2125d09409..f63a075015 100644
--- a/packages/compiler-cli/test/ngtsc/template_typecheck_spec.ts
+++ b/packages/compiler-cli/test/ngtsc/template_typecheck_spec.ts
@@ -1128,7 +1128,7 @@ export declare class AnimationEvent {
 
     it('should report an error with an unknown pipe even if `fullTemplateTypeCheck` is disabled',
        () => {
-         env.tsconfig({ivyTemplateTypeCheck: true, fullTemplateTypeCheck: false});
+         env.tsconfig({fullTemplateTypeCheck: false});
          env.write('test.ts', `
           import {Component, NgModule} from '@angular/core';
 
@@ -1896,7 +1896,7 @@ export declare class AnimationEvent {
 
     describe('legacy schema checking with the DOM schema', () => {
       beforeEach(() => {
-        env.tsconfig({ivyTemplateTypeCheck: true, fullTemplateTypeCheck: false});
+        env.tsconfig({fullTemplateTypeCheck: false});
       });
 
       it('should check for unknown elements', () => {