test(compiler-cli): convert components & directives compliance tests (#39920)

This commit converts the components & directives compliance tests taken
from `r3_compiler_compliance_spec.ts` to the new test runner.

PR Close #39920

packages/compiler-cli/src/ngtsc/testing/fake_core/index.ts

@@ -106,3 +106,7 @@ export class NgZone {}
 export interface PipeTransform {
   transform(value: any, ...args: any[]): any;
 }
+
+export interface OnDestroy {
+  ngOnDestroy(): void;
+}

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>;
+}
+

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"
+          ]
+        }
+      ]
+    }
+  ]
+}

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
+});

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 {
+}

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
+});

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 {
+}

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
+});

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 {
+}

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, ["*"]>;
+}
+

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"
+          ]
+        }
+      ]
+    }
+  ]
+}

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
+});

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 {
+}

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);
+  }
+}

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 {
+}

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
+});

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 {
+}

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
+});

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;
+}

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
+})

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 {
+}

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
+})

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 {
+}

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);
+  }
+}

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 {
+}

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 {
+}

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
+});

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
+});

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 }]

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 {
+}

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"]
+});

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 {
+}

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]; }
+// ...

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 {
+}

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]; }
+// ...

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 {
+}

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>;
+}
+

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"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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 {
+}

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
+});

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
+});

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
+});

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 {
+}

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);
+  }
+}

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 {
+}

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
+});

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 {
+}

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
+});

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 {
+}

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
+});

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 {
+}

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
+});

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 {
+}

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
+});

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 {
+}

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>;
+}
+

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"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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 {
+}

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
+});

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)); };

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
+});

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()); };

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
+});

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 {
+}

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 {
+}

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
+});

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
+});

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)(); };

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
+});

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)(); };

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>;
+}
+

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"
+          ]
+        }
+      ]
+    }
+  ]
+}

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
+});

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 {
+}

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$);
+    }
+  },
+  // ...
+});

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 {
+}

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$);
+    }
+  },
+  // ...
+});

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 {
+}

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 {
+}

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
+});

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 {
+}

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
+});

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 {
+}

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
+});

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 {
+}

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$);
+    }
+  },
+  // ...
+});

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 {
+}

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$);
+    }
+  },
+  // ...
+});

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 {
+}

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>;
+}
+

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"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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) {}
+}

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));
+};

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]
+});

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
+});

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 {
+}

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
+});

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 {
+}

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
+});

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 {
+}