From 7316e72ec5ccc475e610bf26b5da451b8ffa50a2 Mon Sep 17 00:00:00 2001
From: Andrew Scott <atscott@google.com>
Date: Fri, 21 Jan 2022 11:02:04 -0800
Subject: [PATCH] fix(compiler-cli): properly index <svg> elements when on a
 template (#44785)

The original fix for svg elements in
https://github.com/angular/angular/commit/92b23f48519a1adb460a431c356bcd9917fb059d
did not account for svg elements when they also had a structural
directive on them, making the node a template. This resulted in the
logic added in fix above not being applied.

PR Close #44785
---
 .../src/ngtsc/indexer/src/template.ts           | 17 ++++++++---------
 .../src/ngtsc/indexer/test/template_spec.ts     | 14 ++++++++++++++
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/compiler-cli/src/ngtsc/indexer/src/template.ts b/packages/compiler-cli/src/ngtsc/indexer/src/template.ts
index 3d932ab5353..a49fe6f2be0 100644
--- a/packages/compiler-cli/src/ngtsc/indexer/src/template.ts
+++ b/packages/compiler-cli/src/ngtsc/indexer/src/template.ts
@@ -232,17 +232,16 @@ class TemplateVisitor extends TmplAstRecursiveVisitor {
       name = node.tagName;
       kind = IdentifierKind.Template;
     } else {
-      // Namespaced elements have a particular format for `node.name` that needs to be handled.
-      // For example, an `<svg>` element has a `node.name` of `':svg:svg'`.
-
-      // TODO(alxhub): properly handle namespaced elements
-      if (node.name.startsWith(':')) {
-        name = node.name.split(':').pop()!;
-      } else {
-        name = node.name;
-      }
+      name = node.name;
       kind = IdentifierKind.Element;
     }
+    // Namespaced elements have a particular format for `node.name` that needs to be handled.
+    // For example, an `<svg>` element has a `node.name` of `':svg:svg'`.
+    // TODO(alxhub): properly handle namespaced elements
+    if (name.startsWith(':')) {
+      name = name.split(':').pop()!;
+    }
+
     const sourceSpan = node.startSourceSpan;
     // An element's or template's source span can be of the form `<element>`, `<element />`, or
     // `<element></element>`. Only the selector is interesting to the indexer, so the source is
diff --git a/packages/compiler-cli/src/ngtsc/indexer/test/template_spec.ts b/packages/compiler-cli/src/ngtsc/indexer/test/template_spec.ts
index 97c63a6d759..eb05a494e9b 100644
--- a/packages/compiler-cli/src/ngtsc/indexer/test/template_spec.ts
+++ b/packages/compiler-cli/src/ngtsc/indexer/test/template_spec.ts
@@ -35,6 +35,20 @@ runInEachFileSystem(() => {
       });
     });
 
+    it('should handle svg elements on templates', () => {
+      const template = '<svg *ngIf="true"></svg>';
+      const refs = getTemplateIdentifiers(bind(template));
+
+      const [ref] = Array.from(refs);
+      expect(ref).toEqual({
+        kind: IdentifierKind.Template,
+        name: 'svg',
+        span: new AbsoluteSourceSpan(1, 4),
+        usedDirectives: new Set(),
+        attributes: new Set(),
+      });
+    });
+
     it('should handle comments in interpolations', () => {
       const template = '{{foo // comment}}';
       const refs = getTemplateIdentifiers(bind(template));