fix(ivy): properly match directives on ng-template with * syntax (#29251)

PR Close #29251

packages/core/src/render3/node_selector_matcher.ts

@@ -37,18 +37,19 @@ function isCssClassMatching(nodeClassAttrVal: string, cssClassToMatch: string):
  * Function that checks whether a given tNode matches tag-based selector and has a valid type.
  *
  * Matching can be performed in 2 modes: projection mode (when we project nodes) and regular
- * directive matching mode. In "projection" mode, we do not need to check types, so if tag name
+ * directive matching mode:
- * matches selector, we declare a match. In "directive matching" mode, we also check whether tNode
+ * - in the "directive matching" mode we do _not_ take TContainer's tagName into account if it is
- * is of expected type:
+ * different from NG_TEMPLATE_SELECTOR (value different from NG_TEMPLATE_SELECTOR indicates that a
- * - whether tNode has either Element or ElementContainer type
+ * tag name was extracted from * syntax so we would match the same directive twice);
- * - or if we want to match "ng-template" tag, we check for Container type
+ * - in the "projection" mode, we use a tag name potentially extracted from the * syntax processing
+ * (applicable to TNodeType.Container only).
  */
 function hasTagAndTypeMatch(
     tNode: TNode, currentSelector: string, isProjectionMode: boolean): boolean {
-  return currentSelector === tNode.tagName &&
+  const tagNameToCompare = tNode.type === TNodeType.Container && !isProjectionMode ?
-      (isProjectionMode ||
+      NG_TEMPLATE_SELECTOR :
-       (tNode.type === TNodeType.Element || tNode.type === TNodeType.ElementContainer) ||
+      tNode.tagName;
-       (tNode.type === TNodeType.Container && currentSelector === NG_TEMPLATE_SELECTOR));
+  return currentSelector === tagNameToCompare;
 }
 
 /**

packages/core/test/acceptance/directive_spec.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, Directive} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+
+describe('directives', () => {
+
+  describe('matching', () => {
+
+    @Directive({selector: 'ng-template[test]'})
+    class TestDirective {
+    }
+
+    @Component({selector: 'test-cmpt', template: ''})
+    class TestComponent {
+    }
+
+    it('should match directives on ng-template', () => {
+      TestBed.configureTestingModule({declarations: [TestComponent, TestDirective]});
+      TestBed.overrideTemplate(TestComponent, `<ng-template test></ng-template>`);
+
+      const fixture = TestBed.createComponent(TestComponent);
+      const nodesWithDirective = fixture.debugElement.queryAllNodes(By.directive(TestDirective));
+
+      expect(nodesWithDirective.length).toBe(1);
+    });
+
+    it('should match directives on ng-template created by * syntax', () => {
+      TestBed.configureTestingModule({declarations: [TestComponent, TestDirective]});
+      TestBed.overrideTemplate(TestComponent, `<div *test></div>`);
+
+      const fixture = TestBed.createComponent(TestComponent);
+      const nodesWithDirective = fixture.debugElement.queryAllNodes(By.directive(TestDirective));
+
+      expect(nodesWithDirective.length).toBe(1);
+    });
+
+  });
+
+});