diff --git a/packages/compiler-cli/src/ngtsc/testing/fake_core/index.ts b/packages/compiler-cli/src/ngtsc/testing/fake_core/index.ts
index 3acc21ab07..3572b3b8b0 100644
--- a/packages/compiler-cli/src/ngtsc/testing/fake_core/index.ts
+++ b/packages/compiler-cli/src/ngtsc/testing/fake_core/index.ts
@@ -105,4 +105,8 @@ export class NgZone {}
 
 export interface PipeTransform {
   transform(value: any, ...args: any[]): any;
-}
\ No newline at end of file
+}
+
+export interface OnDestroy {
+  ngOnDestroy(): void;
+}
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
new file mode 100644
index 0000000000..90f85ad6bc
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/GOLDEN_PARTIAL.js
@@ -0,0 +1,424 @@
+/****************************************************************************************************
+ * PARTIAL FILE: forward_referenced_directive.js
+ ****************************************************************************************************/
+import { Component, Directive, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class HostBindingComp {
+}
+HostBindingComp.ɵfac = function HostBindingComp_Factory(t) { return new (t || HostBindingComp)(); };
+HostBindingComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: HostBindingComp, selector: "host-binding-comp", ngImport: i0, template: { source: `
+    <my-forward-directive></my-forward-directive>
+  `, isInline: true }, directives: [{ type: function () { return MyForwardDirective; }, selector: "my-forward-directive" }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(HostBindingComp, [{
+        type: Component,
+        args: [{
+                selector: 'host-binding-comp',
+                template: `
+    <my-forward-directive></my-forward-directive>
+  `
+            }]
+    }], null, null); })();
+class MyForwardDirective {
+}
+MyForwardDirective.ɵfac = function MyForwardDirective_Factory(t) { return new (t || MyForwardDirective)(); };
+MyForwardDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: MyForwardDirective, selector: "my-forward-directive", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyForwardDirective, [{
+        type: Directive,
+        args: [{ selector: 'my-forward-directive' }]
+    }], 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: [HostBindingComp, MyForwardDirective] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [HostBindingComp, MyForwardDirective] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: forward_referenced_directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class HostBindingComp {
+    static ɵfac: i0.ɵɵFactoryDef<HostBindingComp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<HostBindingComp, "host-binding-comp", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof HostBindingComp, typeof MyForwardDirective], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: forward_referenced_pipe.js
+ ****************************************************************************************************/
+import { Component, NgModule, Pipe } from '@angular/core';
+import * as i0 from "@angular/core";
+export class HostBindingComp {
+}
+HostBindingComp.ɵfac = function HostBindingComp_Factory(t) { return new (t || HostBindingComp)(); };
+HostBindingComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: HostBindingComp, selector: "host-binding-comp", ngImport: i0, template: { source: `
+    <div [attr.style]="{} | my_forward_pipe">...</div>
+  `, isInline: true }, pipes: { "my_forward_pipe": function () { return MyForwardPipe; } } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(HostBindingComp, [{
+        type: Component,
+        args: [{
+                selector: 'host-binding-comp',
+                template: `
+    <div [attr.style]="{} | my_forward_pipe">...</div>
+  `
+            }]
+    }], null, null); })();
+class MyForwardPipe {
+}
+MyForwardPipe.ɵfac = function MyForwardPipe_Factory(t) { return new (t || MyForwardPipe)(); };
+MyForwardPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "my_forward_pipe", type: MyForwardPipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyForwardPipe, [{
+        type: Pipe,
+        args: [{ name: 'my_forward_pipe' }]
+    }], 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: [HostBindingComp, MyForwardPipe] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [HostBindingComp, MyForwardPipe] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: forward_referenced_pipe.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class HostBindingComp {
+    static ɵfac: i0.ɵɵFactoryDef<HostBindingComp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<HostBindingComp, "host-binding-comp", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof HostBindingComp, typeof MyForwardPipe], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: export_as.js
+ ****************************************************************************************************/
+import { Directive, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SomeDirective {
+}
+SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
+SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[some-directive]", exportAs: ["someDir", "otherDir"], ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
+        type: Directive,
+        args: [{ selector: '[some-directive]', exportAs: 'someDir, otherDir' }]
+    }], 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: [SomeDirective] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [SomeDirective] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: export_as.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SomeDirective {
+    static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[some-directive]", ["someDir", "otherDir"], {}, {}, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof SomeDirective], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: no_selector.js
+ ****************************************************************************************************/
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+export class AbstractDirective {
+}
+AbstractDirective.ɵfac = function AbstractDirective_Factory(t) { return new (t || AbstractDirective)(); };
+AbstractDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: AbstractDirective, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AbstractDirective, [{
+        type: Directive
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: no_selector.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class AbstractDirective {
+    static ɵfac: i0.ɵɵFactoryDef<AbstractDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<AbstractDirective, never, never, {}, {}, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: constant_object_literals.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyApp {
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: '<some-comp [prop]="{}" [otherProp]="{a: 1, b: 2}"></some-comp>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{ template: '<some-comp [prop]="{}" [otherProp]="{a: 1, b: 2}"></some-comp>' }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: constant_object_literals.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyApp {
+    static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "ng-component", never, {}, {}, never, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: constant_array_literals.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyApp {
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: '<some-comp [prop]="[]" [otherProp]="[0, 1, 2]"></some-comp>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{ template: '<some-comp [prop]="[]" [otherProp]="[0, 1, 2]"></some-comp>' }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: constant_array_literals.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyApp {
+    static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "ng-component", never, {}, {}, never, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: object_literals_null_vs_empty.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyApp {
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: `
+    <div [dir]="{foo: null}"></div>
+    <div [dir]="{foo: {}}"></div>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{
+                template: `
+    <div [dir]="{foo: null}"></div>
+    <div [dir]="{foo: {}}"></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: [MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: object_literals_null_vs_empty.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyApp {
+    static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "ng-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: array_literals_null_vs_empty.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyApp {
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: `
+    <div [dir]="{foo: null}"></div>
+    <div [dir]="{foo: []}"></div>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{
+                template: `
+    <div [dir]="{foo: null}"></div>
+    <div [dir]="{foo: []}"></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: [MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: array_literals_null_vs_empty.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyApp {
+    static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "ng-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: object_literals_null_vs_function.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyApp {
+    getFoo() {
+        return 'foo!';
+    }
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: `
+    <div [dir]="{foo: null}"></div>
+    <div [dir]="{foo: getFoo()}"></div>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{
+                template: `
+    <div [dir]="{foo: null}"></div>
+    <div [dir]="{foo: getFoo()}"></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: [MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: object_literals_null_vs_function.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyApp {
+    getFoo(): string;
+    static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "ng-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: custom_decorator_es5.js
+ ****************************************************************************************************/
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, InjectionToken } from '@angular/core';
+import * as i0 from "@angular/core";
+var token = new InjectionToken('token');
+export function Custom() {
+    return function (target) { };
+}
+var Comp = /** @class */ (function () {
+    function Comp() {
+    }
+    Comp_1 = Comp;
+    var Comp_1;
+    Comp.ɵfac = function Comp_Factory(t) { return new (t || Comp)(); };
+    Comp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Comp, selector: "ng-component", providers: [{ provide: token, useExisting: Comp_1 }], ngImport: i0, template: { source: '', isInline: true } });
+    Comp = Comp_1 = __decorate([
+        Custom()
+    ], Comp);
+    return Comp;
+}());
+export { Comp };
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Comp, [{
+        type: Component,
+        args: [{
+                template: '',
+                providers: [{ provide: token, useExisting: Comp }],
+            }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: custom_decorator_es5.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare function Custom(): (target: any) => void;
+export declare class Comp {
+    static ɵfac: i0.ɵɵFactoryDef<Comp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<Comp, "ng-component", never, {}, {}, never, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_template_empty_binding.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: 1, type: MyComponent, selector: "my-app", ngImport: i0, template: { source: '<ng-template [id]=""></ng-template>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{ selector: 'my-app', template: '<ng-template [id]=""></ng-template>' }]
+    }], 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: ng_template_empty_binding.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-app", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/TEST_CASES.json
new file mode 100644
index 0000000000..05de96b415
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/TEST_CASES.json
@@ -0,0 +1,163 @@
+{
+  "$schema": "../../test_case_schema.json",
+  "cases": [
+    {
+      "description": "should instantiate directives in a closure when they are forward referenced",
+      "inputFiles": [
+        "forward_referenced_directive.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid component definition",
+          "files": [
+            "forward_referenced_directive.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should instantiate pipes in a closure when they are forward referenced",
+      "inputFiles": [
+        "forward_referenced_pipe.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid component definition",
+          "files": [
+            "forward_referenced_pipe.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should split multiple `exportAs` values into an array",
+      "inputFiles": [
+        "export_as.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect SomeDirective.ɵdir",
+          "files": [
+            "export_as.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should not generate a selectors array if the directive does not have a selector",
+      "inputFiles": [
+        "no_selector.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid directive definition",
+          "files": [
+            "no_selector.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should generate a pure function for constant object literals",
+      "inputFiles": [
+        "constant_object_literals.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid component definition",
+          "files": [
+            "constant_object_literals.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should generate a pure function for constant array literals",
+      "inputFiles": [
+        "constant_array_literals.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid component definition",
+          "files": [
+            "constant_array_literals.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should not share pure functions between null and object literals",
+      "inputFiles": [
+        "object_literals_null_vs_empty.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid component definition",
+          "files": [
+            "object_literals_null_vs_empty.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should not share pure functions between null and array literals",
+      "inputFiles": [
+        "array_literals_null_vs_empty.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid component definition",
+          "files": [
+            "array_literals_null_vs_empty.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should not share pure functions between null and function calls",
+      "inputFiles": [
+        "object_literals_null_vs_function.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid component definition",
+          "files": [
+            "object_literals_null_vs_function.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should emit a valid setClassMetadata call in ES5 if a class with a custom decorator is referencing itself inside its own metadata",
+      "inputFiles": [
+        "custom_decorator_es5.ts"
+      ],
+      "compilerOptions": {
+        "target": "ES5"
+      },
+      "excludeFromPartialTests": true,
+      "expectations": [
+        {
+          "failureMessage": "Incorrect setClassMetadata call",
+          "files": [
+            "custom_decorator_es5.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support empty property bindings on ng-template",
+      "inputFiles": [
+        "ng_template_empty_binding.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect template",
+          "files": [
+            "ng_template_empty_binding.js"
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.js
new file mode 100644
index 0000000000..b0c8b720e7
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.js
@@ -0,0 +1,23 @@
+const $c0$ = function () { return { foo: null }; };
+const $c1$ = function () { return []; };
+const $c2$ = function (a0) { return { foo: a0 }; };
+// ...
+MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [["ng-component"]],
+  decls: 2,
+  vars: 6,
+  consts: [[__AttributeMarker.Bindings__, "dir"]],
+  template:  function MyApp_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "div", 0);
+      $r3$.ɵɵelement(1, "div", 0);
+    }
+    if (rf & 2) {
+      $r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction0(2, $c0$));
+      $r3$.ɵɵadvance(1);
+      $r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction1(4, $c2$, $r3$.ɵɵpureFunction0(3, $c1$)));
+    }
+  },
+ encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.ts
new file mode 100644
index 0000000000..aceaa62571
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/array_literals_null_vs_empty.ts
@@ -0,0 +1,14 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  template: `
+    <div [dir]="{foo: null}"></div>
+    <div [dir]="{foo: []}"></div>
+  `
+})
+export class MyApp {
+}
+
+@NgModule({declarations: [MyApp]})
+export class MyModule {
+}
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
new file mode 100644
index 0000000000..c44abb2296
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.js
@@ -0,0 +1,19 @@
+const $c0$ = function () { return []; };
+const $c1$ = function () { return [0, 1, 2]; };
+// ...
+MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [["ng-component"]],
+  decls: 1,
+  vars: 4,
+  consts: [[__AttributeMarker.Bindings__, "prop", "otherProp"]],
+  template:  function MyApp_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "some-comp", 0);
+    }
+    if (rf & 2) {
+      $r3$.ɵɵproperty("prop", $r3$.ɵɵpureFunction0(2, $c0$))("otherProp", $r3$.ɵɵpureFunction0(3, $c1$));
+    }
+  },
+  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
new file mode 100644
index 0000000000..7c04db2343
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_array_literals.ts
@@ -0,0 +1,5 @@
+import {Component} from '@angular/core';
+
+@Component({template: '<some-comp [prop]="[]" [otherProp]="[0, 1, 2]"></some-comp>'})
+export class MyApp {
+}
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
new file mode 100644
index 0000000000..b157ac1009
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.js
@@ -0,0 +1,19 @@
+const $c0$ = function () { return {}; };
+const $c1$ = function () { return { a: 1, b: 2 }; };
+// ...
+MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [["ng-component"]],
+  decls: 1,
+  vars: 4,
+  consts: [[__AttributeMarker.Bindings__, "prop", "otherProp"]],
+  template:  function MyApp_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "some-comp", 0);
+    }
+    if (rf & 2) {
+      $r3$.ɵɵproperty("prop", $r3$.ɵɵpureFunction0(2, $c0$))("otherProp", $r3$.ɵɵpureFunction0(3, $c1$));
+    }
+  },
+  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
new file mode 100644
index 0000000000..08fd0e826b
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/constant_object_literals.ts
@@ -0,0 +1,5 @@
+import {Component} from '@angular/core';
+
+@Component({template: '<some-comp [prop]="{}" [otherProp]="{a: 1, b: 2}"></some-comp>'})
+export class MyApp {
+}
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
new file mode 100644
index 0000000000..9b60768fda
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/GOLDEN_PARTIAL.js
@@ -0,0 +1,355 @@
+/****************************************************************************************************
+ * PARTIAL FILE: root_template.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SimpleComponent {
+}
+SimpleComponent.ɵfac = function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); };
+SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleComponent, selector: "simple", ngImport: i0, template: { source: '<div><ng-content></ng-content></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleComponent, [{
+        type: Component,
+        args: [{ selector: 'simple', template: '<div><ng-content></ng-content></div>' }]
+    }], null, null); })();
+export class ComplexComponent {
+}
+ComplexComponent.ɵfac = function ComplexComponent_Factory(t) { return new (t || ComplexComponent)(); };
+ComplexComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ComplexComponent, selector: "complex", ngImport: i0, template: { source: `
+    <div id="first"><ng-content select="span[title=toFirst]"></ng-content></div>
+    <div id="second"><ng-content SELECT="span[title=toSecond]"></ng-content></div>`, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ComplexComponent, [{
+        type: Component,
+        args: [{
+                selector: 'complex',
+                template: `
+    <div id="first"><ng-content select="span[title=toFirst]"></ng-content></div>
+    <div id="second"><ng-content SELECT="span[title=toSecond]"></ng-content></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: [SimpleComponent, ComplexComponent] }); })();
+/*@__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: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<simple>content</simple> <complex></complex>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{ selector: 'my-app', template: '<simple>content</simple> <complex></complex>' }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: root_template.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SimpleComponent {
+    static ɵfac: i0.ɵɵFactoryDef<SimpleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<SimpleComponent, "simple", never, {}, {}, never, ["*"]>;
+}
+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>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: multiple_wildcards.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+class Cmp {
+}
+Cmp.ɵfac = function Cmp_Factory(t) { return new (t || Cmp)(); };
+Cmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Cmp, selector: "ng-component", ngImport: i0, template: { source: `
+    <ng-content></ng-content>
+    <ng-content select="[spacer]"></ng-content>
+    <ng-content></ng-content>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Cmp, [{
+        type: Component,
+        args: [{
+                template: `
+    <ng-content></ng-content>
+    <ng-content select="[spacer]"></ng-content>
+    <ng-content></ng-content>
+  `,
+            }]
+    }], null, null); })();
+class Module {
+}
+Module.ɵmod = i0.ɵɵdefineNgModule({ type: Module });
+Module.ɵinj = i0.ɵɵdefineInjector({ factory: function Module_Factory(t) { return new (t || Module)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(Module, { declarations: [Cmp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Module, [{
+        type: NgModule,
+        args: [{ declarations: [Cmp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: multiple_wildcards.d.ts
+ ****************************************************************************************************/
+export {};
+
+/****************************************************************************************************
+ * PARTIAL FILE: nested_template.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+class Cmp {
+}
+Cmp.ɵfac = function Cmp_Factory(t) { return new (t || Cmp)(); };
+Cmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Cmp, selector: "ng-component", ngImport: i0, template: { source: `
+    <div id="second" *ngIf="visible">
+      <ng-content SELECT="span[title=toFirst]"></ng-content>
+    </div>
+    <div id="third" *ngIf="visible">
+      No ng-content, no instructions generated.
+    </div>
+    <ng-template>
+      '*' selector: <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Cmp, [{
+        type: Component,
+        args: [{
+                template: `
+    <div id="second" *ngIf="visible">
+      <ng-content SELECT="span[title=toFirst]"></ng-content>
+    </div>
+    <div id="third" *ngIf="visible">
+      No ng-content, no instructions generated.
+    </div>
+    <ng-template>
+      '*' selector: <ng-content></ng-content>
+    </ng-template>
+  `,
+            }]
+    }], null, null); })();
+class Module {
+}
+Module.ɵmod = i0.ɵɵdefineNgModule({ type: Module });
+Module.ɵinj = i0.ɵɵdefineInjector({ factory: function Module_Factory(t) { return new (t || Module)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(Module, { declarations: [Cmp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Module, [{
+        type: NgModule,
+        args: [{ declarations: [Cmp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: nested_template.d.ts
+ ****************************************************************************************************/
+export {};
+
+/****************************************************************************************************
+ * PARTIAL FILE: root_and_nested.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+class Cmp {
+}
+Cmp.ɵfac = function Cmp_Factory(t) { return new (t || Cmp)(); };
+Cmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Cmp, selector: "ng-component", ngImport: i0, template: { source: `
+    <ng-content select="[id=toMainBefore]"></ng-content>
+    <ng-template>
+      <ng-content select="[id=toTemplate]"></ng-content>
+      <ng-template>
+        <ng-content select="[id=toNestedTemplate]"></ng-content>
+      </ng-template>
+    </ng-template>
+    <ng-template>
+      '*' selector in a template: <ng-content></ng-content>
+    </ng-template>
+    <ng-content select="[id=toMainAfter]"></ng-content>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Cmp, [{
+        type: Component,
+        args: [{
+                template: `
+    <ng-content select="[id=toMainBefore]"></ng-content>
+    <ng-template>
+      <ng-content select="[id=toTemplate]"></ng-content>
+      <ng-template>
+        <ng-content select="[id=toNestedTemplate]"></ng-content>
+      </ng-template>
+    </ng-template>
+    <ng-template>
+      '*' selector in a template: <ng-content></ng-content>
+    </ng-template>
+    <ng-content select="[id=toMainAfter]"></ng-content>
+  `,
+            }]
+    }], null, null); })();
+class Module {
+}
+Module.ɵmod = i0.ɵɵdefineNgModule({ type: Module });
+Module.ɵinj = i0.ɵɵdefineInjector({ factory: function Module_Factory(t) { return new (t || Module)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(Module, { declarations: [Cmp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Module, [{
+        type: NgModule,
+        args: [{ declarations: [Cmp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: root_and_nested.d.ts
+ ****************************************************************************************************/
+export {};
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_project_as_selector.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SimpleComponent {
+}
+SimpleComponent.ɵfac = function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); };
+SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleComponent, selector: "simple", ngImport: i0, template: { source: '<div><ng-content select="[title]"></ng-content></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleComponent, [{
+        type: Component,
+        args: [{ selector: 'simple', template: '<div><ng-content select="[title]"></ng-content></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: [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: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<simple><h1 ngProjectAs="[title]"></h1></simple>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{ selector: 'my-app', template: '<simple><h1 ngProjectAs="[title]"></h1></simple>' }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_project_as_selector.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+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>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_project_as_compound_selector.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SimpleComponent {
+}
+SimpleComponent.ɵfac = function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); };
+SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleComponent, selector: "simple", ngImport: i0, template: { source: '<div><ng-content select="[title]"></ng-content></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleComponent, [{
+        type: Component,
+        args: [{ selector: 'simple', template: '<div><ng-content select="[title]"></ng-content></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: [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: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<simple><h1 ngProjectAs="[title],[header]"></h1></simple>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{ selector: 'my-app', template: '<simple><h1 ngProjectAs="[title],[header]"></h1></simple>' }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_project_as_compound_selector.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+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>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_project_as_attribute.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyApp {
+    constructor() {
+        this.show = true;
+    }
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<div *ngIf="show" ngProjectAs=".someclass"></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{ selector: 'my-app', template: '<div *ngIf="show" ngProjectAs=".someclass"></div>' }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_project_as_attribute.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyApp {
+    show: boolean;
+    static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_content_with_structural_dir.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SimpleComponent {
+}
+SimpleComponent.ɵfac = function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); };
+SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleComponent, selector: "simple", ngImport: i0, template: { source: '<ng-content *ngIf="showContent"></ng-content>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleComponent, [{
+        type: Component,
+        args: [{ selector: 'simple', template: '<ng-content *ngIf="showContent"></ng-content>' }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_content_with_structural_dir.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SimpleComponent {
+    static ɵfac: i0.ɵɵFactoryDef<SimpleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<SimpleComponent, "simple", never, {}, {}, never, ["*"]>;
+}
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/TEST_CASES.json
new file mode 100644
index 0000000000..ee5792e4aa
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/TEST_CASES.json
@@ -0,0 +1,129 @@
+{
+  "$schema": "../../../test_case_schema.json",
+  "cases": [
+    {
+      "description": "should support content projection in root template",
+      "inputFiles": [
+        "root_template.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect SimpleComponent definition",
+          "files": [
+            {
+              "expected": "root_template_simple_def.js",
+              "generated": "root_template.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect ComplexComponent definition",
+          "files": [
+            {
+              "expected": "root_template_complex_def.js",
+              "generated": "root_template.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support multi-slot content projection with multiple wildcard slots",
+      "inputFiles": [
+        "multiple_wildcards.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid content projection instructions generated",
+          "files": [
+            "multiple_wildcards.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support content projection in nested templates",
+      "inputFiles": [
+        "nested_template.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid content projection instructions generated",
+          "files": [
+            "nested_template.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support content projection in both the root and nested templates",
+      "inputFiles": [
+        "root_and_nested.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid content projection instructions generated",
+          "files": [
+            "root_and_nested.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should parse the selector that is passed into ngProjectAs",
+      "inputFiles": [
+        "ng_project_as_selector.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect SimpleComponent definition",
+          "files": [
+            "ng_project_as_selector.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should take the first selector if multiple values are passed into ngProjectAs",
+      "inputFiles": [
+        "ng_project_as_compound_selector.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect SimpleComponent definition",
+          "files": [
+            "ng_project_as_compound_selector.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should include parsed ngProjectAs selectors into template attrs",
+      "inputFiles": [
+        "ng_project_as_attribute.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect MyApp definition",
+          "files": [
+            "ng_project_as_attribute.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should capture the node name of ng-content with a structural directive",
+      "inputFiles": [
+        "ng_content_with_structural_dir.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect SimpleComponent definition",
+          "files": [
+            "ng_content_with_structural_dir.js"
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.js
new file mode 100644
index 0000000000..5e07ed16c9
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.js
@@ -0,0 +1,19 @@
+const $c0$ = ["*", [["", "spacer", ""]], "*"];
+const $c1$ = ["*", "[spacer]", "*"];
+// ...
+Cmp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: Cmp,
+  selectors: [["ng-component"]],
+  ngContentSelectors: $c1$,
+  decls: 3,
+  vars: 0,
+  template: function Cmp_Template(rf, ctx) {
+    if (rf & 1) {
+      i0.ɵɵprojectionDef($c0$);
+      i0.ɵɵprojection(0);
+      i0.ɵɵprojection(1, 1);
+      i0.ɵɵprojection(2, 2);
+    }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.ts
new file mode 100644
index 0000000000..31db8dbd80
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/multiple_wildcards.ts
@@ -0,0 +1,15 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  template: `
+    <ng-content></ng-content>
+    <ng-content select="[spacer]"></ng-content>
+    <ng-content></ng-content>
+  `,
+})
+class Cmp {
+}
+
+@NgModule({declarations: [Cmp]})
+class Module {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.js
new file mode 100644
index 0000000000..3e016c319e
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.js
@@ -0,0 +1,34 @@
+function Cmp_div_0_Template(rf, ctx) { if (rf & 1) {
+  $r3$.ɵɵelementStart(0, "div", 2);
+  $r3$.ɵɵprojection(1);
+  $r3$.ɵɵelementEnd();
+} }
+function Cmp_div_1_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵelementStart(0, "div", 3);
+    $r3$.ɵɵtext(1, " No ng-content, no instructions generated. ");
+    $r3$.ɵɵelementEnd();
+  }
+}
+function Cmp_ng_template_2_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵtext(0, " '*' selector: ");
+    $r3$.ɵɵprojection(1, 1);
+  }
+}
+const $_c4$ = [[["span", "title", "tofirst"]], "*"];
+// ...
+consts: [["id", "second", __AttributeMarker.Template__, "ngIf"], ["id", "third", __AttributeMarker.Template__, "ngIf"], ["id", "second"], ["id", "third"]],
+template: function Cmp_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵprojectionDef($_c4$);
+    $r3$.ɵɵtemplate(0, Cmp_div_0_Template, 2, 0, "div", 0);
+    $r3$.ɵɵtemplate(1, Cmp_div_1_Template, 2, 0, "div", 1);
+    $r3$.ɵɵtemplate(2, Cmp_ng_template_2_Template, 2, 0, "ng-template");
+  }
+  if (rf & 2) {
+    $r3$.ɵɵproperty("ngIf", ctx.visible);
+    $r3$.ɵɵadvance(1);
+    $r3$.ɵɵproperty("ngIf", ctx.visible);
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.ts
new file mode 100644
index 0000000000..c6cbdf4259
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/nested_template.ts
@@ -0,0 +1,21 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  template: `
+    <div id="second" *ngIf="visible">
+      <ng-content SELECT="span[title=toFirst]"></ng-content>
+    </div>
+    <div id="third" *ngIf="visible">
+      No ng-content, no instructions generated.
+    </div>
+    <ng-template>
+      '*' selector: <ng-content></ng-content>
+    </ng-template>
+  `,
+})
+class Cmp {
+}
+
+@NgModule({declarations: [Cmp]})
+class Module {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.js
new file mode 100644
index 0000000000..05d3a30825
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.js
@@ -0,0 +1,18 @@
+SimpleComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: SimpleComponent,
+  selectors: [["simple"]],
+  ngContentSelectors: $c0$,
+  decls: 1,
+  vars: 1,
+  consts: [[__AttributeMarker.Template__, "ngIf"]],
+  template:  function SimpleComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      i0.ɵɵprojectionDef();
+      i0.ɵɵtemplate(0, SimpleComponent_ng_content_0_Template, 1, 0, "ng-content", 0);
+    }
+    if (rf & 2) {
+      i0.ɵɵproperty("ngIf", ctx.showContent);
+    }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.ts
new file mode 100644
index 0000000000..113e9bec42
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_with_structural_dir.ts
@@ -0,0 +1,5 @@
+import {Component, Directive, NgModule, TemplateRef} from '@angular/core';
+
+@Component({selector: 'simple', template: '<ng-content *ngIf="showContent"></ng-content>'})
+export class SimpleComponent {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.js
new file mode 100644
index 0000000000..5e7bca7e1e
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.js
@@ -0,0 +1,21 @@
+MyApp.ɵcmp = i0.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [
+      ["my-app"]
+  ],
+  decls: 1,
+  vars: 1,
+  consts: [
+      ["ngProjectAs", ".someclass", __AttributeMarker.ProjectAs__, ["", 8, "someclass"], __AttributeMarker.Template__, "ngIf"],
+      ["ngProjectAs", ".someclass", __AttributeMarker.ProjectAs__, ["", 8, "someclass"]]
+  ],
+  template: function MyApp_Template(rf, ctx) {
+      if (rf & 1) {
+          i0.ɵɵtemplate(0, MyApp_div_0_Template, 1, 0, "div", 0);
+      }
+      if (rf & 2) {
+          i0.ɵɵproperty("ngIf", ctx.show);
+      }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.ts
new file mode 100644
index 0000000000..5c8445637b
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_attribute.ts
@@ -0,0 +1,6 @@
+import {Component} from '@angular/core';
+
+@Component({selector: 'my-app', template: '<div *ngIf="show" ngProjectAs=".someclass"></div>'})
+export class MyApp {
+  show = true;
+}
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
new file mode 100644
index 0000000000..4b4b5caf8e
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.js
@@ -0,0 +1,20 @@
+// NOTE: the c0 and c1 constants aren't being used in this particular test,
+// NOTE: but they are used in some of the logic that is folded under the ellipsis.
+const $_c0$ = [[["", "title", ""]]];
+const $_c1$ = ["[title]"];
+// ...
+MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [["my-app"]],
+  decls: 2,
+  vars: 0,
+  consts: [["ngProjectAs", "[title],[header]", 5, ["", "title", ""]]],
+  template: function MyApp_Template(rf, ctx) {
+      if (rf & 1) {
+          $r3$.ɵɵelementStart(0, "simple");
+          $r3$.ɵɵelement(1, "h1", 0);
+          $r3$.ɵɵelementEnd();
+      }
+  },
+  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
new file mode 100644
index 0000000000..6de1a85eef
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_compound_selector.ts
@@ -0,0 +1,14 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({selector: 'simple', template: '<div><ng-content select="[title]"></ng-content></div>'})
+export class SimpleComponent {
+}
+
+@NgModule({declarations: [SimpleComponent]})
+export class MyModule {
+}
+
+@Component(
+    {selector: 'my-app', template: '<simple><h1 ngProjectAs="[title],[header]"></h1></simple>'})
+export class MyApp {
+}
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
new file mode 100644
index 0000000000..ca46011524
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.js
@@ -0,0 +1,18 @@
+const $_c0$ = [[["", "title", ""]]];
+const $_c1$ = ["[title]"];
+// ...
+MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [["my-app"]],
+  decls: 2,
+  vars: 0,
+  consts: [["ngProjectAs", "[title]", 5, ["", "title", ""]]],
+  template: function MyApp_Template(rf, ctx) {
+      if (rf & 1) {
+          $r3$.ɵɵelementStart(0, "simple");
+          $r3$.ɵɵelement(1, "h1", 0);
+          $r3$.ɵɵelementEnd();
+      }
+  },
+  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
new file mode 100644
index 0000000000..10616df958
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_project_as_selector.ts
@@ -0,0 +1,13 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({selector: 'simple', template: '<div><ng-content select="[title]"></ng-content></div>'})
+export class SimpleComponent {
+}
+
+@NgModule({declarations: [SimpleComponent]})
+export class MyModule {
+}
+
+@Component({selector: 'my-app', template: '<simple><h1 ngProjectAs="[title]"></h1></simple>'})
+export class MyApp {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.js
new file mode 100644
index 0000000000..5fae6d2b10
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.js
@@ -0,0 +1,29 @@
+function Cmp_ng_template_1_ng_template_1_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵprojection(0, 3);
+  }
+}
+function Cmp_ng_template_1_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵprojection(0, 2);
+    $r3$.ɵɵtemplate(1, Cmp_ng_template_1_ng_template_1_Template, 1, 0, "ng-template");
+  }
+}
+function Cmp_ng_template_2_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵtext(0, " '*' selector in a template: ");
+    $r3$.ɵɵprojection(1, 4);
+  }
+}
+const $_c0$ = [[["", "id", "tomainbefore"]], [["", "id", "tomainafter"]], [["", "id", "totemplate"]], [["", "id", "tonestedtemplate"]], "*"];
+const $_c1$ = ["[id=toMainBefore]", "[id=toMainAfter]", "[id=toTemplate]", "[id=toNestedTemplate]", "*"];
+// ...
+template: function Cmp_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵprojectionDef($_c0$);
+    $r3$.ɵɵprojection(0);
+    $r3$.ɵɵtemplate(1, Cmp_ng_template_1_Template, 2, 0, "ng-template");
+    $r3$.ɵɵtemplate(2, Cmp_ng_template_2_Template, 2, 0, "ng-template");
+    $r3$.ɵɵprojection(3, 1);
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.ts
new file mode 100644
index 0000000000..6bdaf081ab
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_and_nested.ts
@@ -0,0 +1,23 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  template: `
+    <ng-content select="[id=toMainBefore]"></ng-content>
+    <ng-template>
+      <ng-content select="[id=toTemplate]"></ng-content>
+      <ng-template>
+        <ng-content select="[id=toNestedTemplate]"></ng-content>
+      </ng-template>
+    </ng-template>
+    <ng-template>
+      '*' selector in a template: <ng-content></ng-content>
+    </ng-template>
+    <ng-content select="[id=toMainAfter]"></ng-content>
+  `,
+})
+class Cmp {
+}
+
+@NgModule({declarations: [Cmp]})
+class Module {
+}
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
new file mode 100644
index 0000000000..82f8dd28cd
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template.ts
@@ -0,0 +1,22 @@
+import {Component, Directive, NgModule, TemplateRef} from '@angular/core';
+
+@Component({selector: 'simple', template: '<div><ng-content></ng-content></div>'})
+export class SimpleComponent {
+}
+
+@Component({
+  selector: 'complex',
+  template: `
+    <div id="first"><ng-content select="span[title=toFirst]"></ng-content></div>
+    <div id="second"><ng-content SELECT="span[title=toSecond]"></ng-content></div>`
+})
+export class ComplexComponent {
+}
+
+@NgModule({declarations: [SimpleComponent, ComplexComponent]})
+export class MyModule {
+}
+
+@Component({selector: 'my-app', template: '<simple>content</simple> <complex></complex>'})
+export class MyApp {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_complex_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_complex_def.js
new file mode 100644
index 0000000000..2dc472292e
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_complex_def.js
@@ -0,0 +1,22 @@
+const $c1$ = [[["span", "title", "tofirst"]], [["span", "title", "tosecond"]]];
+// ...
+ComplexComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: ComplexComponent,
+  selectors: [["complex"]],
+  ngContentSelectors: $c2$,
+  decls: 4,
+  vars: 0,
+  consts: [["id","first"], ["id","second"]],
+  template:  function ComplexComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵprojectionDef($c1$);
+      $r3$.ɵɵelementStart(0, "div", 0);
+      $r3$.ɵɵprojection(1);
+      $r3$.ɵɵelementEnd();
+      $r3$.ɵɵelementStart(2, "div", 1);
+      $r3$.ɵɵprojection(3, 1);
+      $r3$.ɵɵelementEnd();
+    }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_simple_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_simple_def.js
new file mode 100644
index 0000000000..b8fbc02e7c
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/root_template_simple_def.js
@@ -0,0 +1,16 @@
+SimpleComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: SimpleComponent,
+  selectors: [["simple"]],
+  ngContentSelectors: $c0$,
+  decls: 2,
+  vars: 0,
+  template:  function SimpleComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵprojectionDef();
+      $r3$.ɵɵelementStart(0, "div");
+      $r3$.ɵɵprojection(1);
+      $r3$.ɵɵelementEnd();
+    }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.js
new file mode 100644
index 0000000000..8653ade882
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.js
@@ -0,0 +1,6 @@
+(function() {
+  i0.ɵsetClassMetadata(Comp, [{
+    type: Component,
+    args: [{
+      template: '',
+      providers: [{ provide: token, useExisting: Comp }]
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.ts
new file mode 100644
index 0000000000..49cd6fbb3e
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/custom_decorator_es5.ts
@@ -0,0 +1,15 @@
+import {Component, InjectionToken} from '@angular/core';
+
+const token = new InjectionToken('token');
+
+export function Custom() {
+  return function(target: any) {};
+}
+
+@Custom()
+@Component({
+  template: '',
+  providers: [{provide: token, useExisting: Comp}],
+})
+export class Comp {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.js
new file mode 100644
index 0000000000..cc3e81dadd
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.js
@@ -0,0 +1,5 @@
+SomeDirective.ɵdir = $r3$.ɵɵdefineDirective({
+  type: SomeDirective,
+  selectors: [["", "some-directive", ""]],
+  exportAs: ["someDir", "otherDir"]
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.ts
new file mode 100644
index 0000000000..f6f764c7f3
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/export_as.ts
@@ -0,0 +1,9 @@
+import {Directive, NgModule} from '@angular/core';
+
+@Directive({selector: '[some-directive]', exportAs: 'someDir, otherDir'})
+export class SomeDirective {
+}
+
+@NgModule({declarations: [SomeDirective]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.js
new file mode 100644
index 0000000000..b509cfdd86
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.js
@@ -0,0 +1,3 @@
+// ...
+directives: function () { return [MyForwardDirective]; }
+// ...
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.ts
new file mode 100644
index 0000000000..c6ddfbf883
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_directive.ts
@@ -0,0 +1,18 @@
+import {Component, Directive, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'host-binding-comp',
+  template: `
+    <my-forward-directive></my-forward-directive>
+  `
+})
+export class HostBindingComp {
+}
+
+@Directive({selector: 'my-forward-directive'})
+class MyForwardDirective {
+}
+
+@NgModule({declarations: [HostBindingComp, MyForwardDirective]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.js
new file mode 100644
index 0000000000..8c2cf306f6
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.js
@@ -0,0 +1,3 @@
+// ...
+pipes: function () { return [MyForwardPipe]; }
+// ...
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.ts
new file mode 100644
index 0000000000..aa1a1a8b76
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/forward_referenced_pipe.ts
@@ -0,0 +1,18 @@
+import {Component, NgModule, Pipe} from '@angular/core';
+
+@Component({
+  selector: 'host-binding-comp',
+  template: `
+    <div [attr.style]="{} | my_forward_pipe">...</div>
+  `
+})
+export class HostBindingComp {
+}
+
+@Pipe({name: 'my_forward_pipe'})
+class MyForwardPipe {
+}
+
+@NgModule({declarations: [HostBindingComp, MyForwardPipe]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/GOLDEN_PARTIAL.js
new file mode 100644
index 0000000000..23f4287ee9
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/GOLDEN_PARTIAL.js
@@ -0,0 +1,259 @@
+/****************************************************************************************************
+ * PARTIAL FILE: local_reference.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: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '<input #user>Hello {{user.value}}!', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{ selector: 'my-component', template: '<input #user>Hello {{user.value}}!' }]
+    }], 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: local_reference.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: local_reference_nested.js
+ ****************************************************************************************************/
+import { Component, Directive, NgModule, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export class IfDirective {
+    constructor(template) { }
+}
+IfDirective.ɵfac = function IfDirective_Factory(t) { return new (t || IfDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef)); };
+IfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: IfDirective, selector: "[if]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(IfDirective, [{
+        type: Directive,
+        args: [{ selector: '[if]' }]
+    }], function () { return [{ type: i0.TemplateRef }]; }, null); })();
+export class MyComponent {
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
+    <div #foo></div>
+    {{foo}}
+    <div *if>
+      {{foo}}-{{bar}}
+      <span *if>{{foo}}-{{bar}}-{{baz}}</span>
+      <span #bar></span>
+    </div>
+    <div #baz></div>
+    `, isInline: true }, directives: [{ type: IfDirective, selector: "[if]" }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: `
+    <div #foo></div>
+    {{foo}}
+    <div *if>
+      {{foo}}-{{bar}}
+      <span *if>{{foo}}-{{bar}}-{{baz}}</span>
+      <span #bar></span>
+    </div>
+    <div #baz></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: [IfDirective, MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [IfDirective, MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: local_reference_nested.d.ts
+ ****************************************************************************************************/
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class IfDirective {
+    constructor(template: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDef<IfDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<IfDirective, "[if]", 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 IfDirective, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: local_reference_and_context_variables.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: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
+    <div *ngFor="let item of items">
+       <div #foo></div>
+        <span *ngIf="showing">
+          {{ foo }} - {{ item }}
+        </span>
+    </div>`, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: `
+    <div *ngFor="let item of items">
+       <div #foo></div>
+        <span *ngIf="showing">
+          {{ foo }} - {{ item }}
+        </span>
+    </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: local_reference_and_context_variables.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: lifecycle_hooks.js
+ ****************************************************************************************************/
+import { Component, Input, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+let events = [];
+export class LifecycleComp {
+    ngOnChanges() {
+        events.push('changes' + this.nameMin);
+    }
+    ngOnInit() {
+        events.push('init' + this.nameMin);
+    }
+    ngDoCheck() {
+        events.push('check' + this.nameMin);
+    }
+    ngAfterContentInit() {
+        events.push('content init' + this.nameMin);
+    }
+    ngAfterContentChecked() {
+        events.push('content check' + this.nameMin);
+    }
+    ngAfterViewInit() {
+        events.push('view init' + this.nameMin);
+    }
+    ngAfterViewChecked() {
+        events.push('view check' + this.nameMin);
+    }
+    ngOnDestroy() {
+        events.push(this.nameMin);
+    }
+}
+LifecycleComp.ɵfac = function LifecycleComp_Factory(t) { return new (t || LifecycleComp)(); };
+LifecycleComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: LifecycleComp, selector: "lifecycle-comp", inputs: { nameMin: ["name", "nameMin"] }, usesOnChanges: true, ngImport: i0, template: { source: '', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(LifecycleComp, [{
+        type: Component,
+        args: [{ selector: 'lifecycle-comp', template: '' }]
+    }], null, { nameMin: [{
+            type: Input,
+            args: ['name']
+        }] }); })();
+export class SimpleLayout {
+    constructor() {
+        this.name1 = '1';
+        this.name2 = '2';
+    }
+}
+SimpleLayout.ɵfac = function SimpleLayout_Factory(t) { return new (t || SimpleLayout)(); };
+SimpleLayout.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleLayout, selector: "simple-layout", ngImport: i0, template: { source: `
+    <lifecycle-comp [name]="name1"></lifecycle-comp>
+    <lifecycle-comp [name]="name2"></lifecycle-comp>
+  `, isInline: true }, directives: [{ type: LifecycleComp, selector: "lifecycle-comp", inputs: ["name"] }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleLayout, [{
+        type: Component,
+        args: [{
+                selector: 'simple-layout',
+                template: `
+    <lifecycle-comp [name]="name1"></lifecycle-comp>
+    <lifecycle-comp [name]="name2"></lifecycle-comp>
+  `
+            }]
+    }], null, null); })();
+export class LifecycleModule {
+}
+LifecycleModule.ɵmod = i0.ɵɵdefineNgModule({ type: LifecycleModule });
+LifecycleModule.ɵinj = i0.ɵɵdefineInjector({ factory: function LifecycleModule_Factory(t) { return new (t || LifecycleModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(LifecycleModule, { declarations: [LifecycleComp, SimpleLayout] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(LifecycleModule, [{
+        type: NgModule,
+        args: [{ declarations: [LifecycleComp, SimpleLayout] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: lifecycle_hooks.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class LifecycleComp {
+    nameMin: string;
+    ngOnChanges(): void;
+    ngOnInit(): void;
+    ngDoCheck(): void;
+    ngAfterContentInit(): void;
+    ngAfterContentChecked(): void;
+    ngAfterViewInit(): void;
+    ngAfterViewChecked(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDef<LifecycleComp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<LifecycleComp, "lifecycle-comp", never, { "nameMin": "name"; }, {}, never, never>;
+}
+export declare class SimpleLayout {
+    name1: string;
+    name2: string;
+    static ɵfac: i0.ɵɵFactoryDef<SimpleLayout, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<SimpleLayout, "simple-layout", never, {}, {}, never, never>;
+}
+export declare class LifecycleModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<LifecycleModule, [typeof LifecycleComp, typeof SimpleLayout], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<LifecycleModule>;
+}
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/TEST_CASES.json
new file mode 100644
index 0000000000..20f9000e4b
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/TEST_CASES.json
@@ -0,0 +1,73 @@
+{
+  "$schema": "../../../test_case_schema.json",
+  "cases": [
+    {
+      "description": "local reference",
+      "inputFiles": [
+        "local_reference.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect MyComponent.ɵcmp",
+          "files": [
+            "local_reference.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "local references in nested views",
+      "inputFiles": [
+        "local_reference_nested.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect MyComponent.ɵcmp",
+          "files": [
+            "local_reference_nested.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support local refs mixed with context assignments",
+      "inputFiles": [
+        "local_reference_and_context_variables.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect template",
+          "files": [
+            "local_reference_and_context_variables.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should gen hooks with a few simple components",
+      "inputFiles": [
+        "lifecycle_hooks.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid LifecycleComp definition",
+          "files": [
+            {
+              "expected": "lifecycle_hooks_lifecycle_comp_def.js",
+              "generated": "lifecycle_hooks.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Invalid SimpleLayout definition",
+          "files": [
+            {
+              "expected": "lifecycle_hooks_simple_layout_def.js",
+              "generated": "lifecycle_hooks.js"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks.ts
new file mode 100644
index 0000000000..6b23dc1b28
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks.ts
@@ -0,0 +1,53 @@
+import {Component, Input, NgModule} from '@angular/core';
+
+let events: string[] = [];
+
+@Component({selector: 'lifecycle-comp', template: ''})
+export class LifecycleComp {
+  @Input('name') nameMin!: string;
+
+  ngOnChanges() {
+    events.push('changes' + this.nameMin);
+  }
+
+  ngOnInit() {
+    events.push('init' + this.nameMin);
+  }
+  ngDoCheck() {
+    events.push('check' + this.nameMin);
+  }
+
+  ngAfterContentInit() {
+    events.push('content init' + this.nameMin);
+  }
+  ngAfterContentChecked() {
+    events.push('content check' + this.nameMin);
+  }
+
+  ngAfterViewInit() {
+    events.push('view init' + this.nameMin);
+  }
+  ngAfterViewChecked() {
+    events.push('view check' + this.nameMin);
+  }
+
+  ngOnDestroy() {
+    events.push(this.nameMin);
+  }
+}
+
+@Component({
+  selector: 'simple-layout',
+  template: `
+    <lifecycle-comp [name]="name1"></lifecycle-comp>
+    <lifecycle-comp [name]="name2"></lifecycle-comp>
+  `
+})
+export class SimpleLayout {
+  name1 = '1';
+  name2 = '2';
+}
+
+@NgModule({declarations: [LifecycleComp, SimpleLayout]})
+export class LifecycleModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_lifecycle_comp_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_lifecycle_comp_def.js
new file mode 100644
index 0000000000..37ccb64bb5
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_lifecycle_comp_def.js
@@ -0,0 +1,10 @@
+LifecycleComp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: LifecycleComp,
+  selectors: [["lifecycle-comp"]],
+  inputs: {nameMin: ["name", "nameMin"]},
+  features: [$r3$.ɵɵNgOnChangesFeature],
+  decls: 0,
+  vars: 0,
+  template:  function LifecycleComp_Template(rf, ctx) {},
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_simple_layout_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_simple_layout_def.js
new file mode 100644
index 0000000000..15bffa3528
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/lifecycle_hooks_simple_layout_def.js
@@ -0,0 +1,20 @@
+SimpleLayout.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: SimpleLayout,
+  selectors: [["simple-layout"]],
+  decls: 2,
+  vars: 2,
+  consts: [[__AttributeMarker.Bindings__, "name"]],
+  template:  function SimpleLayout_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "lifecycle-comp", 0);
+      $r3$.ɵɵelement(1, "lifecycle-comp", 0);
+    }
+    if (rf & 2) {
+      $r3$.ɵɵproperty("name", ctx.name1);
+      $r3$.ɵɵadvance(1);
+      $r3$.ɵɵproperty("name", ctx.name2);
+    }
+  },
+  directives: [LifecycleComp],
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.js
new file mode 100644
index 0000000000..99e56dfaac
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.js
@@ -0,0 +1,20 @@
+// ...
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyComponent,
+  selectors: [["my-component"]],
+  decls: 3,
+  vars: 1,
+  consts: [["user", ""]],
+  template:  function MyComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "input", null, 0);
+      $r3$.ɵɵtext(2);
+    }
+    if (rf & 2) {
+      const $user$ = $r3$.ɵɵreference(1);
+      $r3$.ɵɵadvance(2);
+      $r3$.ɵɵtextInterpolate1("Hello ", $user$.value, "!");
+    }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.ts
new file mode 100644
index 0000000000..4738742b09
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference.ts
@@ -0,0 +1,9 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({selector: 'my-component', template: '<input #user>Hello {{user.value}}!'})
+export class MyComponent {
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.js
new file mode 100644
index 0000000000..b53c7dd79b
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.js
@@ -0,0 +1,38 @@
+function MyComponent_div_0_span_3_Template(rf, ctx) {
+  if (rf & 1) {
+    $i0$.ɵɵelementStart(0, "span");
+    $i0$.ɵɵtext(1);
+    $i0$.ɵɵelementEnd();
+  }
+  if (rf & 2) {
+    const $item$ = $i0$.ɵɵnextContext().$implicit;
+    const $foo$ = $i0$.ɵɵreference(2);
+    $r3$.ɵɵadvance(1);
+    $i0$.ɵɵtextInterpolate2(" ", $foo$, " - ", $item$, " ");
+  }
+}
+
+function MyComponent_div_0_Template(rf, ctx) {
+  if (rf & 1) {
+    $i0$.ɵɵelementStart(0, "div");
+    $i0$.ɵɵelement(1, "div", null, 1);
+    $i0$.ɵɵtemplate(3, MyComponent_div_0_span_3_Template, 2, 2, "span", 2);
+    $i0$.ɵɵelementEnd();
+  }
+  if (rf & 2) {
+    const $app$ = $i0$.ɵɵnextContext();
+    $r3$.ɵɵadvance(3);
+    $i0$.ɵɵproperty("ngIf", $app$.showing);
+  }
+}
+
+// ...
+consts: [[__AttributeMarker.Template__, "ngFor", "ngForOf"], ["foo", ""], [__AttributeMarker.Template__, "ngIf"]],
+template:function MyComponent_Template(rf, ctx){
+  if (rf & 1) {
+    $i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 4, 1, "div", 0);
+  }
+  if (rf & 2) {
+    $i0$.ɵɵproperty("ngForOf", ctx.items);
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.ts
new file mode 100644
index 0000000000..bae9db5ef0
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_and_context_variables.ts
@@ -0,0 +1,18 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'my-component',
+  template: `
+    <div *ngFor="let item of items">
+       <div #foo></div>
+        <span *ngIf="showing">
+          {{ foo }} - {{ item }}
+        </span>
+    </div>`
+})
+export class MyComponent {
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.js
new file mode 100644
index 0000000000..b852bf2146
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.js
@@ -0,0 +1,55 @@
+function MyComponent_div_3_span_2_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵelementStart(0, "span");
+    $r3$.ɵɵtext(1);
+    $r3$.ɵɵelementEnd();
+  }
+  if (rf & 2) {
+    $r3$.ɵɵnextContext();
+    const $bar$ = $r3$.ɵɵreference(4);
+    $r3$.ɵɵnextContext();
+    const $foo$ = $r3$.ɵɵreference(1);
+    const $baz$ = $r3$.ɵɵreference(5);
+    $r3$.ɵɵadvance(1);
+    $r3$.ɵɵtextInterpolate3("", $foo$, "-", $bar$, "-", $baz$, "");
+  }
+}
+function MyComponent_div_3_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵelementStart(0, "div");
+    $r3$.ɵɵtext(1);
+    $r3$.ɵɵtemplate(2, MyComponent_div_3_span_2_Template, 2, 3, "span", 1);
+    $r3$.ɵɵelement(3, "span", null, 3);
+    $r3$.ɵɵelementEnd();
+  }
+  if (rf & 2) {
+    const $bar$ = $r3$.ɵɵreference(4);
+    $r3$.ɵɵnextContext();
+    const $foo$ = $r3$.ɵɵreference(1);
+    $r3$.ɵɵadvance(1);
+    $r3$.ɵɵtextInterpolate2(" ", $foo$, "-", $bar$, " ");
+  }
+}
+// ...
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyComponent,
+  selectors: [["my-component"]],
+  decls: 6,
+  vars: 1,
+  consts: [["foo", ""], [__AttributeMarker.Template__, "if"], ["baz", ""], ["bar", ""]],
+  template:  function MyComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "div", null, 0);
+      $r3$.ɵɵtext(2);
+      $r3$.ɵɵtemplate(3, MyComponent_div_3_Template, 5, 2, "div", 1);
+      $r3$.ɵɵelement(4, "div", null, 2);
+    }
+    if (rf & 2) {
+      const $foo$ = $r3$.ɵɵreference(1);
+      $r3$.ɵɵadvance(2);
+      $r3$.ɵɵtextInterpolate1(" ", $foo$, " ");
+    }
+  },
+  directives:[IfDirective],
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.ts
new file mode 100644
index 0000000000..e65fcfbfb3
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/lifecycle_hooks/local_reference_nested.ts
@@ -0,0 +1,26 @@
+import {Component, Directive, NgModule, TemplateRef} from '@angular/core';
+
+@Directive({selector: '[if]'})
+export class IfDirective {
+  constructor(template: TemplateRef<any>) {}
+}
+
+@Component({
+  selector: 'my-component',
+  template: `
+    <div #foo></div>
+    {{foo}}
+    <div *if>
+      {{foo}}-{{bar}}
+      <span *if>{{foo}}-{{bar}}-{{baz}}</span>
+      <span #bar></span>
+    </div>
+    <div #baz></div>
+    `
+})
+export class MyComponent {
+}
+
+@NgModule({declarations: [IfDirective, MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.js
new file mode 100644
index 0000000000..42299dc393
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.js
@@ -0,0 +1,15 @@
+function MyComponent_ng_template_0_Template(rf, ctx) {}
+// ...
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyComponent,
+  selectors: [["my-app"]],
+  decls: 1,
+  vars: 0,
+  consts: [[__AttributeMarker.Bindings__, "id"]],
+  template: function MyComponent_Template(rf, $ctx$) {
+    if (rf & 1) {
+      $r3$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 0, 0, "ng-template", 0);
+    }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.ts
new file mode 100644
index 0000000000..92751266d0
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/ng_template_empty_binding.ts
@@ -0,0 +1,9 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({selector: 'my-app', template: '<ng-template [id]=""></ng-template>'})
+export class MyComponent {
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.js
new file mode 100644
index 0000000000..4f4602b6fc
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.js
@@ -0,0 +1,3 @@
+AbstractDirective.ɵdir = $r3$.ɵɵdefineDirective({
+  type: AbstractDirective
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.ts
new file mode 100644
index 0000000000..9be3a7444e
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/no_selector.ts
@@ -0,0 +1,5 @@
+import {Directive} from '@angular/core';
+
+@Directive()
+export class AbstractDirective {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.js
new file mode 100644
index 0000000000..b8a4d06c8f
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.js
@@ -0,0 +1,23 @@
+const $c0$ = function () { return { foo: null }; };
+const $c1$ = function () { return {}; };
+const $c2$ = function (a0) { return { foo: a0 }; };
+// ...
+MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [["ng-component"]],
+  decls: 2,
+  vars: 6,
+  consts: [[__AttributeMarker.Bindings__, "dir"]],
+  template:  function MyApp_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "div", 0);
+      $r3$.ɵɵelement(1, "div", 0);
+    }
+    if (rf & 2) {
+      $r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction0(2, $c0$));
+      $r3$.ɵɵadvance(1);
+      $r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction1(4, $c2$, $r3$.ɵɵpureFunction0(3, $c1$)));
+    }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.ts
new file mode 100644
index 0000000000..0c28e4082b
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_empty.ts
@@ -0,0 +1,14 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  template: `
+    <div [dir]="{foo: null}"></div>
+    <div [dir]="{foo: {}}"></div>
+  `
+})
+export class MyApp {
+}
+
+@NgModule({declarations: [MyApp]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.js
new file mode 100644
index 0000000000..98a5a1ddff
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.js
@@ -0,0 +1,22 @@
+const $c0$ = function () { return { foo: null }; };
+const $c1$ = function (a0) { return { foo: a0 }; };
+// ...
+MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [["ng-component"]],
+  decls: 2,
+  vars: 5,
+  consts: [[__AttributeMarker.Bindings__, "dir"]],
+  template:  function MyApp_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "div", 0);
+      $r3$.ɵɵelement(1, "div", 0);
+    }
+    if (rf & 2) {
+      $r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction0(2, $c0$));
+      $r3$.ɵɵadvance(1);
+      $r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction1(3, $c1$, ctx.getFoo()));
+    }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.ts
new file mode 100644
index 0000000000..637560181b
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/object_literals_null_vs_function.ts
@@ -0,0 +1,17 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  template: `
+    <div [dir]="{foo: null}"></div>
+    <div [dir]="{foo: getFoo()}"></div>
+  `
+})
+export class MyApp {
+  getFoo() {
+    return 'foo!';
+  }
+}
+
+@NgModule({declarations: [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
new file mode 100644
index 0000000000..35a6a6207d
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/GOLDEN_PARTIAL.js
@@ -0,0 +1,220 @@
+/****************************************************************************************************
+ * PARTIAL FILE: pipes.js
+ ****************************************************************************************************/
+import { Component, NgModule, Pipe } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyPipe {
+    transform(value, ...args) {
+        return value;
+    }
+    ngOnDestroy() { }
+}
+MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)(); };
+MyPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myPipe", type: MyPipe, pure: false });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyPipe, [{
+        type: Pipe,
+        args: [{ name: 'myPipe', pure: false }]
+    }], null, null); })();
+export class MyPurePipe {
+    transform(value, ...args) {
+        return value;
+    }
+}
+MyPurePipe.ɵfac = function MyPurePipe_Factory(t) { return new (t || MyPurePipe)(); };
+MyPurePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myPurePipe", type: MyPurePipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyPurePipe, [{
+        type: Pipe,
+        args: [{
+                name: 'myPurePipe',
+                pure: true,
+            }]
+    }], null, null); })();
+export class MyApp {
+    constructor() {
+        this.name = 'World';
+        this.size = 0;
+    }
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '{{name | myPipe:size | myPurePipe:size }}<p>{{ name | myPipe:1:2:3:4:5 }} {{ name ? 1 : 2 | myPipe }}</p>', isInline: true }, pipes: { "myPurePipe": MyPurePipe, "myPipe": MyPipe } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{
+                selector: 'my-app',
+                template: '{{name | myPipe:size | myPurePipe:size }}<p>{{ name | myPipe:1:2:3:4:5 }} {{ name ? 1 : 2 | myPipe }}</p>'
+            }]
+    }], 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: [MyPipe, MyPurePipe, MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyPipe, MyPurePipe, MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: pipes.d.ts
+ ****************************************************************************************************/
+import { OnDestroy, PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class MyPipe implements PipeTransform, OnDestroy {
+    transform(value: any, ...args: any[]): any;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDef<MyPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<MyPipe, "myPipe">;
+}
+export declare class MyPurePipe implements PipeTransform {
+    transform(value: any, ...args: any[]): any;
+    static ɵfac: i0.ɵɵFactoryDef<MyPurePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<MyPurePipe, "myPurePipe">;
+}
+export declare class MyApp {
+    name: string;
+    size: number;
+    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 MyPipe, typeof MyPurePipe, typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: pipe_invocation.js
+ ****************************************************************************************************/
+import { Component, NgModule, Pipe } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyPipe {
+    transform(value, ...args) {
+        return value;
+    }
+    ngOnDestroy() { }
+}
+MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)(); };
+MyPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myPipe", type: MyPipe, pure: false });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyPipe, [{
+        type: Pipe,
+        args: [{ name: 'myPipe', pure: false }]
+    }], null, null); })();
+export class MyApp {
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, 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 } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{
+                selector: 'my-app',
+                template: '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}}'
+            }]
+    }], 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: [MyPipe, MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyPipe, MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: pipe_invocation.d.ts
+ ****************************************************************************************************/
+import { OnDestroy, PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class MyPipe implements PipeTransform, OnDestroy {
+    transform(value: any, ...args: any[]): any;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDef<MyPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<MyPipe, "myPipe">;
+}
+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 MyPipe, typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: pipe_di_change_detector_ref.js
+ ****************************************************************************************************/
+import { ChangeDetectorRef, Component, NgModule, Optional, Pipe } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyPipe {
+    constructor(changeDetectorRef) { }
+    transform(value, ...args) {
+        return value;
+    }
+}
+MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)(i0.ɵɵinjectPipeChangeDetectorRef()); };
+MyPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myPipe", type: MyPipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyPipe, [{
+        type: Pipe,
+        args: [{ name: 'myPipe' }]
+    }], function () { return [{ type: i0.ChangeDetectorRef }]; }, null); })();
+export class MyOtherPipe {
+    constructor(changeDetectorRef) { }
+    transform(value, ...args) {
+        return value;
+    }
+}
+MyOtherPipe.ɵfac = function MyOtherPipe_Factory(t) { return new (t || MyOtherPipe)(i0.ɵɵinjectPipeChangeDetectorRef(8)); };
+MyOtherPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myOtherPipe", type: MyOtherPipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyOtherPipe, [{
+        type: Pipe,
+        args: [{ name: 'myOtherPipe' }]
+    }], function () { return [{ type: i0.ChangeDetectorRef, decorators: [{
+                type: Optional
+            }] }]; }, null); })();
+export class MyApp {
+    constructor() {
+        this.name = 'World';
+    }
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '{{name | myPipe }}<p>{{ name | myOtherPipe }}</p>', isInline: true }, pipes: { "myPipe": MyPipe, "myOtherPipe": MyOtherPipe } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{ selector: 'my-app', template: '{{name | myPipe }}<p>{{ name | myOtherPipe }}</p>' }]
+    }], 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: [MyPipe, MyOtherPipe, MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyPipe, MyOtherPipe, MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: pipe_di_change_detector_ref.d.ts
+ ****************************************************************************************************/
+import { ChangeDetectorRef, PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class MyPipe implements PipeTransform {
+    constructor(changeDetectorRef: ChangeDetectorRef);
+    transform(value: any, ...args: any[]): any;
+    static ɵfac: i0.ɵɵFactoryDef<MyPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<MyPipe, "myPipe">;
+}
+export declare class MyOtherPipe implements PipeTransform {
+    constructor(changeDetectorRef: ChangeDetectorRef);
+    transform(value: any, ...args: any[]): any;
+    static ɵfac: i0.ɵɵFactoryDef<MyOtherPipe, [{ optional: true; }]>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<MyOtherPipe, "myOtherPipe">;
+}
+export declare class MyApp {
+    name: string;
+    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 MyPipe, typeof MyOtherPipe, typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/TEST_CASES.json
new file mode 100644
index 0000000000..c8858a2eea
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/TEST_CASES.json
@@ -0,0 +1,116 @@
+{
+  "$schema": "../../../test_case_schema.json",
+  "cases": [
+    {
+      "description": "should render pipes",
+      "inputFiles": [
+        "pipes.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid pipe definition",
+          "files": [
+            {
+              "expected": "pipes_my_pipe_def.js",
+              "generated": "pipes.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Invalid pipe factory function",
+          "files": [
+            {
+              "expected": "pipes_my_pipe_fac.js",
+              "generated": "pipes.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Invalid pure pipe definition",
+          "files": [
+            {
+              "expected": "pipes_my_pure_pipe_def.js",
+              "generated": "pipes.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Invalid pure pipe factory function",
+          "files": [
+            {
+              "expected": "pipes_my_pure_pipe_fac.js",
+              "generated": "pipes.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Invalid MyApp definition",
+          "files": [
+            {
+              "expected": "pipes_my_app_def.js",
+              "generated": "pipes.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should use appropriate function for a given no of pipe arguments",
+      "inputFiles": [
+        "pipe_invocation.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid MyApp definition",
+          "files": [
+            "pipe_invocation.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should generate the proper instruction when injecting ChangeDetectorRef into a pipe",
+      "inputFiles": [
+        "pipe_di_change_detector_ref.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid pipe definition",
+          "files": [
+            {
+              "expected": "pipe_di_change_detector_ref_my_pipe_def.js",
+              "generated": "pipe_di_change_detector_ref.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Invalid pipe factory function",
+          "files": [
+            {
+              "expected": "pipe_di_change_detector_ref_my_pipe_fac.js",
+              "generated": "pipe_di_change_detector_ref.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Invalid alternate pipe definition",
+          "files": [
+            {
+              "expected": "pipe_di_change_detector_ref_my_other_pipe_def.js",
+              "generated": "pipe_di_change_detector_ref.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Invalid alternate pipe factory function",
+          "files": [
+            {
+              "expected": "pipe_di_change_detector_ref_my_other_pipe_fac.js",
+              "generated": "pipe_di_change_detector_ref.js"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref.ts
new file mode 100644
index 0000000000..b366d54980
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref.ts
@@ -0,0 +1,28 @@
+import {ChangeDetectorRef, Component, NgModule, Optional, Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'myPipe'})
+export class MyPipe implements PipeTransform {
+  constructor(changeDetectorRef: ChangeDetectorRef) {}
+
+  transform(value: any, ...args: any[]) {
+    return value;
+  }
+}
+
+@Pipe({name: 'myOtherPipe'})
+export class MyOtherPipe implements PipeTransform {
+  constructor(@Optional() changeDetectorRef: ChangeDetectorRef) {}
+
+  transform(value: any, ...args: any[]) {
+    return value;
+  }
+}
+
+@Component({selector: 'my-app', template: '{{name | myPipe }}<p>{{ name | myOtherPipe }}</p>'})
+export class MyApp {
+  name = 'World';
+}
+
+@NgModule({declarations: [MyPipe, MyOtherPipe, MyApp]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_def.js
new file mode 100644
index 0000000000..27a602a152
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_def.js
@@ -0,0 +1,5 @@
+MyOtherPipe.ɵpipe = $r3$.ɵɵdefinePipe({
+  name: "myOtherPipe",
+  type: MyOtherPipe,
+  pure: true
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_fac.js
new file mode 100644
index 0000000000..e858b8160a
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_other_pipe_fac.js
@@ -0,0 +1 @@
+MyOtherPipe.ɵfac = function MyOtherPipe_Factory(t) { return new (t || MyOtherPipe)($r3$.ɵɵinjectPipeChangeDetectorRef(8)); };
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_def.js
new file mode 100644
index 0000000000..1978a4c76a
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_def.js
@@ -0,0 +1,5 @@
+MyPipe.ɵpipe = $r3$.ɵɵdefinePipe({
+  name: "myPipe",
+  type: MyPipe,
+  pure: true
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_fac.js
new file mode 100644
index 0000000000..9b12d4d695
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_di_change_detector_ref_my_pipe_fac.js
@@ -0,0 +1 @@
+MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)($r3$.ɵɵinjectPipeChangeDetectorRef()); };
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.js
new file mode 100644
index 0000000000..69a3042d7d
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.js
@@ -0,0 +1,29 @@
+// ...
+MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [["my-app"]],
+  decls: 6,
+  vars: 27,
+  template:  function MyApp_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵtext(0);
+      $r3$.ɵɵpipe(1, "myPipe");
+      $r3$.ɵɵpipe(2, "myPipe");
+      $r3$.ɵɵpipe(3, "myPipe");
+      $r3$.ɵɵpipe(4, "myPipe");
+      $r3$.ɵɵpipe(5, "myPipe");
+    }
+    if (rf & 2) {
+      $r3$.ɵɵtextInterpolate5(
+        "0:", i0.ɵɵpipeBind1(1, 5, ctx.name),
+        "1:", i0.ɵɵpipeBind2(2, 7, ctx.name, 1),
+        "2:", i0.ɵɵpipeBind3(3, 10, ctx.name, 1, 2),
+        "3:", i0.ɵɵpipeBind4(4, 14, ctx.name, 1, 2, 3),
+        "4:", i0.ɵɵpipeBindV(5, 19, $r3$.ɵɵpureFunction1(25, $c0$, ctx.name)),
+        ""
+      );
+    }
+  },
+  pipes: [MyPipe],
+  encapsulation: 2
+});
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
new file mode 100644
index 0000000000..607de19903
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipe_invocation.ts
@@ -0,0 +1,21 @@
+import {Component, NgModule, OnDestroy, Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'myPipe', pure: false})
+export class MyPipe implements PipeTransform, OnDestroy {
+  transform(value: any, ...args: any[]) {
+    return value;
+  }
+  ngOnDestroy(): void {}
+}
+
+@Component({
+  selector: 'my-app',
+  template:
+      '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 {
+}
+
+@NgModule({declarations: [MyPipe, MyApp]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes.ts
new file mode 100644
index 0000000000..4dc48a80c1
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes.ts
@@ -0,0 +1,33 @@
+import {Component, NgModule, OnDestroy, Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'myPipe', pure: false})
+export class MyPipe implements PipeTransform, OnDestroy {
+  transform(value: any, ...args: any[]) {
+    return value;
+  }
+  ngOnDestroy(): void {}
+}
+
+@Pipe({
+  name: 'myPurePipe',
+  pure: true,
+})
+export class MyPurePipe implements PipeTransform {
+  transform(value: any, ...args: any[]) {
+    return value;
+  }
+}
+
+@Component({
+  selector: 'my-app',
+  template:
+      '{{name | myPipe:size | myPurePipe:size }}<p>{{ name | myPipe:1:2:3:4:5 }} {{ name ? 1 : 2 | myPipe }}</p>'
+})
+export class MyApp {
+  name = 'World';
+  size = 0;
+}
+
+@NgModule({declarations: [MyPipe, MyPurePipe, MyApp]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_app_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_app_def.js
new file mode 100644
index 0000000000..fb780dac4c
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_app_def.js
@@ -0,0 +1,29 @@
+const $c0$ = function ($a0$) {
+  return [$a0$, 1, 2, 3, 4, 5];
+};
+// ...
+MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [["my-app"]],
+  decls: 7,
+  vars: 20,
+  template:  function MyApp_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵtext(0);
+      $r3$.ɵɵpipe(1, "myPurePipe");
+      $r3$.ɵɵpipe(2, "myPipe");
+      $r3$.ɵɵelementStart(3, "p");
+      $r3$.ɵɵtext(4);
+      $r3$.ɵɵpipe(5, "myPipe");
+      $r3$.ɵɵpipe(6, "myPipe");
+      $r3$.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+      $r3$.ɵɵtextInterpolate($r3$.ɵɵpipeBind2(1, 3, $r3$.ɵɵpipeBind2(2, 6, ctx.name, ctx.size), ctx.size));
+      $r3$.ɵɵadvance(4);
+      $r3$.ɵɵtextInterpolate2("", $r3$.ɵɵpipeBindV(5, 9, $r3$.ɵɵpureFunction1(18, $c0$, ctx.name)), " ", ctx.name ? 1 : $r3$.ɵɵpipeBind1(6, 16, 2), "");
+    }
+  },
+  pipes: [MyPurePipe, MyPipe],
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_def.js
new file mode 100644
index 0000000000..534234eedf
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_def.js
@@ -0,0 +1,5 @@
+MyPipe.ɵpipe = $r3$.ɵɵdefinePipe({
+  name: "myPipe",
+  type: MyPipe,
+  pure: false
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_fac.js
new file mode 100644
index 0000000000..b09691cc3d
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pipe_fac.js
@@ -0,0 +1 @@
+MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)(); };
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_def.js
new file mode 100644
index 0000000000..5404b2f6e5
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_def.js
@@ -0,0 +1,5 @@
+MyPurePipe.ɵpipe = $r3$.ɵɵdefinePipe({
+  name: "myPurePipe",
+  type: MyPurePipe,
+  pure: true
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_fac.js
new file mode 100644
index 0000000000..d0b57410cf
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/pipes/pipes_my_pure_pipe_fac.js
@@ -0,0 +1 @@
+MyPurePipe.ɵfac = function MyPurePipe_Factory(t) { return new (t || MyPurePipe)(); };
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/GOLDEN_PARTIAL.js
new file mode 100644
index 0000000000..4d6dc7b995
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/GOLDEN_PARTIAL.js
@@ -0,0 +1,654 @@
+/****************************************************************************************************
+ * PARTIAL FILE: some.directive.js
+ ****************************************************************************************************/
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SomeDirective {
+}
+SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
+SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[someDir]',
+            }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: some.directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SomeDirective {
+    static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDir]", never, {}, {}, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: view_query_for_directive.js
+ ****************************************************************************************************/
+import { Component, NgModule, ViewChild, ViewChildren } from '@angular/core';
+import { SomeDirective } from './some.directive';
+import * as i0 from "@angular/core";
+export class ViewQueryComponent {
+}
+ViewQueryComponent.ɵfac = function ViewQueryComponent_Factory(t) { return new (t || ViewQueryComponent)(); };
+ViewQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ViewQueryComponent, selector: "view-query-component", viewQueries: [{ propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true }, { propertyName: "someDirs", predicate: SomeDirective, descendants: true }], ngImport: i0, template: { source: `
+    <div someDir></div>
+  `, isInline: true }, directives: [{ type: function () { return SomeDirective; }, selector: "[someDir]" }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ViewQueryComponent, [{
+        type: Component,
+        args: [{
+                selector: 'view-query-component',
+                template: `
+    <div someDir></div>
+  `
+            }]
+    }], null, { someDir: [{
+            type: ViewChild,
+            args: [SomeDirective]
+        }], someDirs: [{
+            type: ViewChildren,
+            args: [SomeDirective]
+        }] }); })();
+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: [SomeDirective, ViewQueryComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [SomeDirective, ViewQueryComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: view_query_for_directive.d.ts
+ ****************************************************************************************************/
+import { QueryList } from '@angular/core';
+import { SomeDirective } from './some.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "./some.directive";
+export declare class ViewQueryComponent {
+    someDir: SomeDirective;
+    someDirs: QueryList<SomeDirective>;
+    static ɵfac: i0.ɵɵFactoryDef<ViewQueryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<ViewQueryComponent, "view-query-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof i1.SomeDirective, typeof ViewQueryComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: view_query_for_local_ref.js
+ ****************************************************************************************************/
+import { Component, NgModule, ViewChild, ViewChildren } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ViewQueryComponent {
+}
+ViewQueryComponent.ɵfac = function ViewQueryComponent_Factory(t) { return new (t || ViewQueryComponent)(); };
+ViewQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ViewQueryComponent, selector: "view-query-component", viewQueries: [{ propertyName: "myRef", first: true, predicate: ["myRef"], descendants: true }, { propertyName: "myRefs", predicate: ["myRef1, myRef2, myRef3"], descendants: true }], ngImport: i0, template: { source: `
+    <div #myRef></div>
+    <div #myRef1></div>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ViewQueryComponent, [{
+        type: Component,
+        args: [{
+                selector: 'view-query-component',
+                template: `
+    <div #myRef></div>
+    <div #myRef1></div>
+  `
+            }]
+    }], null, { myRef: [{
+            type: ViewChild,
+            args: ['myRef']
+        }], myRefs: [{
+            type: ViewChildren,
+            args: ['myRef1, myRef2, myRef3']
+        }] }); })();
+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: [ViewQueryComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [ViewQueryComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: view_query_for_local_ref.d.ts
+ ****************************************************************************************************/
+import { QueryList } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ViewQueryComponent {
+    myRef: any;
+    myRefs: QueryList<any>;
+    static ɵfac: i0.ɵɵFactoryDef<ViewQueryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<ViewQueryComponent, "view-query-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof ViewQueryComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: some.directive.js
+ ****************************************************************************************************/
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SomeDirective {
+}
+SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
+SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[someDir]',
+            }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: some.directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SomeDirective {
+    static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDir]", never, {}, {}, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: static_view_query.js
+ ****************************************************************************************************/
+import { Component, ElementRef, NgModule, ViewChild } from '@angular/core';
+import { SomeDirective } from './some.directive';
+import * as i0 from "@angular/core";
+export class ViewQueryComponent {
+}
+ViewQueryComponent.ɵfac = function ViewQueryComponent_Factory(t) { return new (t || ViewQueryComponent)(); };
+ViewQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ViewQueryComponent, selector: "view-query-component", viewQueries: [{ propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true, static: true }, { propertyName: "foo", first: true, predicate: ["foo"], descendants: true }], ngImport: i0, template: { source: `
+    <div someDir></div>
+  `, isInline: true }, directives: [{ type: function () { return SomeDirective; }, selector: "[someDir]" }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ViewQueryComponent, [{
+        type: Component,
+        args: [{
+                selector: 'view-query-component',
+                template: `
+    <div someDir></div>
+  `
+            }]
+    }], null, { someDir: [{
+            type: ViewChild,
+            args: [SomeDirective, { static: true }]
+        }], foo: [{
+            type: ViewChild,
+            args: ['foo']
+        }] }); })();
+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: [SomeDirective, ViewQueryComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [SomeDirective, ViewQueryComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: static_view_query.d.ts
+ ****************************************************************************************************/
+import { ElementRef } from '@angular/core';
+import { SomeDirective } from './some.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "./some.directive";
+export declare class ViewQueryComponent {
+    someDir: SomeDirective;
+    foo: ElementRef;
+    static ɵfac: i0.ɵɵFactoryDef<ViewQueryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<ViewQueryComponent, "view-query-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof i1.SomeDirective, typeof ViewQueryComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: some.directive.js
+ ****************************************************************************************************/
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SomeDirective {
+}
+SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
+SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[someDir]',
+            }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: some.directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SomeDirective {
+    static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDir]", never, {}, {}, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: view_query_read_token.js
+ ****************************************************************************************************/
+import { Component, ElementRef, NgModule, TemplateRef, ViewChild, ViewChildren } from '@angular/core';
+import { SomeDirective } from './some.directive';
+import * as i0 from "@angular/core";
+export class ViewQueryComponent {
+}
+ViewQueryComponent.ɵfac = function ViewQueryComponent_Factory(t) { return new (t || ViewQueryComponent)(); };
+ViewQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ViewQueryComponent, selector: "view-query-component", viewQueries: [{ propertyName: "myRef", first: true, predicate: ["myRef"], descendants: true, read: TemplateRef }, { propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true, read: ElementRef }, { propertyName: "myRefs", predicate: ["myRef1, myRef2, myRef3"], descendants: true, read: ElementRef }, { propertyName: "someDirs", predicate: SomeDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: { source: `
+    <div someDir></div>
+    <div #myRef></div>
+    <div #myRef1></div>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ViewQueryComponent, [{
+        type: Component,
+        args: [{
+                selector: 'view-query-component',
+                template: `
+    <div someDir></div>
+    <div #myRef></div>
+    <div #myRef1></div>
+  `
+            }]
+    }], null, { myRef: [{
+            type: ViewChild,
+            args: ['myRef', { read: TemplateRef }]
+        }], myRefs: [{
+            type: ViewChildren,
+            args: ['myRef1, myRef2, myRef3', { read: ElementRef }]
+        }], someDir: [{
+            type: ViewChild,
+            args: [SomeDirective, { read: ElementRef }]
+        }], someDirs: [{
+            type: ViewChildren,
+            args: [SomeDirective, { read: TemplateRef }]
+        }] }); })();
+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: [ViewQueryComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [ViewQueryComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: view_query_read_token.d.ts
+ ****************************************************************************************************/
+import { ElementRef, QueryList, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ViewQueryComponent {
+    myRef: TemplateRef<unknown>;
+    myRefs: QueryList<ElementRef>;
+    someDir: ElementRef;
+    someDirs: QueryList<TemplateRef<unknown>>;
+    static ɵfac: i0.ɵɵFactoryDef<ViewQueryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<ViewQueryComponent, "view-query-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof ViewQueryComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: some.directive.js
+ ****************************************************************************************************/
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SomeDirective {
+}
+SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
+SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[someDir]',
+            }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: some.directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SomeDirective {
+    static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDir]", never, {}, {}, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: content_query_for_directive.js
+ ****************************************************************************************************/
+import { Component, ContentChild, ContentChildren, NgModule } from '@angular/core';
+import { SomeDirective } from './some.directive';
+import * as i0 from "@angular/core";
+export class ContentQueryComponent {
+}
+ContentQueryComponent.ɵfac = function ContentQueryComponent_Factory(t) { return new (t || ContentQueryComponent)(); };
+ContentQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ContentQueryComponent, selector: "content-query-component", queries: [{ propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true }, { propertyName: "someDirList", predicate: SomeDirective }], ngImport: i0, template: { source: `
+    <div><ng-content></ng-content></div>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ContentQueryComponent, [{
+        type: Component,
+        args: [{
+                selector: 'content-query-component',
+                template: `
+    <div><ng-content></ng-content></div>
+  `
+            }]
+    }], null, { someDir: [{
+            type: ContentChild,
+            args: [SomeDirective]
+        }], someDirList: [{
+            type: ContentChildren,
+            args: [SomeDirective]
+        }] }); })();
+export class MyApp {
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: `
+    <content-query-component>
+      <div someDir></div>
+    </content-query-component>
+  `, isInline: true }, directives: [{ type: function () { return ContentQueryComponent; }, selector: "content-query-component" }, { type: function () { return SomeDirective; }, selector: "[someDir]" }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{
+                selector: 'my-app',
+                template: `
+    <content-query-component>
+      <div someDir></div>
+    </content-query-component>
+  `
+            }]
+    }], 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: [SomeDirective, ContentQueryComponent, MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [SomeDirective, ContentQueryComponent, MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: content_query_for_directive.d.ts
+ ****************************************************************************************************/
+import { QueryList } from '@angular/core';
+import { SomeDirective } from './some.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "./some.directive";
+export declare class ContentQueryComponent {
+    someDir: SomeDirective;
+    someDirList: QueryList<SomeDirective>;
+    static ɵfac: i0.ɵɵFactoryDef<ContentQueryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<ContentQueryComponent, "content-query-component", never, {}, {}, ["someDir", "someDirList"], ["*"]>;
+}
+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 i1.SomeDirective, typeof ContentQueryComponent, typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: content_query_for_local_ref.js
+ ****************************************************************************************************/
+import { Component, ContentChild, ContentChildren, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ContentQueryComponent {
+}
+ContentQueryComponent.ɵfac = function ContentQueryComponent_Factory(t) { return new (t || ContentQueryComponent)(); };
+ContentQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ContentQueryComponent, selector: "content-query-component", queries: [{ propertyName: "myRef", first: true, predicate: ["myRef"], descendants: true }, { propertyName: "myRefs", predicate: ["myRef1, myRef2, myRef3"] }], ngImport: i0, template: { source: `
+    <div #myRef></div>
+    <div #myRef1></div>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ContentQueryComponent, [{
+        type: Component,
+        args: [{
+                selector: 'content-query-component',
+                template: `
+    <div #myRef></div>
+    <div #myRef1></div>
+  `
+            }]
+    }], null, { myRef: [{
+            type: ContentChild,
+            args: ['myRef']
+        }], myRefs: [{
+            type: ContentChildren,
+            args: ['myRef1, myRef2, myRef3']
+        }] }); })();
+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: [ContentQueryComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [ContentQueryComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: content_query_for_local_ref.d.ts
+ ****************************************************************************************************/
+import { QueryList } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ContentQueryComponent {
+    myRef: any;
+    myRefs: QueryList<any>;
+    static ɵfac: i0.ɵɵFactoryDef<ContentQueryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<ContentQueryComponent, "content-query-component", never, {}, {}, ["myRef", "myRefs"], never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof ContentQueryComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: some.directive.js
+ ****************************************************************************************************/
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SomeDirective {
+}
+SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
+SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[someDir]',
+            }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: some.directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SomeDirective {
+    static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDir]", never, {}, {}, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: static_content_query.js
+ ****************************************************************************************************/
+import { Component, ContentChild, ElementRef, NgModule } from '@angular/core';
+import { SomeDirective } from './some.directive';
+import * as i0 from "@angular/core";
+export class ContentQueryComponent {
+}
+ContentQueryComponent.ɵfac = function ContentQueryComponent_Factory(t) { return new (t || ContentQueryComponent)(); };
+ContentQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ContentQueryComponent, selector: "content-query-component", queries: [{ propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true, static: true }, { propertyName: "foo", first: true, predicate: ["foo"], descendants: true }], ngImport: i0, template: { source: `
+    <div><ng-content></ng-content></div>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ContentQueryComponent, [{
+        type: Component,
+        args: [{
+                selector: 'content-query-component',
+                template: `
+    <div><ng-content></ng-content></div>
+  `
+            }]
+    }], null, { someDir: [{
+            type: ContentChild,
+            args: [SomeDirective, { static: true }]
+        }], foo: [{
+            type: ContentChild,
+            args: ['foo']
+        }] }); })();
+export class MyApp {
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: `
+    <content-query-component>
+      <div someDir></div>
+    </content-query-component>
+  `, isInline: true }, directives: [{ type: function () { return ContentQueryComponent; }, selector: "content-query-component" }, { type: function () { return SomeDirective; }, selector: "[someDir]" }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{
+                selector: 'my-app',
+                template: `
+    <content-query-component>
+      <div someDir></div>
+    </content-query-component>
+  `
+            }]
+    }], 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: [SomeDirective, ContentQueryComponent, MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [SomeDirective, ContentQueryComponent, MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: static_content_query.d.ts
+ ****************************************************************************************************/
+import { ElementRef } from '@angular/core';
+import { SomeDirective } from './some.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "./some.directive";
+export declare class ContentQueryComponent {
+    someDir: SomeDirective;
+    foo: ElementRef;
+    static ɵfac: i0.ɵɵFactoryDef<ContentQueryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<ContentQueryComponent, "content-query-component", never, {}, {}, ["someDir", "foo"], ["*"]>;
+}
+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 i1.SomeDirective, typeof ContentQueryComponent, typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: some.directive.js
+ ****************************************************************************************************/
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SomeDirective {
+}
+SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
+SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[someDir]',
+            }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: some.directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SomeDirective {
+    static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDir]", never, {}, {}, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: content_query_read_token.js
+ ****************************************************************************************************/
+import { Component, ContentChild, ContentChildren, ElementRef, NgModule, TemplateRef } from '@angular/core';
+import { SomeDirective } from './some.directive';
+import * as i0 from "@angular/core";
+export class ContentQueryComponent {
+}
+ContentQueryComponent.ɵfac = function ContentQueryComponent_Factory(t) { return new (t || ContentQueryComponent)(); };
+ContentQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ContentQueryComponent, selector: "content-query-component", queries: [{ propertyName: "myRef", first: true, predicate: ["myRef"], descendants: true, read: TemplateRef }, { propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true, read: ElementRef }, { propertyName: "myRefs", predicate: ["myRef1, myRef2, myRef3"], read: ElementRef }, { propertyName: "someDirs", predicate: SomeDirective, read: TemplateRef }], ngImport: i0, template: { source: `
+    <div someDir></div>
+    <div #myRef></div>
+    <div #myRef1></div>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ContentQueryComponent, [{
+        type: Component,
+        args: [{
+                selector: 'content-query-component',
+                template: `
+    <div someDir></div>
+    <div #myRef></div>
+    <div #myRef1></div>
+  `
+            }]
+    }], null, { myRef: [{
+            type: ContentChild,
+            args: ['myRef', { read: TemplateRef }]
+        }], myRefs: [{
+            type: ContentChildren,
+            args: ['myRef1, myRef2, myRef3', { read: ElementRef }]
+        }], someDir: [{
+            type: ContentChild,
+            args: [SomeDirective, { read: ElementRef }]
+        }], someDirs: [{
+            type: ContentChildren,
+            args: [SomeDirective, { read: TemplateRef }]
+        }] }); })();
+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: [ContentQueryComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [ContentQueryComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: content_query_read_token.d.ts
+ ****************************************************************************************************/
+import { ElementRef, QueryList, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ContentQueryComponent {
+    myRef: TemplateRef<unknown>;
+    myRefs: QueryList<ElementRef>;
+    someDir: ElementRef;
+    someDirs: QueryList<TemplateRef<unknown>>;
+    static ɵfac: i0.ɵɵFactoryDef<ContentQueryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<ContentQueryComponent, "content-query-component", never, {}, {}, ["myRef", "someDir", "myRefs", "someDirs"], never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof ContentQueryComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/TEST_CASES.json
new file mode 100644
index 0000000000..dc986ab61e
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/TEST_CASES.json
@@ -0,0 +1,123 @@
+{
+  "$schema": "../../../test_case_schema.json",
+  "cases": [
+    {
+      "description": "should support view queries with directives",
+      "inputFiles": [
+        "some.directive.ts",
+        "view_query_for_directive.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid ViewQuery declaration",
+          "files": [
+            "view_query_for_directive.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support view queries with local refs",
+      "inputFiles": [
+        "view_query_for_local_ref.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid ViewQuery declaration",
+          "files": [
+            "view_query_for_local_ref.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support static view queries",
+      "inputFiles": [
+        "some.directive.ts",
+        "static_view_query.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid ViewQuery declaration",
+          "files": [
+            "static_view_query.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support view queries with read tokens specified",
+      "inputFiles": [
+        "some.directive.ts",
+        "view_query_read_token.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid ViewQuery declaration",
+          "files": [
+            "view_query_read_token.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support content queries with directives",
+      "inputFiles": [
+        "some.directive.ts",
+        "content_query_for_directive.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid ContentQuery declaration",
+          "files": [
+            "content_query_for_directive.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support content queries with local refs",
+      "inputFiles": [
+        "content_query_for_local_ref.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid ContentQuery declaration",
+          "files": [
+            "content_query_for_local_ref.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support static content queries",
+      "inputFiles": [
+        "some.directive.ts",
+        "static_content_query.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid ContentQuery declaration",
+          "files": [
+            "static_content_query.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support content queries with read tokens specified",
+      "inputFiles": [
+        "some.directive.ts",
+        "content_query_read_token.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid ContentQuery declaration",
+          "files": [
+            "content_query_read_token.js"
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.js
new file mode 100644
index 0000000000..536faeef07
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.js
@@ -0,0 +1,27 @@
+ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: ContentQueryComponent,
+  selectors: [["content-query-component"]],
+  contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) {
+    if (rf & 1) {
+    $r3$.ɵɵcontentQuery(dirIndex, SomeDirective, true);
+    $r3$.ɵɵcontentQuery(dirIndex, SomeDirective, false);
+    }
+    if (rf & 2) {
+    let $tmp$;
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first);
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirList = $tmp$);
+    }
+  },
+  ngContentSelectors: _c0,
+  decls: 2,
+  vars: 0,
+  template:  function ContentQueryComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵprojectionDef();
+      $r3$.ɵɵelementStart(0, "div");
+      $r3$.ɵɵprojection(1);
+      $r3$.ɵɵelementEnd();
+    }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.ts
new file mode 100644
index 0000000000..9e8a1b745c
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_directive.ts
@@ -0,0 +1,28 @@
+import {Component, ContentChild, ContentChildren, NgModule, QueryList} from '@angular/core';
+import {SomeDirective} from './some.directive';
+
+@Component({
+  selector: 'content-query-component',
+  template: `
+    <div><ng-content></ng-content></div>
+  `
+})
+export class ContentQueryComponent {
+  @ContentChild(SomeDirective) someDir!: SomeDirective;
+  @ContentChildren(SomeDirective) someDirList!: QueryList<SomeDirective>;
+}
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <content-query-component>
+      <div someDir></div>
+    </content-query-component>
+  `
+})
+export class MyApp {
+}
+
+@NgModule({declarations: [SomeDirective, ContentQueryComponent, MyApp]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.js
new file mode 100644
index 0000000000..bf5c990ccb
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.js
@@ -0,0 +1,18 @@
+const $e0_attrs$ = ["myRef"];
+const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
+// ...
+ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  // ...
+  contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) {
+    if (rf & 1) {
+    $r3$.ɵɵcontentQuery(dirIndex, $e0_attrs$, true);
+    $r3$.ɵɵcontentQuery(dirIndex, $e1_attrs$, false);
+    }
+    if (rf & 2) {
+    let $tmp$;
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRef = $tmp$.first);
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRefs = $tmp$);
+    }
+  },
+  // ...
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.ts
new file mode 100644
index 0000000000..1d7298dcc7
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_for_local_ref.ts
@@ -0,0 +1,16 @@
+import {Component, ContentChild, ContentChildren, NgModule, QueryList} from '@angular/core';
+
+@Component({
+  selector: 'content-query-component',
+  template: `
+    <div #myRef></div>
+    <div #myRef1></div>
+  `
+})
+export class ContentQueryComponent {
+  @ContentChild('myRef') myRef: any;
+  @ContentChildren('myRef1, myRef2, myRef3') myRefs!: QueryList<any>;
+}
+@NgModule({declarations: [ContentQueryComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.js
new file mode 100644
index 0000000000..914ea33161
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.js
@@ -0,0 +1,22 @@
+const $e0_attrs$ = ["myRef"];
+const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
+// ...
+ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  // ...
+  contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) {
+    if (rf & 1) {
+      $r3$.ɵɵcontentQuery(dirIndex, $e0_attrs$, true, TemplateRef);
+    $r3$.ɵɵcontentQuery(dirIndex, SomeDirective, true, ElementRef);
+    $r3$.ɵɵcontentQuery(dirIndex, $e1_attrs$, false, ElementRef);
+    $r3$.ɵɵcontentQuery(dirIndex, SomeDirective, false, TemplateRef);
+    }
+    if (rf & 2) {
+    let $tmp$;
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRef = $tmp$.first);
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first);
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRefs = $tmp$);
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirs = $tmp$);
+    }
+  },
+  // ...
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.ts
new file mode 100644
index 0000000000..c24bfb678a
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/content_query_read_token.ts
@@ -0,0 +1,21 @@
+import {Component, ContentChild, ContentChildren, ElementRef, NgModule, QueryList, TemplateRef} from '@angular/core';
+
+import {SomeDirective} from './some.directive';
+
+@Component({
+  selector: 'content-query-component',
+  template: `
+    <div someDir></div>
+    <div #myRef></div>
+    <div #myRef1></div>
+  `
+})
+export class ContentQueryComponent {
+  @ContentChild('myRef', {read: TemplateRef}) myRef!: TemplateRef<unknown>;
+  @ContentChildren('myRef1, myRef2, myRef3', {read: ElementRef}) myRefs!: QueryList<ElementRef>;
+  @ContentChild(SomeDirective, {read: ElementRef}) someDir!: ElementRef;
+  @ContentChildren(SomeDirective, {read: TemplateRef}) someDirs!: QueryList<TemplateRef<unknown>>;
+}
+@NgModule({declarations: [ContentQueryComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/some.directive.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/some.directive.ts
new file mode 100644
index 0000000000..353cf391f6
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/some.directive.ts
@@ -0,0 +1,7 @@
+import {Directive} from '@angular/core';
+
+@Directive({
+  selector: '[someDir]',
+})
+export class SomeDirective {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.js
new file mode 100644
index 0000000000..196aee6cda
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.js
@@ -0,0 +1,27 @@
+ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: ContentQueryComponent,
+  selectors: [["content-query-component"]],
+  contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) {
+    if (rf & 1) {
+    $r3$.ɵɵstaticContentQuery(dirIndex, SomeDirective, true);
+    $r3$.ɵɵcontentQuery(dirIndex, $ref0$, true);
+    }
+    if (rf & 2) {
+    let $tmp$;
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first);
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.foo = $tmp$.first);
+    }
+  },
+  ngContentSelectors: $_c1$,
+  decls: 2,
+  vars: 0,
+  template:  function ContentQueryComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵprojectionDef();
+      $r3$.ɵɵelementStart(0, "div");
+      $r3$.ɵɵprojection(1);
+      $r3$.ɵɵelementEnd();
+    }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.ts
new file mode 100644
index 0000000000..adee664faa
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_content_query.ts
@@ -0,0 +1,29 @@
+import {Component, ContentChild, ElementRef, NgModule} from '@angular/core';
+
+import {SomeDirective} from './some.directive';
+
+@Component({
+  selector: 'content-query-component',
+  template: `
+    <div><ng-content></ng-content></div>
+  `
+})
+export class ContentQueryComponent {
+  @ContentChild(SomeDirective, {static: true}) someDir!: SomeDirective;
+  @ContentChild('foo') foo!: ElementRef;
+}
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <content-query-component>
+      <div someDir></div>
+    </content-query-component>
+  `
+})
+export class MyApp {
+}
+
+@NgModule({declarations: [SomeDirective, ContentQueryComponent, MyApp]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.js
new file mode 100644
index 0000000000..a64ab3d47a
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.js
@@ -0,0 +1,27 @@
+const $refs$ = ["foo"];
+// ...
+ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: ViewQueryComponent,
+  selectors: [["view-query-component"]],
+  viewQuery: function ViewQueryComponent_Query(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵstaticViewQuery(SomeDirective, true);
+      $r3$.ɵɵviewQuery($refs$, true);
+    }
+    if (rf & 2) {
+      let $tmp$;
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first);
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.foo = $tmp$.first);
+    }
+  },
+  decls: 1,
+  vars: 0,
+  consts: [["someDir",""]],
+  template:  function ViewQueryComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "div", 0);
+    }
+  },
+  directives: function () { return [SomeDirective]; },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.ts
new file mode 100644
index 0000000000..ec2e5b6e97
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/static_view_query.ts
@@ -0,0 +1,18 @@
+import {Component, ElementRef, NgModule, ViewChild} from '@angular/core';
+
+import {SomeDirective} from './some.directive';
+
+@Component({
+  selector: 'view-query-component',
+  template: `
+    <div someDir></div>
+  `
+})
+export class ViewQueryComponent {
+  @ViewChild(SomeDirective, {static: true}) someDir!: SomeDirective;
+  @ViewChild('foo') foo!: ElementRef;
+}
+
+@NgModule({declarations: [SomeDirective, ViewQueryComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.js
new file mode 100644
index 0000000000..c5bcbc05ef
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.js
@@ -0,0 +1,25 @@
+ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: ViewQueryComponent,
+  selectors: [["view-query-component"]],
+  viewQuery: function ViewQueryComponent_Query(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵviewQuery(SomeDirective, true);
+      $r3$.ɵɵviewQuery(SomeDirective, true);
+    }
+    if (rf & 2) {
+      let $tmp$;
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first);
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirs = $tmp$);
+    }
+  },
+  decls: 1,
+  vars: 0,
+  consts: [["someDir",""]],
+  template:  function ViewQueryComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "div", 0);
+    }
+  },
+  directives: function () { return [SomeDirective]; },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.ts
new file mode 100644
index 0000000000..4f9b6ac486
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_directive.ts
@@ -0,0 +1,18 @@
+import {Component, NgModule, QueryList, ViewChild, ViewChildren} from '@angular/core';
+
+import {SomeDirective} from './some.directive';
+
+@Component({
+  selector: 'view-query-component',
+  template: `
+    <div someDir></div>
+  `
+})
+export class ViewQueryComponent {
+  @ViewChild(SomeDirective) someDir!: SomeDirective;
+  @ViewChildren(SomeDirective) someDirs!: QueryList<SomeDirective>;
+}
+
+@NgModule({declarations: [SomeDirective, ViewQueryComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.js
new file mode 100644
index 0000000000..2abc0e114b
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.js
@@ -0,0 +1,18 @@
+const $e0_attrs$ = ["myRef"];
+const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
+// ...
+ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  // ...
+  viewQuery: function ViewQueryComponent_Query(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵviewQuery($e0_attrs$, true);
+      $r3$.ɵɵviewQuery($e1_attrs$, true);
+    }
+    if (rf & 2) {
+      let $tmp$;
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRef = $tmp$.first);
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRefs = $tmp$);
+    }
+  },
+  // ...
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.ts
new file mode 100644
index 0000000000..b4be3a022a
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_for_local_ref.ts
@@ -0,0 +1,17 @@
+import {Component, NgModule, QueryList, ViewChild, ViewChildren} from '@angular/core';
+
+@Component({
+  selector: 'view-query-component',
+  template: `
+    <div #myRef></div>
+    <div #myRef1></div>
+  `
+})
+export class ViewQueryComponent {
+  @ViewChild('myRef') myRef: any;
+  @ViewChildren('myRef1, myRef2, myRef3') myRefs!: QueryList<any>;
+}
+
+@NgModule({declarations: [ViewQueryComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.js
new file mode 100644
index 0000000000..d0f708ec7a
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.js
@@ -0,0 +1,22 @@
+const $e0_attrs$ = ["myRef"];
+const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
+// ...
+ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  // ...
+  viewQuery: function ViewQueryComponent_Query(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵviewQuery($e0_attrs$, true, TemplateRef);
+      $r3$.ɵɵviewQuery(SomeDirective, true, ElementRef);
+      $r3$.ɵɵviewQuery($e1_attrs$, true, ElementRef);
+      $r3$.ɵɵviewQuery(SomeDirective, true, TemplateRef);
+    }
+    if (rf & 2) {
+      let $tmp$;
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRef = $tmp$.first);
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first);
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRefs = $tmp$);
+      $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirs = $tmp$);
+    }
+  },
+  // ...
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.ts
new file mode 100644
index 0000000000..db8a881afa
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/queries/view_query_read_token.ts
@@ -0,0 +1,22 @@
+import {Component, ElementRef, NgModule, QueryList, TemplateRef, ViewChild, ViewChildren} from '@angular/core';
+
+import {SomeDirective} from './some.directive';
+
+@Component({
+  selector: 'view-query-component',
+  template: `
+    <div someDir></div>
+    <div #myRef></div>
+    <div #myRef1></div>
+  `
+})
+export class ViewQueryComponent {
+  @ViewChild('myRef', {read: TemplateRef}) myRef!: TemplateRef<unknown>;
+  @ViewChildren('myRef1, myRef2, myRef3', {read: ElementRef}) myRefs!: QueryList<ElementRef>;
+  @ViewChild(SomeDirective, {read: ElementRef}) someDir!: ElementRef;
+  @ViewChildren(SomeDirective, {read: TemplateRef}) someDirs!: QueryList<TemplateRef<unknown>>;
+}
+
+@NgModule({declarations: [ViewQueryComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/GOLDEN_PARTIAL.js
new file mode 100644
index 0000000000..5745641af3
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/GOLDEN_PARTIAL.js
@@ -0,0 +1,339 @@
+/****************************************************************************************************
+ * PARTIAL FILE: for_of.js
+ ****************************************************************************************************/
+import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ForOfDirective {
+    constructor(view, template) {
+        this.view = view;
+        this.template = template;
+    }
+    ngOnChanges(simpleChanges) { }
+}
+ForOfDirective.ɵfac = function ForOfDirective_Factory(t) { return new (t || ForOfDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.TemplateRef)); };
+ForOfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: ForOfDirective, selector: "[forOf]", inputs: { forOf: "forOf" }, usesOnChanges: true, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ForOfDirective, [{
+        type: Directive,
+        args: [{ selector: '[forOf]' }]
+    }], function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, { forOf: [{
+            type: Input
+        }] }); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: for_of.d.ts
+ ****************************************************************************************************/
+import { SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface ForOfContext {
+    $implicit: any;
+    index: number;
+    even: boolean;
+    odd: boolean;
+}
+export declare class ForOfDirective {
+    private view;
+    private template;
+    private previous;
+    constructor(view: ViewContainerRef, template: TemplateRef<any>);
+    forOf: any[];
+    ngOnChanges(simpleChanges: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDef<ForOfDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<ForOfDirective, "[forOf]", never, { "forOf": "forOf"; }, {}, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: svg_embedded_view.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import { ForOfDirective } from './for_of';
+import * as i0 from "@angular/core";
+export class MyComponent {
+    constructor() {
+        this.items = [{ data: 42 }, { data: 42 }];
+    }
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<svg><g *for="let item of items"><circle></circle></g></svg>`, isInline: true }, directives: [{ type: function () { return ForOfDirective; }, selector: "[forOf]", inputs: ["forOf"] }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: `<svg><g *for="let item of items"><circle></circle></g></svg>`
+            }]
+    }], 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, ForOfDirective] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent, ForOfDirective] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: svg_embedded_view.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+import * as i1 from "./for_of";
+export declare class MyComponent {
+    items: {
+        data: 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, typeof i1.ForOfDirective], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: for_of.js
+ ****************************************************************************************************/
+import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ForOfDirective {
+    constructor(view, template) {
+        this.view = view;
+        this.template = template;
+    }
+    ngOnChanges(simpleChanges) { }
+}
+ForOfDirective.ɵfac = function ForOfDirective_Factory(t) { return new (t || ForOfDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.TemplateRef)); };
+ForOfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: ForOfDirective, selector: "[forOf]", inputs: { forOf: "forOf" }, usesOnChanges: true, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ForOfDirective, [{
+        type: Directive,
+        args: [{ selector: '[forOf]' }]
+    }], function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, { forOf: [{
+            type: Input
+        }] }); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: for_of.d.ts
+ ****************************************************************************************************/
+import { SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface ForOfContext {
+    $implicit: any;
+    index: number;
+    even: boolean;
+    odd: boolean;
+}
+export declare class ForOfDirective {
+    private view;
+    private template;
+    private previous;
+    constructor(view: ViewContainerRef, template: TemplateRef<any>);
+    forOf: any[];
+    ngOnChanges(simpleChanges: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDef<ForOfDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<ForOfDirective, "[forOf]", never, { "forOf": "forOf"; }, {}, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: let_variable_and_reference.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import { ForOfDirective } from './for_of';
+import * as i0 from "@angular/core";
+export class MyComponent {
+    constructor() {
+        this.items = [{ name: 'one' }, { name: 'two' }];
+    }
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<ul><li *for="let item of items">{{item.name}}</li></ul>`, isInline: true }, directives: [{ type: function () { return ForOfDirective; }, selector: "[forOf]", inputs: ["forOf"] }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: `<ul><li *for="let item of items">{{item.name}}</li></ul>`
+            }]
+    }], 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, ForOfDirective] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent, ForOfDirective] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: let_variable_and_reference.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+import * as i1 from "./for_of";
+export declare class MyComponent {
+    items: {
+        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, typeof i1.ForOfDirective], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: for_of.js
+ ****************************************************************************************************/
+import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ForOfDirective {
+    constructor(view, template) {
+        this.view = view;
+        this.template = template;
+    }
+    ngOnChanges(simpleChanges) { }
+}
+ForOfDirective.ɵfac = function ForOfDirective_Factory(t) { return new (t || ForOfDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.TemplateRef)); };
+ForOfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: ForOfDirective, selector: "[forOf]", inputs: { forOf: "forOf" }, usesOnChanges: true, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ForOfDirective, [{
+        type: Directive,
+        args: [{ selector: '[forOf]' }]
+    }], function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, { forOf: [{
+            type: Input
+        }] }); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: for_of.d.ts
+ ****************************************************************************************************/
+import { SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface ForOfContext {
+    $implicit: any;
+    index: number;
+    even: boolean;
+    odd: boolean;
+}
+export declare class ForOfDirective {
+    private view;
+    private template;
+    private previous;
+    constructor(view: ViewContainerRef, template: TemplateRef<any>);
+    forOf: any[];
+    ngOnChanges(simpleChanges: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDef<ForOfDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<ForOfDirective, "[forOf]", never, { "forOf": "forOf"; }, {}, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: parent_template_variable.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import { ForOfDirective } from './for_of';
+import * as i0 from "@angular/core";
+export class MyComponent {
+    constructor() {
+        this.items = [
+            { name: 'one', infos: [{ description: '11' }, { description: '12' }] },
+            { name: 'two', infos: [{ description: '21' }, { description: '22' }] }
+        ];
+    }
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
+  <ul>
+    <li *for="let item of items">
+      <div>{{item.name}}</div>
+      <ul>
+        <li *for="let info of item.infos">
+          {{item.name}}: {{info.description}}
+        </li>
+      </ul>
+    </li>
+  </ul>`, isInline: true }, directives: [{ type: function () { return ForOfDirective; }, selector: "[forOf]", inputs: ["forOf"] }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: `
+  <ul>
+    <li *for="let item of items">
+      <div>{{item.name}}</div>
+      <ul>
+        <li *for="let info of item.infos">
+          {{item.name}}: {{info.description}}
+        </li>
+      </ul>
+    </li>
+  </ul>`
+            }]
+    }], 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, ForOfDirective] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent, ForOfDirective] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: parent_template_variable.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+import * as i1 from "./for_of";
+export declare class MyComponent {
+    items: {
+        name: string;
+        infos: {
+            description: 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, typeof i1.ForOfDirective], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: for_of.js
+ ****************************************************************************************************/
+import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ForOfDirective {
+    constructor(view, template) {
+        this.view = view;
+        this.template = template;
+    }
+    ngOnChanges(simpleChanges) { }
+}
+ForOfDirective.ɵfac = function ForOfDirective_Factory(t) { return new (t || ForOfDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.TemplateRef)); };
+ForOfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: ForOfDirective, selector: "[forOf]", inputs: { forOf: "forOf" }, usesOnChanges: true, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ForOfDirective, [{
+        type: Directive,
+        args: [{ selector: '[forOf]' }]
+    }], function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, { forOf: [{
+            type: Input
+        }] }); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: for_of.d.ts
+ ****************************************************************************************************/
+import { SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface ForOfContext {
+    $implicit: any;
+    index: number;
+    even: boolean;
+    odd: boolean;
+}
+export declare class ForOfDirective {
+    private view;
+    private template;
+    private previous;
+    constructor(view: ViewContainerRef, template: TemplateRef<any>);
+    forOf: any[];
+    ngOnChanges(simpleChanges: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDef<ForOfDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<ForOfDirective, "[forOf]", never, { "forOf": "forOf"; }, {}, never>;
+}
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/TEST_CASES.json
new file mode 100644
index 0000000000..ae172788a5
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/TEST_CASES.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "../../../test_case_schema.json",
+  "cases": [
+    {
+      "description": "should support embedded views in the SVG namespace",
+      "inputFiles": [
+        "for_of.ts",
+        "svg_embedded_view.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid component definition",
+          "files": [
+            "svg_embedded_view.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support a let variable and reference",
+      "inputFiles": [
+        "for_of.ts",
+        "let_variable_and_reference.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid component definition",
+          "files": [
+            "let_variable_and_reference.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support accessing parent template variables",
+      "inputFiles": [
+        "for_of.ts",
+        "parent_template_variable.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid component definition",
+          "files": [
+            "parent_template_variable.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should generate correct code for for_of directive",
+      "inputFiles": [
+        "for_of.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid directive definition",
+          "files": [
+            {
+              "generated": "for_of.js",
+              "expected": "for_of_def.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Invalid directive factory",
+          "files": [
+            {
+              "generated": "for_of.js",
+              "expected": "for_of_fac.js"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of.ts
new file mode 100644
index 0000000000..bebcf38639
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of.ts
@@ -0,0 +1,19 @@
+import {Directive, Input, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core';
+
+export interface ForOfContext {
+  $implicit: any;
+  index: number;
+  even: boolean;
+  odd: boolean;
+}
+
+@Directive({selector: '[forOf]'})
+export class ForOfDirective {
+  private previous!: any[];
+
+  constructor(private view: ViewContainerRef, private template: TemplateRef<any>) {}
+
+  @Input() forOf!: any[];
+
+  ngOnChanges(simpleChanges: SimpleChanges) {}
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_def.js
new file mode 100644
index 0000000000..baa02f91cf
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_def.js
@@ -0,0 +1,3 @@
+ForOfDirective.ɵfac = function ForOfDirective_Factory(t) {
+  return new (t || ForOfDirective)($r3$.ɵɵdirectiveInject($r3$.ViewContainerRef), $r3$.ɵɵdirectiveInject($r3$.TemplateRef));
+};
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_fac.js
new file mode 100644
index 0000000000..9d28c4b7f0
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/for_of_fac.js
@@ -0,0 +1,6 @@
+ForOfDirective.ɵdir = $r3$.ɵɵdefineDirective({
+  type: ForOfDirective,
+  selectors: [["", "forOf", ""]],
+  inputs: {forOf: "forOf"},
+  features: [$r3$.ɵɵNgOnChangesFeature]
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.js
new file mode 100644
index 0000000000..1302e3bde3
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.js
@@ -0,0 +1,33 @@
+function MyComponent_li_1_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵelementStart(0, "li");
+    $r3$.ɵɵtext(1);
+    $r3$.ɵɵelementEnd();
+  }
+  if (rf & 2) {
+    const $item$ = ctx.$implicit;
+    $r3$.ɵɵadvance(1);
+    $r3$.ɵɵtextInterpolate($item$.name);
+  }
+}
+// ...
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyComponent,
+  selectors: [["my-component"]],
+  decls: 2,
+  vars: 1,
+  consts: [[__AttributeMarker.Template__, "for", "forOf"]],
+  template:  function MyComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelementStart(0, "ul");
+      $r3$.ɵɵtemplate(1, MyComponent_li_1_Template, 2, 1, "li", 0);
+      $r3$.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+      $r3$.ɵɵadvance(1);
+      $r3$.ɵɵproperty("forOf", ctx.items);
+    }
+  },
+  directives: function() { return [ForOfDirective]; },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.ts
new file mode 100644
index 0000000000..6ac596ba76
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/let_variable_and_reference.ts
@@ -0,0 +1,14 @@
+import {Component, NgModule} from '@angular/core';
+import {ForOfDirective} from './for_of';
+
+@Component({
+  selector: 'my-component',
+  template: `<ul><li *for="let item of items">{{item.name}}</li></ul>`
+})
+export class MyComponent {
+  items = [{name: 'one'}, {name: 'two'}];
+}
+
+@NgModule({declarations: [MyComponent, ForOfDirective]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.js
new file mode 100644
index 0000000000..2f601d4a66
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.js
@@ -0,0 +1,55 @@
+function MyComponent_li_1_li_4_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵelementStart(0, "li");
+    $r3$.ɵɵtext(1);
+    $r3$.ɵɵelementEnd();
+  }
+  if (rf & 2) {
+    const $info$ = ctx.$implicit;
+    const $item$ = $r3$.ɵɵnextContext().$implicit;
+    $r3$.ɵɵadvance(1);
+    $r3$.ɵɵtextInterpolate2(" ", $item$.name, ": ", $info$.description, " ");
+  }
+}
+
+function MyComponent_li_1_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵelementStart(0, "li");
+    $r3$.ɵɵelementStart(1, "div");
+    $r3$.ɵɵtext(2);
+    $r3$.ɵɵelementEnd();
+    $r3$.ɵɵelementStart(3, "ul");
+    $r3$.ɵɵtemplate(4, MyComponent_li_1_li_4_Template, 2, 2, "li", 0);
+    $r3$.ɵɵelementEnd();
+    $r3$.ɵɵelementEnd();
+  }
+  if (rf & 2) {
+    const $item$ = ctx.$implicit;
+    $r3$.ɵɵadvance(2);
+    $r3$.ɵɵtextInterpolate(IDENT.name);
+    $r3$.ɵɵadvance(2);
+    $r3$.ɵɵproperty("forOf", IDENT.infos);
+  }
+}
+
+// ...
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyComponent,
+  selectors: [["my-component"]],
+  decls: 2,
+  vars: 1,
+  consts: [[__AttributeMarker.Template__, "for", "forOf"]],
+  template:  function MyComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelementStart(0, "ul");
+      $r3$.ɵɵtemplate(1, MyComponent_li_1_Template, 5, 2, "li", 0);
+      $r3$.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+      $r3$.ɵɵadvance(1);
+      $r3$.ɵɵproperty("forOf", ctx.items);
+    }
+  },
+  directives: function () { return [ForOfDirective]; },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.ts
new file mode 100644
index 0000000000..c7d6090002
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/parent_template_variable.ts
@@ -0,0 +1,27 @@
+import {Component, NgModule} from '@angular/core';
+import {ForOfDirective} from './for_of';
+
+@Component({
+  selector: 'my-component',
+  template: `
+  <ul>
+    <li *for="let item of items">
+      <div>{{item.name}}</div>
+      <ul>
+        <li *for="let info of item.infos">
+          {{item.name}}: {{info.description}}
+        </li>
+      </ul>
+    </li>
+  </ul>`
+})
+export class MyComponent {
+  items = [
+    {name: 'one', infos: [{description: '11'}, {description: '12'}]},
+    {name: 'two', infos: [{description: '21'}, {description: '22'}]}
+  ];
+}
+
+@NgModule({declarations: [MyComponent, ForOfDirective]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.js
new file mode 100644
index 0000000000..96ad09c339
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.js
@@ -0,0 +1,30 @@
+function MyComponent__svg_g_1_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵnamespaceSVG();
+    $r3$.ɵɵelementStart(0,"g");
+    $r3$.ɵɵelement(1,"circle");
+    $r3$.ɵɵelementEnd();
+  }
+}
+// ...
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyComponent,
+  selectors: [["my-component"]],
+  decls: 2,
+  vars: 1,
+  consts: [[__AttributeMarker.Template__, "for", "forOf"]],
+  template:  function MyComponent_Template(rf, ctx){
+    if (rf & 1) {
+      $r3$.ɵɵnamespaceSVG();
+      $r3$.ɵɵelementStart(0,"svg");
+      $r3$.ɵɵtemplate(1, MyComponent__svg_g_1_Template, 2, 0, "g", 0);
+      $r3$.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+      $r3$.ɵɵadvance(1);
+      $r3$.ɵɵproperty("forOf", ctx.items);
+    }
+  },
+  directives: function() { return [ForOfDirective]; },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.ts
new file mode 100644
index 0000000000..a7d1843123
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/template_variables/svg_embedded_view.ts
@@ -0,0 +1,14 @@
+import {Component, NgModule} from '@angular/core';
+import {ForOfDirective} from './for_of';
+
+@Component({
+  selector: 'my-component',
+  template: `<svg><g *for="let item of items"><circle></circle></g></svg>`
+})
+export class MyComponent {
+  items = [{data: 42}, {data: 42}];
+}
+
+@NgModule({declarations: [MyComponent, ForOfDirective]})
+export class MyModule {
+}
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
new file mode 100644
index 0000000000..cf94fcd495
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/GOLDEN_PARTIAL.js
@@ -0,0 +1,611 @@
+/****************************************************************************************************
+ * PARTIAL FILE: directives.js
+ ****************************************************************************************************/
+import { Component, Directive, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ChildComponent {
+}
+ChildComponent.ɵfac = function ChildComponent_Factory(t) { return new (t || ChildComponent)(); };
+ChildComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ChildComponent, selector: "child", ngImport: i0, template: { source: 'child-view', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ChildComponent, [{
+        type: Component,
+        args: [{ selector: 'child', template: 'child-view' }]
+    }], null, null); })();
+export class SomeDirective {
+}
+SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
+SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[some-directive]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
+        type: Directive,
+        args: [{ selector: '[some-directive]' }]
+    }], null, null); })();
+export class MyComponent {
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '<child some-directive></child>!', isInline: true }, directives: [{ type: ChildComponent, selector: "child" }, { type: SomeDirective, selector: "[some-directive]" }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{ selector: 'my-component', template: '<child some-directive></child>!' }]
+    }], 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: [ChildComponent, SomeDirective, MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [ChildComponent, SomeDirective, MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: directives.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class ChildComponent {
+    static ɵfac: i0.ɵɵFactoryDef<ChildComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<ChildComponent, "child", never, {}, {}, never, never>;
+}
+export declare class SomeDirective {
+    static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[some-directive]", 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 ChildComponent, typeof SomeDirective, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: complex_selectors.js
+ ****************************************************************************************************/
+import { Directive, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SomeDirective {
+}
+SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
+SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "div.foo[some-directive]:not([title]):not(.baz)", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
+        type: Directive,
+        args: [{ selector: 'div.foo[some-directive]:not([title]):not(.baz)' }]
+    }], null, null); })();
+export class OtherDirective {
+}
+OtherDirective.ɵfac = function OtherDirective_Factory(t) { return new (t || OtherDirective)(); };
+OtherDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: OtherDirective, selector: ":not(span[title]):not(.baz)", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(OtherDirective, [{
+        type: Directive,
+        args: [{ selector: ':not(span[title]):not(.baz)' }]
+    }], 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: [SomeDirective, OtherDirective] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [SomeDirective, OtherDirective] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: complex_selectors.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SomeDirective {
+    static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "div.foo[some-directive]:not([title]):not(.baz)", never, {}, {}, never>;
+}
+export declare class OtherDirective {
+    static ɵfac: i0.ɵɵFactoryDef<OtherDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<OtherDirective, ":not(span[title]):not(.baz)", never, {}, {}, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof SomeDirective, typeof OtherDirective], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: id_selector.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SomeComponent {
+}
+SomeComponent.ɵfac = function SomeComponent_Factory(t) { return new (t || SomeComponent)(); };
+SomeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SomeComponent, selector: "#my-app", ngImport: i0, template: { source: '', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeComponent, [{
+        type: Component,
+        args: [{ selector: '#my-app', template: '' }]
+    }], 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: [SomeComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [SomeComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: id_selector.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SomeComponent {
+    static ɵfac: i0.ɵɵFactoryDef<SomeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<SomeComponent, "#my-app", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof SomeComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: no_selector.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class EmptyOutletComponent {
+}
+EmptyOutletComponent.ɵfac = function EmptyOutletComponent_Factory(t) { return new (t || EmptyOutletComponent)(); };
+EmptyOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: EmptyOutletComponent, selector: "ng-component", ngImport: i0, template: { source: '<router-outlet></router-outlet>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(EmptyOutletComponent, [{
+        type: Component,
+        args: [{ template: '<router-outlet></router-outlet>' }]
+    }], 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: [EmptyOutletComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [EmptyOutletComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: no_selector.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+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 ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: view_tokens_di.js
+ ****************************************************************************************************/
+import { ChangeDetectorRef, Component, ElementRef, NgModule, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+    constructor(el, vcr, cdr) {
+        this.el = el;
+        this.vcr = vcr;
+        this.cdr = cdr;
+    }
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{ selector: 'my-component', template: '' }]
+    }], function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, 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: view_tokens_di.d.ts
+ ****************************************************************************************************/
+import { ChangeDetectorRef, ElementRef, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    el: ElementRef;
+    vcr: ViewContainerRef;
+    cdr: ChangeDetectorRef;
+    constructor(el: ElementRef, vcr: ViewContainerRef, cdr: ChangeDetectorRef);
+    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: structural_directives.js
+ ****************************************************************************************************/
+import { Component, Directive, NgModule, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export class IfDirective {
+    constructor(template) { }
+}
+IfDirective.ɵfac = function IfDirective_Factory(t) { return new (t || IfDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef)); };
+IfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: IfDirective, selector: "[if]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(IfDirective, [{
+        type: Directive,
+        args: [{ selector: '[if]' }]
+    }], function () { return [{ type: i0.TemplateRef }]; }, null); })();
+export class MyComponent {
+    constructor() {
+        this.salutation = 'Hello';
+    }
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '<ul #foo><li *if>{{salutation}} {{foo}}</li></ul>', isInline: true }, directives: [{ type: IfDirective, selector: "[if]" }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{ selector: 'my-component', template: '<ul #foo><li *if>{{salutation}} {{foo}}</li></ul>' }]
+    }], 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: [IfDirective, MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [IfDirective, MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: structural_directives.d.ts
+ ****************************************************************************************************/
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class IfDirective {
+    constructor(template: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDef<IfDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<IfDirective, "[if]", never, {}, {}, never>;
+}
+export declare class MyComponent {
+    salutation: 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 IfDirective, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: array_literals.js
+ ****************************************************************************************************/
+import { Component, Input, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComp {
+}
+MyComp.ɵfac = function MyComp_Factory(t) { return new (t || MyComp)(); };
+MyComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComp, selector: "my-comp", inputs: { names: "names" }, ngImport: i0, template: { source: `
+    <p>{{ names[0] }}</p>
+    <p>{{ names[1] }}</p>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComp, [{
+        type: Component,
+        args: [{
+                selector: 'my-comp',
+                template: `
+    <p>{{ names[0] }}</p>
+    <p>{{ names[1] }}</p>
+  `
+            }]
+    }], null, { names: [{
+            type: Input
+        }] }); })();
+export class MyApp {
+    constructor() {
+        this.customName = 'Bess';
+    }
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: `
+  <my-comp [names]="['Nancy', customName]"></my-comp>
+`, isInline: true }, directives: [{ type: MyComp, selector: "my-comp", inputs: ["names"] }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{
+                selector: 'my-app',
+                template: `
+  <my-comp [names]="['Nancy', customName]"></my-comp>
+`
+            }]
+    }], 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: [MyComp, MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComp, MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: array_literals.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComp {
+    names: string[];
+    static ɵfac: i0.ɵɵFactoryDef<MyComp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComp, "my-comp", never, { "names": "names"; }, {}, never, never>;
+}
+export declare class MyApp {
+    customName: string;
+    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 MyComp, typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: array_literals_many.js
+ ****************************************************************************************************/
+import { Component, Input, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComp {
+}
+MyComp.ɵfac = function MyComp_Factory(t) { return new (t || MyComp)(); };
+MyComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComp, selector: "my-comp", inputs: { names: "names" }, ngImport: i0, template: { source: `
+    {{ names[0] }}
+    {{ names[1] }}
+    {{ names[3] }}
+    {{ names[4] }}
+    {{ names[5] }}
+    {{ names[6] }}
+    {{ names[7] }}
+    {{ names[8] }}
+    {{ names[9] }}
+    {{ names[10] }}
+    {{ names[11] }}
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComp, [{
+        type: Component,
+        args: [{
+                selector: 'my-comp',
+                template: `
+    {{ names[0] }}
+    {{ names[1] }}
+    {{ names[3] }}
+    {{ names[4] }}
+    {{ names[5] }}
+    {{ names[6] }}
+    {{ names[7] }}
+    {{ names[8] }}
+    {{ names[9] }}
+    {{ names[10] }}
+    {{ names[11] }}
+  `
+            }]
+    }], null, { names: [{
+            type: Input
+        }] }); })();
+export class MyApp {
+    constructor() {
+        this.n0 = 'a';
+        this.n1 = 'b';
+        this.n2 = 'c';
+        this.n3 = 'd';
+        this.n4 = 'e';
+        this.n5 = 'f';
+        this.n6 = 'g';
+        this.n7 = 'h';
+        this.n8 = 'i';
+    }
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: `
+  <my-comp [names]="['start-', n0, n1, n2, n3, n4, '-middle-', n5, n6, n7, n8, '-end']">
+  </my-comp>
+`, isInline: true }, directives: [{ type: MyComp, selector: "my-comp", inputs: ["names"] }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{
+                selector: 'my-app',
+                template: `
+  <my-comp [names]="['start-', n0, n1, n2, n3, n4, '-middle-', n5, n6, n7, n8, '-end']">
+  </my-comp>
+`
+            }]
+    }], 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: [MyComp, MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComp, MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: array_literals_many.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComp {
+    names: string[];
+    static ɵfac: i0.ɵɵFactoryDef<MyComp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComp, "my-comp", never, { "names": "names"; }, {}, never, never>;
+}
+export declare class MyApp {
+    n0: string;
+    n1: string;
+    n2: string;
+    n3: string;
+    n4: string;
+    n5: string;
+    n6: string;
+    n7: string;
+    n8: string;
+    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 MyComp, typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: object_literals.js
+ ****************************************************************************************************/
+import { Component, Input, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ObjectComp {
+}
+ObjectComp.ɵfac = function ObjectComp_Factory(t) { return new (t || ObjectComp)(); };
+ObjectComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ObjectComp, selector: "object-comp", inputs: { config: "config" }, ngImport: i0, template: { source: `
+    <p> {{ config['duration'] }} </p>
+    <p> {{ config.animation }} </p>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ObjectComp, [{
+        type: Component,
+        args: [{
+                selector: 'object-comp',
+                template: `
+    <p> {{ config['duration'] }} </p>
+    <p> {{ config.animation }} </p>
+  `
+            }]
+    }], null, { config: [{
+            type: Input
+        }] }); })();
+export class MyApp {
+    constructor() {
+        this.name = 'slide';
+    }
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: `
+  <object-comp [config]="{'duration': 500, animation: name}"></object-comp>
+`, isInline: true }, directives: [{ type: ObjectComp, selector: "object-comp", inputs: ["config"] }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{
+                selector: 'my-app',
+                template: `
+  <object-comp [config]="{'duration': 500, animation: name}"></object-comp>
+`
+            }]
+    }], 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: [ObjectComp, MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [ObjectComp, MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: object_literals.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class ObjectComp {
+    config: {
+        [key: string]: any;
+    };
+    static ɵfac: i0.ɵɵFactoryDef<ObjectComp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<ObjectComp, "object-comp", never, { "config": "config"; }, {}, never, never>;
+}
+export declare class MyApp {
+    name: string;
+    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 ObjectComp, typeof MyApp], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: literal_nested_expression.js
+ ****************************************************************************************************/
+import { Component, Input, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class NestedComp {
+}
+NestedComp.ɵfac = function NestedComp_Factory(t) { return new (t || NestedComp)(); };
+NestedComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: NestedComp, selector: "nested-comp", inputs: { config: "config" }, ngImport: i0, template: { source: `
+    <p> {{ config.animation }} </p>
+    <p> {{config.actions[0].opacity }} </p>
+    <p> {{config.actions[1].duration }} </p>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(NestedComp, [{
+        type: Component,
+        args: [{
+                selector: 'nested-comp',
+                template: `
+    <p> {{ config.animation }} </p>
+    <p> {{config.actions[0].opacity }} </p>
+    <p> {{config.actions[1].duration }} </p>
+  `
+            }]
+    }], null, { config: [{
+            type: Input
+        }] }); })();
+export class MyApp {
+    constructor() {
+        this.name = 'slide';
+        this.duration = 100;
+    }
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: `
+  <nested-comp [config]="{animation: name, actions: [{ opacity: 0, duration: 0}, {opacity: 1, duration: duration }]}">
+  </nested-comp>
+`, isInline: true }, directives: [{ type: NestedComp, selector: "nested-comp", inputs: ["config"] }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{
+                selector: 'my-app',
+                template: `
+  <nested-comp [config]="{animation: name, actions: [{ opacity: 0, duration: 0}, {opacity: 1, duration: duration }]}">
+  </nested-comp>
+`
+            }]
+    }], 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: [NestedComp, MyApp] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [NestedComp, MyApp] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: literal_nested_expression.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class NestedComp {
+    config: {
+        [key: string]: any;
+    };
+    static ɵfac: i0.ɵɵFactoryDef<NestedComp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<NestedComp, "nested-comp", never, { "config": "config"; }, {}, never, never>;
+}
+export declare class MyApp {
+    name: string;
+    duration: number;
+    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 NestedComp, typeof MyApp], 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/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/TEST_CASES.json
new file mode 100644
index 0000000000..e4de00987e
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/TEST_CASES.json
@@ -0,0 +1,277 @@
+{
+  "$schema": "../../../test_case_schema.json",
+  "cases": [
+    {
+      "description": "should instantiate directives",
+      "inputFiles": [
+        "directives.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect ChildComponent.ɵcmp",
+          "files": [
+            {
+              "expected": "directives_child_component_def.js",
+              "generated": "directives.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect ChildComponent.ɵfac",
+          "files": [
+            {
+              "expected": "directives_child_component_fac.js",
+              "generated": "directives.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect SomeDirective.ɵdir",
+          "files": [
+            {
+              "expected": "directives_some_directive_dir.js",
+              "generated": "directives.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect SomeDirective.ɵfac",
+          "files": [
+            {
+              "expected": "directives_some_directive_fac.js",
+              "generated": "directives.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect MyComponentDefinition.ɵcmp",
+          "files": [
+            {
+              "expected": "directives_my_component_def.js",
+              "generated": "directives.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect MyComponentDefinition.ɵfac",
+          "files": [
+            {
+              "expected": "directives_my_component_fac.js",
+              "generated": "directives.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support complex selectors",
+      "inputFiles": [
+        "complex_selectors.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect SomeDirective.ɵdir",
+          "files": [
+            {
+              "expected": "complex_selectors_some_directive_dir.js",
+              "generated": "complex_selectors.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect SomeDirective.ɵfac",
+          "files": [
+            {
+              "expected": "complex_selectors_some_directive_fac.js",
+              "generated": "complex_selectors.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect OtherDirective.ɵdir",
+          "files": [
+            {
+              "expected": "complex_selectors_other_directive_dir.js",
+              "generated": "complex_selectors.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect OtherDirective.ɵfac",
+          "files": [
+            {
+              "expected": "complex_selectors_other_directive_fac.js",
+              "generated": "complex_selectors.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should convert #my-app selector to [\"\", \"id\", \"my-app\"]",
+      "inputFiles": [
+        "id_selector.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect SomeComponent.ɵcomp",
+          "files": [
+            "id_selector.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support components without selector",
+      "inputFiles": [
+        "no_selector.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect EmptyOutletComponent.ɵcmp",
+          "files": [
+            {
+              "expected": "no_selector_def.js",
+              "generated": "no_selector.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect EmptyOutletComponent.ɵfac",
+          "files": [
+            {
+              "expected": "no_selector_fac.js",
+              "generated": "no_selector.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should not treat ElementRef, ViewContainerRef, or ChangeDetectorRef specially when injecting",
+      "inputFiles": [
+        "view_tokens_di.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect MyComponent.ɵcmp",
+          "files": [
+            {
+              "expected": "view_tokens_di_def.js",
+              "generated": "view_tokens_di.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect MyComponent.ɵfac",
+          "files": [
+            {
+              "expected": "view_tokens_di_fac.js",
+              "generated": "view_tokens_di.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support structural directives",
+      "inputFiles": [
+        "structural_directives.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect IfDirective.ɵdir",
+          "files": [
+            {
+              "expected": "structural_directives_if_directive_def.js",
+              "generated": "structural_directives.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect IfDirective.ɵfac",
+          "files": [
+            {
+              "expected": "structural_directives_if_directive_fac.js",
+              "generated": "structural_directives.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect MyComponent.ɵcmp",
+          "files": [
+            {
+              "expected": "structural_directives_my_component_def.js",
+              "generated": "structural_directives.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect MyComponent.ɵfac",
+          "files": [
+            {
+              "expected": "structural_directives_my_component_fac.js",
+              "generated": "structural_directives.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support array literals",
+      "inputFiles": [
+        "array_literals.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid array emit",
+          "files": [
+            "array_literals.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support 9+ bindings in array literals",
+      "inputFiles": [
+        "array_literals_many.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid array binding",
+          "files": [
+            "array_literals_many.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support object literals",
+      "inputFiles": [
+        "object_literals.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid object literal binding",
+          "files": [
+            "object_literals.js"
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should support expressions nested deeply in object/array literals",
+      "inputFiles": [
+        "literal_nested_expression.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid array/object literal binding",
+          "files": [
+            "literal_nested_expression.js"
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.js
new file mode 100644
index 0000000000..9fe6e681be
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.js
@@ -0,0 +1,19 @@
+const $e0_ff$ = function ($v$) { return ["Nancy", $v$]; };
+// ...
+MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [["my-app"]],
+  decls: 1,
+  vars: 3,
+  consts: [[__AttributeMarker.Bindings__, "names"]],
+  template:  function MyApp_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "my-comp", 0);
+    }
+    if (rf & 2) {
+      $r3$.ɵɵproperty("names", $r3$.ɵɵpureFunction1(1, $e0_ff$, ctx.customName));
+    }
+  },
+ directives: [MyComp],
+ encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.ts
new file mode 100644
index 0000000000..4624b8b8b0
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals.ts
@@ -0,0 +1,26 @@
+import {Component, Input, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'my-comp',
+  template: `
+    <p>{{ names[0] }}</p>
+    <p>{{ names[1] }}</p>
+  `
+})
+export class MyComp {
+  @Input() names!: string[];
+}
+
+@Component({
+  selector: 'my-app',
+  template: `
+  <my-comp [names]="['Nancy', customName]"></my-comp>
+`
+})
+export class MyApp {
+  customName = 'Bess';
+}
+
+@NgModule({declarations: [MyComp, MyApp]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.js
new file mode 100644
index 0000000000..318af844eb
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.js
@@ -0,0 +1,22 @@
+const $e0_ff$ = function ($v0$, $v1$, $v2$, $v3$, $v4$, $v5$, $v6$, $v7$, $v8$) {
+  return ["start-", $v0$, $v1$, $v2$, $v3$, $v4$, "-middle-", $v5$, $v6$, $v7$, $v8$, "-end"];
+}
+// ...
+MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [["my-app"]],
+  decls: 1,
+  vars: 11,
+  consts: [[__AttributeMarker.Bindings__, "names"]],
+  template:  function MyApp_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "my-comp", 0);
+    }
+    if (rf & 2) {
+      $r3$.ɵɵproperty("names",
+          $r3$.ɵɵpureFunctionV(1, $e0_ff$, [ctx.n0, ctx.n1, ctx.n2, ctx.n3, ctx.n4, ctx.n5, ctx.n6, ctx.n7, ctx.n8]));
+    }
+  },
+  directives: [MyComp],
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.ts
new file mode 100644
index 0000000000..bce9395803
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/array_literals_many.ts
@@ -0,0 +1,44 @@
+import {Component, Input, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'my-comp',
+  template: `
+    {{ names[0] }}
+    {{ names[1] }}
+    {{ names[3] }}
+    {{ names[4] }}
+    {{ names[5] }}
+    {{ names[6] }}
+    {{ names[7] }}
+    {{ names[8] }}
+    {{ names[9] }}
+    {{ names[10] }}
+    {{ names[11] }}
+  `
+})
+export class MyComp {
+  @Input() names!: string[];
+}
+
+@Component({
+  selector: 'my-app',
+  template: `
+  <my-comp [names]="['start-', n0, n1, n2, n3, n4, '-middle-', n5, n6, n7, n8, '-end']">
+  </my-comp>
+`
+})
+export class MyApp {
+  n0 = 'a';
+  n1 = 'b';
+  n2 = 'c';
+  n3 = 'd';
+  n4 = 'e';
+  n5 = 'f';
+  n6 = 'g';
+  n7 = 'h';
+  n8 = 'i';
+}
+
+@NgModule({declarations: [MyComp, MyApp]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors.ts
new file mode 100644
index 0000000000..759de78bb8
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors.ts
@@ -0,0 +1,13 @@
+import {Directive, NgModule} from '@angular/core';
+
+@Directive({selector: 'div.foo[some-directive]:not([title]):not(.baz)'})
+export class SomeDirective {
+}
+
+@Directive({selector: ':not(span[title]):not(.baz)'})
+export class OtherDirective {
+}
+
+@NgModule({declarations: [SomeDirective, OtherDirective]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_dir.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_dir.js
new file mode 100644
index 0000000000..98b8babbf1
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_dir.js
@@ -0,0 +1,4 @@
+OtherDirective.ɵdir = $r3$.ɵɵdefineDirective({
+  type: OtherDirective,
+  selectors: [["", __SelectorFlags.NOT__|__SelectorFlags.ELEMENT__, "span", "title", "", __SelectorFlags.NOT__|__SelectorFlags.CLASS__, "baz"]]
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_fac.js
new file mode 100644
index 0000000000..ac59cc15aa
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_other_directive_fac.js
@@ -0,0 +1 @@
+OtherDirective.ɵfac = function OtherDirective_Factory(t) {return new (t || OtherDirective)(); };
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_dir.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_dir.js
new file mode 100644
index 0000000000..dcf314b99d
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_dir.js
@@ -0,0 +1,4 @@
+SomeDirective.ɵdir = $r3$.ɵɵdefineDirective({
+  type: SomeDirective,
+  selectors: [["div", "some-directive", "", __SelectorFlags.CLASS__, "foo", __SelectorFlags.NOT__|__SelectorFlags.ATTRIBUTE__, "title", "", __SelectorFlags.NOT__|__SelectorFlags.CLASS__, "baz"]]
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_fac.js
new file mode 100644
index 0000000000..8a2480188c
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/complex_selectors_some_directive_fac.js
@@ -0,0 +1 @@
+SomeDirective.ɵfac = function SomeDirective_Factory(t) {return new (t || SomeDirective)(); };
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives.ts
new file mode 100644
index 0000000000..65000fd059
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives.ts
@@ -0,0 +1,17 @@
+import {Component, Directive, NgModule} from '@angular/core';
+
+@Component({selector: 'child', template: 'child-view'})
+export class ChildComponent {
+}
+
+@Directive({selector: '[some-directive]'})
+export class SomeDirective {
+}
+
+@Component({selector: 'my-component', template: '<child some-directive></child>!'})
+export class MyComponent {
+}
+
+@NgModule({declarations: [ChildComponent, SomeDirective, MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_def.js
new file mode 100644
index 0000000000..2c6f81ef0e
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_def.js
@@ -0,0 +1,12 @@
+ChildComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: ChildComponent,
+  selectors: [["child"]],
+  decls: 1,
+  vars: 0,
+  template:  function ChildComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵtext(0, "child-view");
+    }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_fac.js
new file mode 100644
index 0000000000..c885c10b3f
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_child_component_fac.js
@@ -0,0 +1 @@
+ChildComponent.ɵfac = function ChildComponent_Factory(t) { return new (t || ChildComponent)(); };
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_def.js
new file mode 100644
index 0000000000..c9f4bcaf4d
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_def.js
@@ -0,0 +1,15 @@
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyComponent,
+  selectors: [["my-component"]],
+  decls: 2,
+  vars: 0,
+  consts: [["some-directive", ""]],
+  template:  function MyComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "child", 0);
+      $r3$.ɵɵtext(1, "!");
+    }
+  },
+  directives: [ChildComponent, SomeDirective],
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_fac.js
new file mode 100644
index 0000000000..57da070177
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_my_component_fac.js
@@ -0,0 +1 @@
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_dir.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_dir.js
new file mode 100644
index 0000000000..ca8794d1c8
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_dir.js
@@ -0,0 +1,4 @@
+SomeDirective.ɵdir = $r3$.ɵɵdefineDirective({
+  type: SomeDirective,
+  selectors: [["", "some-directive", ""]]
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_fac.js
new file mode 100644
index 0000000000..8a2480188c
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/directives_some_directive_fac.js
@@ -0,0 +1 @@
+SomeDirective.ɵfac = function SomeDirective_Factory(t) {return new (t || SomeDirective)(); };
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.js
new file mode 100644
index 0000000000..526db9a4f1
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.js
@@ -0,0 +1,5 @@
+SomeComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: SomeComponent,
+  selectors: [["", "id", "my-app"]],
+  // ...
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.ts
new file mode 100644
index 0000000000..e652cb4ece
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/id_selector.ts
@@ -0,0 +1,9 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({selector: '#my-app', template: ''})
+export class SomeComponent {
+}
+
+@NgModule({declarations: [SomeComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.js
new file mode 100644
index 0000000000..45abe32206
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.js
@@ -0,0 +1,23 @@
+const $c0$ = function () { return {opacity: 0, duration: 0}; };
+const $e0_ff$ = function ($v$) { return {opacity: 1, duration: $v$}; };
+const $e0_ff_1$ = function ($v1$, $v2$) { return [$v1$, $v2$]; };
+const $e0_ff_2$ = function ($v1$, $v2$) { return {animation: $v1$, actions: $v2$}; };
+// ...
+MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [["my-app"]],
+  decls: 1,
+  vars: 10,
+  consts: [[__AttributeMarker.Bindings__, "config"]],
+  template:  function MyApp_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "nested-comp", 0);
+    }
+    if (rf & 2) {
+      $r3$.ɵɵproperty("config",
+        $r3$.ɵɵpureFunction2(7, $e0_ff_2$, ctx.name, $r3$.ɵɵpureFunction2(4, $e0_ff_1$, $r3$.ɵɵpureFunction0(1, $c0$), $r3$.ɵɵpureFunction1(2, $e0_ff$, ctx.duration))));
+    }
+  },
+  directives: [NestedComp],
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.ts
new file mode 100644
index 0000000000..2e3241eb8d
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/literal_nested_expression.ts
@@ -0,0 +1,29 @@
+import {Component, Input, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'nested-comp',
+  template: `
+    <p> {{ config.animation }} </p>
+    <p> {{config.actions[0].opacity }} </p>
+    <p> {{config.actions[1].duration }} </p>
+  `
+})
+export class NestedComp {
+  @Input() config!: {[key: string]: any};
+}
+
+@Component({
+  selector: 'my-app',
+  template: `
+  <nested-comp [config]="{animation: name, actions: [{ opacity: 0, duration: 0}, {opacity: 1, duration: duration }]}">
+  </nested-comp>
+`
+})
+export class MyApp {
+  name = 'slide';
+  duration = 100;
+}
+
+@NgModule({declarations: [NestedComp, MyApp]})
+export class 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
new file mode 100644
index 0000000000..74aafb0d52
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector.ts
@@ -0,0 +1,9 @@
+import {Component, Directive, NgModule} from '@angular/core';
+
+@Component({template: '<router-outlet></router-outlet>'})
+export class EmptyOutletComponent {
+}
+
+@NgModule({declarations: [EmptyOutletComponent]})
+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
new file mode 100644
index 0000000000..ddd2dbc6ea
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_def.js
@@ -0,0 +1,12 @@
+EmptyOutletComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: EmptyOutletComponent,
+  selectors: [["ng-component"]],
+  decls: 1,
+  vars: 0,
+  template: function EmptyOutletComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "router-outlet");
+    }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_fac.js
new file mode 100644
index 0000000000..c1775e7915
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/no_selector_fac.js
@@ -0,0 +1 @@
+EmptyOutletComponent.ɵfac = function EmptyOutletComponent_Factory(t) { return new (t || EmptyOutletComponent)(); };
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.js
new file mode 100644
index 0000000000..754d8e184c
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.js
@@ -0,0 +1,19 @@
+const $e0_ff$ = function ($v$) { return {"duration": 500, animation: $v$}; };
+// ...
+MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyApp,
+  selectors: [["my-app"]],
+  decls: 1,
+  vars: 3,
+  consts: [[__AttributeMarker.Bindings__, "config"]],
+  template:  function MyApp_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelement(0, "object-comp", 0);
+    }
+    if (rf & 2) {
+      $r3$.ɵɵproperty("config", $r3$.ɵɵpureFunction1(1, $e0_ff$, ctx.name));
+    }
+  },
+  directives: [ObjectComp],
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.ts
new file mode 100644
index 0000000000..04943c7c2b
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literals.ts
@@ -0,0 +1,26 @@
+import {Component, Input, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'object-comp',
+  template: `
+    <p> {{ config['duration'] }} </p>
+    <p> {{ config.animation }} </p>
+  `
+})
+export class ObjectComp {
+  @Input() config!: {[key: string]: any};
+}
+
+@Component({
+  selector: 'my-app',
+  template: `
+  <object-comp [config]="{'duration': 500, animation: name}"></object-comp>
+`
+})
+export class MyApp {
+  name = 'slide';
+}
+
+@NgModule({declarations: [ObjectComp, MyApp]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives.ts
new file mode 100644
index 0000000000..a2d98f9ff1
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives.ts
@@ -0,0 +1,16 @@
+import {Component, Directive, NgModule, TemplateRef} from '@angular/core';
+
+@Directive({selector: '[if]'})
+export class IfDirective {
+  constructor(template: TemplateRef<any>) {}
+}
+
+@Component(
+    {selector: 'my-component', template: '<ul #foo><li *if>{{salutation}} {{foo}}</li></ul>'})
+export class MyComponent {
+  salutation = 'Hello';
+}
+
+@NgModule({declarations: [IfDirective, MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_def.js
new file mode 100644
index 0000000000..810b934520
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_def.js
@@ -0,0 +1,4 @@
+IfDirective.ɵdir = $r3$.ɵɵdefineDirective({
+  type: IfDirective,
+  selectors: [["", "if", ""]]
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_fac.js
new file mode 100644
index 0000000000..65cca9800a
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_fac.js
@@ -0,0 +1 @@
+IfDirective.ɵfac = function IfDirective_Factory(t) { return new (t || IfDirective)($r3$.ɵɵdirectiveInject($i$.TemplateRef)); };
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_def.js
new file mode 100644
index 0000000000..e74030ce70
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_def.js
@@ -0,0 +1,30 @@
+function MyComponent_li_2_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵelementStart(0, "li");
+    $r3$.ɵɵtext(1);
+    $r3$.ɵɵelementEnd();
+  }
+  if (rf & 2) {
+    const $myComp$ = $r3$.ɵɵnextContext();
+    const $foo$ = $r3$.ɵɵreference(1);
+    $r3$.ɵɵadvance(1);
+    $r3$.ɵɵtextInterpolate2("", $myComp$.salutation, " ", $foo$, "");
+  }
+}
+// ...
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyComponent,
+  selectors: [["my-component"]],
+  decls: 3,
+  vars: 0,
+  consts: [["foo", ""], [__AttributeMarker.Template__, "if"]],
+  template:  function MyComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵelementStart(0, "ul", null, 0);
+      $r3$.ɵɵtemplate(2, MyComponent_li_2_Template, 2, 2, "li", 1);
+      $r3$.ɵɵelementEnd();
+    }
+  },
+  directives: [IfDirective],
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_fac.js
new file mode 100644
index 0000000000..57da070177
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_my_component_fac.js
@@ -0,0 +1 @@
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di.ts
new file mode 100644
index 0000000000..98284b4f72
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di.ts
@@ -0,0 +1,10 @@
+import {ChangeDetectorRef, Component, ElementRef, NgModule, ViewContainerRef} from '@angular/core';
+
+@Component({selector: 'my-component', template: ''})
+export class MyComponent {
+  constructor(public el: ElementRef, public vcr: ViewContainerRef, public cdr: ChangeDetectorRef) {}
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_def.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_def.js
new file mode 100644
index 0000000000..d0b65ec701
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_def.js
@@ -0,0 +1,8 @@
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyComponent,
+  selectors: [["my-component"]],
+  decls: 0,
+  vars: 0,
+  template:  function MyComponent_Template(rf, ctx) {},
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_fac.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_fac.js
new file mode 100644
index 0000000000..4b67a7826b
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/view_tokens_di_fac.js
@@ -0,0 +1,5 @@
+MyComponent.ɵfac = function MyComponent_Factory(t) {
+  return new (t || MyComponent)(
+    $r3$.ɵɵdirectiveInject($i$.ElementRef), $r3$.ɵɵdirectiveInject($i$.ViewContainerRef),
+    $r3$.ɵɵdirectiveInject($i$.ChangeDetectorRef));
+};
diff --git a/packages/compiler-cli/test/compliance/test_helpers/expected_file_macros.ts b/packages/compiler-cli/test/compliance/test_helpers/expected_file_macros.ts
index 73a7c17ed4..0d90b52fac 100644
--- a/packages/compiler-cli/test/compliance/test_helpers/expected_file_macros.ts
+++ b/packages/compiler-cli/test/compliance/test_helpers/expected_file_macros.ts
@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AttributeMarker} from '@angular/compiler/src/core';
+import {AttributeMarker, SelectorFlags} from '@angular/compiler/src/core';
 import {i18nIcuMsg, i18nMsg, i18nMsgWithPostprocess, Placeholder} from './i18n_helpers';
 
 const EXPECTED_FILE_MACROS: [RegExp, (...args: string[]) => string][] = [
@@ -32,6 +32,9 @@ const EXPECTED_FILE_MACROS: [RegExp, (...args: string[]) => string][] = [
     /__AttributeMarker\.([^_]+)__/g,
     (_match, member) => getAttributeMarker(member),
   ],
+
+  // E.g. `__SelectorFlags.ELEMENT__`
+  flagUnion(/__SelectorFlags\.([^_]+)__/, (_match, member) => getSelectorFlag(member)),
 ];
 
 /**
@@ -89,6 +92,21 @@ function getAttributeMarker(member: string): string {
   return `${marker}`;
 }
 
+const SelectorFlagsMap: Record<string, SelectorFlags> = {
+  NOT: SelectorFlags.NOT,
+  ATTRIBUTE: SelectorFlags.ATTRIBUTE,
+  ELEMENT: SelectorFlags.ELEMENT,
+  CLASS: SelectorFlags.CLASS,
+};
+
+function getSelectorFlag(member: string): number {
+  const marker = SelectorFlagsMap[member];
+  if (typeof marker !== 'number') {
+    throw new Error('Unknown SelectorFlag: ' + member);
+  }
+  return marker;
+}
+
 function stringParam() {
   return /'([^']*?[^\\])'/;
 }
@@ -105,3 +123,24 @@ function macroFn(fnName: RegExp, ...args: RegExp[]): RegExp {
       ws + fnName.source + '\\(' + args.map(r => `${ws}${r.source}${ws}`).join(',') + '\\)' + ws,
       'g');
 }
+
+/**
+ * Creates a macro to replace a union of flags with its numeric constant value.
+ *
+ * @param pattern The regex to match a single occurrence of the flag.
+ * @param getFlagValue A function to extract the numeric flag value from the pattern.
+ */
+function flagUnion(pattern: RegExp, getFlagValue: (...match: string[]) => number):
+    typeof EXPECTED_FILE_MACROS[number] {
+  return [
+    // Match at least one occurrence of the pattern, optionally followed by more occurrences
+    // separated by a pipe.
+    new RegExp(pattern.source + '(?:\s*\\\|\s*' + pattern.source + ')*', 'g'),
+    (match: string) => {
+      // Replace all matches with the union of the individually matched flags.
+      return String(match.split('|')
+                        .map(flag => getFlagValue(...flag.trim().match(pattern)!))
+                        .reduce((accumulator, flagValue) => accumulator | flagValue, 0));
+    },
+  ];
+}