fix(compiler-cli): properly index <svg> elements (#44678)

alxhub · atscott · commit 92b23f48519a · 2022-01-11T19:16:18.000Z
In the `Element` node of a parsed `<svg>` element, the `name` is recorded as `:svg:svg`. When the Angular Indexer ran over this element, it would attempt to find this name in the template text and fail, as the namespace portion of the name was added automatically at parse time and is of course missing from the original template. This commit changes the indexer to detect these namespaced elements and only search for the tag name. PR Close #44678
diff --git a/packages/compiler-cli/src/ngtsc/indexer/src/template.ts b/packages/compiler-cli/src/ngtsc/indexer/src/template.ts
@@ -232,7 +232,15 @@ class TemplateVisitor extends TmplAstRecursiveVisitor {
       name = node.tagName;
       kind = IdentifierKind.Template;
     } else {
-      name = node.name;
+      // 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;
+      }
       kind = IdentifierKind.Element;
     }
     const sourceSpan = node.startSourceSpan;
diff --git a/packages/compiler-cli/src/ngtsc/indexer/test/template_spec.ts b/packages/compiler-cli/src/ngtsc/indexer/test/template_spec.ts
@@ -21,6 +21,20 @@ function bind(template: string) {
 
 runInEachFileSystem(() => {
   describe('getTemplateIdentifiers', () => {
+    it('should handle svg elements', () => {
+      const template = '<svg></svg>';
+      const refs = getTemplateIdentifiers(bind(template));
+
+      const [ref] = Array.from(refs);
+      expect(ref).toEqual({
+        kind: IdentifierKind.Element,
+        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));
