refactor(compiler-cli): migrate view compiler directive tests (#39929)

Migrates the compliance tests under `r3_view_compiler_directives` to the new format.

PR Close #39929

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/directives/matching/GOLDEN_PARTIAL.js

@@ -1,48 +0,0 @@
-/****************************************************************************************************
- * PARTIAL FILE: test.js
- ****************************************************************************************************/
-import { Component, Directive, NgModule } from '@angular/core';
-import * as i0 from "@angular/core";
-export class I18nDirective {
-}
-I18nDirective.ɵfac = function I18nDirective_Factory(t) { return new (t || I18nDirective)(); };
-I18nDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: I18nDirective, selector: "[i18n]", ngImport: i0 });
-/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(I18nDirective, [{
-        type: Directive,
-        args: [{ selector: '[i18n]' }]
-    }], null, null); })();
-export class MyComponent {
-}
-MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
-MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '<div i18n></div>', isInline: true } });
-/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
-        type: Component,
-        args: [{ selector: 'my-component', template: '<div i18n></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: [I18nDirective, MyComponent] }); })();
-/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
-        type: NgModule,
-        args: [{ declarations: [I18nDirective, MyComponent] }]
-    }], null, null); })();
-
-/****************************************************************************************************
- * PARTIAL FILE: test.d.ts
- ****************************************************************************************************/
-import * as i0 from "@angular/core";
-export declare class I18nDirective {
-    static ɵfac: i0.ɵɵFactoryDef<I18nDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<I18nDirective, "[i18n]", 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 I18nDirective, typeof MyComponent], never, never>;
-    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
-}
-

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/directives/matching/TEST_CASES.json

@@ -1,28 +0,0 @@
-{
-  "$schema": "../../../test_case_schema.json",
-  "cases": [
-    {
-      "description": "should not match directives on i18n attribute",
-      "expectations": [
-        {
-          "failureMessage": "Incorrect ChildComponent.ɵcmp",
-          "files": [
-            {
-              "expected": "component.js",
-              "generated": "test.js"
-            }
-          ]
-        },
-        {
-          "failureMessage": "Incorrect ChildComponent.ɵfac",
-          "files": [
-            {
-              "expected": "factory.js",
-              "generated": "test.js"
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/GOLDEN_PARTIAL.js

@@ -0,0 +1,443 @@
+/****************************************************************************************************
+ * PARTIAL FILE: i18n_attribute_directive.js
+ ****************************************************************************************************/
+import { Component, Directive, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class I18nDirective {
+}
+I18nDirective.ɵfac = function I18nDirective_Factory(t) { return new (t || I18nDirective)(); };
+I18nDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: I18nDirective, selector: "[i18n]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(I18nDirective, [{
+        type: Directive,
+        args: [{ selector: '[i18n]' }]
+    }], null, null); })();
+export class MyComponent {
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '<div i18n></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{ selector: 'my-component', template: '<div i18n></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: [I18nDirective, MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [I18nDirective, MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: i18n_attribute_directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class I18nDirective {
+    static ɵfac: i0.ɵɵFactoryDef<I18nDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<I18nDirective, "[i18n]", 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 I18nDirective, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: i18n_prefix_attribute_directive.js
+ ****************************************************************************************************/
+import { Component, Directive, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class I18nDirective {
+}
+I18nDirective.ɵfac = function I18nDirective_Factory(t) { return new (t || I18nDirective)(); };
+I18nDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: I18nDirective, selector: "[i18n]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(I18nDirective, [{
+        type: Directive,
+        args: [{ selector: '[i18n]' }]
+    }], null, null); })();
+export class I18nFooDirective {
+}
+I18nFooDirective.ɵfac = function I18nFooDirective_Factory(t) { return new (t || I18nFooDirective)(); };
+I18nFooDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: I18nFooDirective, selector: "[i18n-foo]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(I18nFooDirective, [{
+        type: Directive,
+        args: [{ selector: '[i18n-foo]' }]
+    }], null, null); })();
+export class FooDirective {
+}
+FooDirective.ɵfac = function FooDirective_Factory(t) { return new (t || FooDirective)(); };
+FooDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: FooDirective, selector: "[foo]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(FooDirective, [{
+        type: Directive,
+        args: [{ selector: '[foo]' }]
+    }], null, null); })();
+export class MyComponent {
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '<div i18n-foo></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{ selector: 'my-component', template: '<div i18n-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: [I18nDirective, I18nFooDirective, FooDirective, MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [I18nDirective, I18nFooDirective, FooDirective, MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: i18n_prefix_attribute_directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class I18nDirective {
+    static ɵfac: i0.ɵɵFactoryDef<I18nDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<I18nDirective, "[i18n]", never, {}, {}, never>;
+}
+export declare class I18nFooDirective {
+    static ɵfac: i0.ɵɵFactoryDef<I18nFooDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<I18nFooDirective, "[i18n-foo]", never, {}, {}, never>;
+}
+export declare class FooDirective {
+    static ɵfac: i0.ɵɵFactoryDef<FooDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<FooDirective, "[foo]", 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 I18nDirective, typeof I18nFooDirective, typeof FooDirective, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: property_binding_directive.js
+ ****************************************************************************************************/
+import { Component, Directive, Input, 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: "[someDirective]", inputs: { someDirective: "someDirective" }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
+        type: Directive,
+        args: [{ selector: '[someDirective]' }]
+    }], null, { someDirective: [{
+            type: Input
+        }] }); })();
+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 [someDirective]="true"></div>', isInline: true }, directives: [{ type: SomeDirective, selector: "[someDirective]", inputs: ["someDirective"] }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{ selector: 'my-component', template: '<div [someDirective]="true"></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: [SomeDirective, MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [SomeDirective, MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: property_binding_directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SomeDirective {
+    someDirective: any;
+    static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDirective]", never, { "someDirective": "someDirective"; }, {}, 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 SomeDirective, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_template_directive.js
+ ****************************************************************************************************/
+import { Component, Directive, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class DirectiveA {
+}
+DirectiveA.ɵfac = function DirectiveA_Factory(t) { return new (t || DirectiveA)(); };
+DirectiveA.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: DirectiveA, selector: "ng-template[directiveA]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(DirectiveA, [{
+        type: Directive,
+        args: [{ selector: 'ng-template[directiveA]' }]
+    }], null, null); })();
+export class MyComponent {
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
+    <ng-template directiveA>Some content</ng-template>
+  `, isInline: true }, directives: [{ type: DirectiveA, selector: "ng-template[directiveA]" }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: `
+    <ng-template directiveA>Some content</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: [DirectiveA, MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [DirectiveA, MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_template_directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class DirectiveA {
+    static ɵfac: i0.ɵɵFactoryDef<DirectiveA, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<DirectiveA, "ng-template[directiveA]", 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 DirectiveA, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_container_directive.js
+ ****************************************************************************************************/
+import { Component, Directive, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class DirectiveA {
+}
+DirectiveA.ɵfac = function DirectiveA_Factory(t) { return new (t || DirectiveA)(); };
+DirectiveA.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: DirectiveA, selector: "ng-container[directiveA]", ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(DirectiveA, [{
+        type: Directive,
+        args: [{ selector: 'ng-container[directiveA]' }]
+    }], null, null); })();
+export class MyComponent {
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
+    <ng-container *ngIf="showing" directiveA>Some content</ng-container>
+  `, isInline: true }, directives: [{ type: DirectiveA, selector: "ng-container[directiveA]" }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: `
+    <ng-container *ngIf="showing" directiveA>Some content</ng-container>
+  `
+            }]
+    }], 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: [DirectiveA, MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [DirectiveA, MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_container_directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class DirectiveA {
+    static ɵfac: i0.ɵɵFactoryDef<DirectiveA, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<DirectiveA, "ng-container[directiveA]", 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 DirectiveA, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_template_binding_directive.js
+ ****************************************************************************************************/
+import { Component, Directive, Input, 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: "[someDirective]", inputs: { someDirective: "someDirective" }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
+        type: Directive,
+        args: [{ selector: '[someDirective]' }]
+    }], null, { someDirective: [{
+            type: Input
+        }] }); })();
+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: '<ng-template [someDirective]="true"></ng-template>', isInline: true }, directives: [{ type: SomeDirective, selector: "[someDirective]", inputs: ["someDirective"] }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: '<ng-template [someDirective]="true"></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: [SomeDirective, MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [SomeDirective, MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: ng_template_binding_directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SomeDirective {
+    someDirective: any;
+    static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDirective]", never, { "someDirective": "someDirective"; }, {}, 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 SomeDirective, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: structural_directive.js
+ ****************************************************************************************************/
+import { Component, Directive, Input, 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: "[someDirective]", inputs: { someDirective: "someDirective" }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
+        type: Directive,
+        args: [{ selector: '[someDirective]' }]
+    }], null, { someDirective: [{
+            type: Input
+        }] }); })();
+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 *someDirective></div>', isInline: true }, directives: [{ type: SomeDirective, selector: "[someDirective]", inputs: ["someDirective"] }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{ selector: 'my-component', template: '<div *someDirective></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: [SomeDirective, MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [SomeDirective, MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: structural_directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class SomeDirective {
+    someDirective: any;
+    static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDirective]", never, { "someDirective": "someDirective"; }, {}, 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 SomeDirective, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: output_directive.js
+ ****************************************************************************************************/
+import { Component, Directive, EventEmitter, NgModule, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SomeDirective {
+    constructor() {
+        this.someDirective = new EventEmitter();
+    }
+}
+SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
+SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDirective]", outputs: { someDirective: "someDirective" }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
+        type: Directive,
+        args: [{ selector: '[someDirective]' }]
+    }], null, { someDirective: [{
+            type: Output
+        }] }); })();
+export class MyComponent {
+    noop() { }
+}
+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 (someDirective)="noop()"></div>', isInline: true }, directives: [{ type: SomeDirective, selector: "[someDirective]", outputs: ["someDirective"] }] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{ selector: 'my-component', template: '<div (someDirective)="noop()"></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: [SomeDirective, MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [SomeDirective, MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: output_directive.d.ts
+ ****************************************************************************************************/
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SomeDirective {
+    someDirective: EventEmitter<unknown>;
+    static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDirective]", never, {}, { "someDirective": "someDirective"; }, never>;
+}
+export declare class MyComponent {
+    noop(): void;
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof SomeDirective, typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/TEST_CASES.json

@@ -0,0 +1,159 @@
+{
+  "$schema": "../../test_case_schema.json",
+  "cases": [
+    {
+      "description": "should not match directives on i18n attribute",
+      "inputFiles": [
+        "i18n_attribute_directive.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect definition",
+          "files": [
+            {
+              "expected": "i18n_attribute_directive_definition.js",
+              "generated": "i18n_attribute_directive.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect factory",
+          "files": [
+            {
+              "expected": "i18n_attribute_directive_factory.js",
+              "generated": "i18n_attribute_directive.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should not match directives on i18n-prefixed attributes",
+      "inputFiles": [
+        "i18n_prefix_attribute_directive.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect definition",
+          "files": [
+            {
+              "expected": "i18n_prefix_attribute_directive_definition.js",
+              "generated": "i18n_prefix_attribute_directive.js"
+            }
+          ]
+        },
+        {
+          "failureMessage": "Incorrect factory",
+          "files": [
+            {
+              "expected": "i18n_prefix_attribute_directive_factory.js",
+              "generated": "i18n_prefix_attribute_directive.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should match directives on property bindings",
+      "inputFiles": [
+        "property_binding_directive.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect definition",
+          "files": [
+            {
+              "expected": "property_binding_directive_definition.js",
+              "generated": "property_binding_directive.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should match directives on ng-templates",
+      "inputFiles": [
+        "ng_template_directive.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect definition",
+          "files": [
+            {
+              "expected": "ng_template_directive_definition.js",
+              "generated": "ng_template_directive.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should match directives on ng-container",
+      "inputFiles": [
+        "ng_container_directive.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect definition",
+          "files": [
+            {
+              "expected": "ng_container_directive_definition.js",
+              "generated": "ng_container_directive.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should match directives on ng-template bindings",
+      "inputFiles": [
+        "ng_template_binding_directive.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect definition",
+          "files": [
+            {
+              "expected": "ng_template_binding_directive_definition.js",
+              "generated": "ng_template_binding_directive.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should match structural directives",
+      "inputFiles": [
+        "structural_directive.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect definition",
+          "files": [
+            {
+              "expected": "structural_directive_definition.js",
+              "generated": "structural_directive.js"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "description": "should match directives on element outputs",
+      "inputFiles": [
+        "output_directive.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Incorrect definition",
+          "files": [
+            {
+              "expected": "output_directive_definition.js",
+              "generated": "output_directive.js"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/i18n_prefix_attribute_directive.ts

@@ -0,0 +1,21 @@
+import {Component, Directive, NgModule} from '@angular/core';
+
+@Directive({selector: '[i18n]'})
+export class I18nDirective {
+}
+
+@Directive({selector: '[i18n-foo]'})
+export class I18nFooDirective {
+}
+
+@Directive({selector: '[foo]'})
+export class FooDirective {
+}
+
+@Component({selector: 'my-component', template: '<div i18n-foo></div>'})
+export class MyComponent {
+}
+
+@NgModule({declarations: [I18nDirective, I18nFooDirective, FooDirective, MyComponent]})
+export class MyModule {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/i18n_prefix_attribute_directive_definition.js

@@ -0,0 +1,12 @@
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyComponent,
+  selectors: [["my-component"]],
+  decls: 1,
+  vars: 0,
+  template: function MyComponent_Template(rf, ctx) {
+      if (rf & 1) {
+          $r3$.ɵɵelement(0, "div");
+      }
+  },
+  encapsulation: 2
+});

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/i18n_prefix_attribute_directive_factory.js

@@ -0,0 +1 @@
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/ng_container_directive.ts

@@ -0,0 +1,18 @@
+import {Component, Directive, NgModule} from '@angular/core';
+
+@Directive({selector: 'ng-container[directiveA]'})
+export class DirectiveA {
+}
+
+@Component({
+  selector: 'my-component',
+  template: `
+    <ng-container *ngIf="showing" directiveA>Some content</ng-container>
+  `
+})
+export class MyComponent {
+}
+
+@NgModule({declarations: [DirectiveA, MyComponent]})
+export class MyModule {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/ng_container_directive_definition.js

@@ -0,0 +1,23 @@
+function MyComponent_ng_container_0_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵelementContainerStart(0, 1);
+    $r3$.ɵɵtext(1, "Some content");
+    $r3$.ɵɵelementContainerEnd();
+  }
+}
+…
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  …
+  consts: [["directiveA", "", __AttributeMarker.Template__, "ngIf"], ["directiveA", ""]],
+  template: function MyComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵtemplate(0, MyComponent_ng_container_0_Template, 2, 0, "ng-container", 0);
+    }
+    if (rf & 2) {
+      $r3$.ɵɵproperty("ngIf", ctx.showing);
+    }
+  },
+  …
+  directives: [DirectiveA],
+  …
+});

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/ng_template_binding_directive.ts

@@ -0,0 +1,17 @@
+import {Component, Directive, Input, NgModule} from '@angular/core';
+
+@Directive({selector: '[someDirective]'})
+export class SomeDirective {
+  @Input() someDirective: any;
+}
+
+@Component({
+  selector: 'my-component',
+  template: '<ng-template [someDirective]="true"></ng-template>',
+})
+export class MyComponent {
+}
+
+@NgModule({declarations: [SomeDirective, MyComponent]})
+export class MyModule {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/ng_template_binding_directive_definition.js

@@ -0,0 +1,15 @@
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  …
+  consts: [[__AttributeMarker.Bindings__, "someDirective"]],
+  template: function MyComponent_Template(rf, ctx) {
+      if (rf & 1) {
+          $r3$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 0, 0, "ng-template", 0);
+      }
+      if (rf & 2) {
+          $r3$.ɵɵproperty("someDirective", true);
+      }
+  },
+  …
+  directives: [SomeDirective],
+  encapsulation: 2
+});

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/ng_template_directive.ts

@@ -0,0 +1,18 @@
+import {Component, Directive, NgModule} from '@angular/core';
+
+@Directive({selector: 'ng-template[directiveA]'})
+export class DirectiveA {
+}
+
+@Component({
+  selector: 'my-component',
+  template: `
+    <ng-template directiveA>Some content</ng-template>
+  `
+})
+export class MyComponent {
+}
+
+@NgModule({declarations: [DirectiveA, MyComponent]})
+export class MyModule {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/ng_template_directive_definition.js

@@ -0,0 +1,18 @@
+function MyComponent_ng_template_0_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵtext(0, "Some content");
+  }
+}
+…
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  …
+  consts: [["directiveA", ""]],
+  template: function MyComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      $r3$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 1, 0, "ng-template", 0);
+    }
+  },
+  …
+  directives: [DirectiveA],
+  …
+});

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/output_directive.ts

@@ -0,0 +1,15 @@
+import {Component, Directive, EventEmitter, NgModule, Output} from '@angular/core';
+
+@Directive({selector: '[someDirective]'})
+export class SomeDirective {
+  @Output() someDirective = new EventEmitter();
+}
+
+@Component({selector: 'my-component', template: '<div (someDirective)="noop()"></div>'})
+export class MyComponent {
+  noop() {}
+}
+
+@NgModule({declarations: [SomeDirective, MyComponent]})
+export class MyModule {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/output_directive_definition.js

@@ -0,0 +1,14 @@
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  …
+  consts: [[__AttributeMarker.Bindings__, "someDirective"]],
+  template: function MyComponent_Template(rf, ctx) {
+      if (rf & 1) {
+          $r3$.ɵɵelementStart(0, "div", 0);
+          $r3$.ɵɵlistener("someDirective", function MyComponent_Template_div_someDirective_0_listener() { return ctx.noop(); });
+          $r3$.ɵɵelementEnd();
+      }
+  },
+  …
+  directives: [SomeDirective],
+  encapsulation: 2
+});

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/property_binding_directive.ts

@@ -0,0 +1,14 @@
+import {Component, Directive, Input, NgModule} from '@angular/core';
+
+@Directive({selector: '[someDirective]'})
+export class SomeDirective {
+  @Input() someDirective: any;
+}
+
+@Component({selector: 'my-component', template: '<div [someDirective]="true"></div>'})
+export class MyComponent {
+}
+
+@NgModule({declarations: [SomeDirective, MyComponent]})
+export class MyModule {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/property_binding_directive_definition.js

@@ -0,0 +1,15 @@
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  …
+  consts: [[__AttributeMarker.Bindings__, "someDirective"]],
+  template: function MyComponent_Template(rf, ctx) {
+      if (rf & 1) {
+          $r3$.ɵɵelement(0, "div", 0);
+      }
+      if (rf & 2) {
+          $r3$.ɵɵproperty("someDirective", true);
+      }
+  },
+  …
+  directives: [SomeDirective],
+  encapsulation: 2
+});

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/structural_directive.ts

@@ -0,0 +1,14 @@
+import {Component, Directive, Input, NgModule} from '@angular/core';
+
+@Directive({selector: '[someDirective]'})
+export class SomeDirective {
+  @Input() someDirective: any;
+}
+
+@Component({selector: 'my-component', template: '<div *someDirective></div>'})
+export class MyComponent {
+}
+
+@NgModule({declarations: [SomeDirective, MyComponent]})
+export class MyModule {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_directives/matching/structural_directive_definition.js

@@ -0,0 +1,12 @@
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  …
+  consts: [[__AttributeMarker.Template__, "someDirective"]],
+  template: function MyComponent_Template(rf, ctx) {
+      if (rf & 1) {
+          $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 1, 0, "div", 0);
+      }
+  },
+  …
+  directives: [SomeDirective],
+  encapsulation: 2
+});

packages/compiler-cli/test/compliance_old/r3_view_compiler_directives_spec.ts

@@ -111,7 +111,7 @@ describe('compiler compliance: directives', () => {
       expectEmit(source, MyComponentFactory, 'Incorrect ChildComponent.ɵfac');
     });
 
-    it('should match directives on element bindings', () => {
+    it('should match directives on property bindings', () => {
       const files = {
         app: {
           'spec.ts': `