fix(compiler-cli): avoid fatal diagnostics for missing template files (#58673)

clydin · AndrewKushnir · commit a1cacc5b17d6 · 2025-03-10T09:54:16.000-07:00
A build will still fail in this case. However, for the language service, this allows the component to exist in the compiler registry and prevents cascading diagnostics within an IDE due to "missing" components. The originating template related errors will still be reported in the IDE. This case is particularly important when a template file either does not exist or is inaccessible to the language service. PR Close #58673
diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts b/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts
@@ -166,6 +166,7 @@ import {
 } from './metadata';
 import {
   _extractTemplateStyleUrls,
+  createEmptyTemplate,
   extractComponentStyleUrls,
   extractInlineStyleResources,
   extractTemplate,
@@ -675,54 +676,70 @@ export class ComponentDecoratorHandler
 
       template = preanalyzed;
     } else {
-      const templateDecl = parseTemplateDeclaration(
-        node,
-        decorator,
-        component,
-        containingFile,
-        this.evaluator,
-        this.depTracker,
-        this.resourceLoader,
-        this.defaultPreserveWhitespaces,
-      );
-      template = extractTemplate(
-        node,
-        templateDecl,
-        this.evaluator,
-        this.depTracker,
-        this.resourceLoader,
-        {
-          enableI18nLegacyMessageIdFormat: this.enableI18nLegacyMessageIdFormat,
-          i18nNormalizeLineEndingsInICUs: this.i18nNormalizeLineEndingsInICUs,
-          usePoisonedData: this.usePoisonedData,
-          enableBlockSyntax: this.enableBlockSyntax,
-          enableLetSyntax: this.enableLetSyntax,
-          preserveSignificantWhitespace: this.i18nPreserveSignificantWhitespace,
-        },
-        this.compilationMode,
-      );
+      try {
+        const templateDecl = parseTemplateDeclaration(
+          node,
+          decorator,
+          component,
+          containingFile,
+          this.evaluator,
+          this.depTracker,
+          this.resourceLoader,
+          this.defaultPreserveWhitespaces,
+        );
+        template = extractTemplate(
+          node,
+          templateDecl,
+          this.evaluator,
+          this.depTracker,
+          this.resourceLoader,
+          {
+            enableI18nLegacyMessageIdFormat: this.enableI18nLegacyMessageIdFormat,
+            i18nNormalizeLineEndingsInICUs: this.i18nNormalizeLineEndingsInICUs,
+            usePoisonedData: this.usePoisonedData,
+            enableBlockSyntax: this.enableBlockSyntax,
+            enableLetSyntax: this.enableLetSyntax,
+            preserveSignificantWhitespace: this.i18nPreserveSignificantWhitespace,
+          },
+          this.compilationMode,
+        );
 
-      if (
-        this.compilationMode === CompilationMode.LOCAL &&
-        template.errors &&
-        template.errors.length > 0
-      ) {
-        // Template errors are handled at the type check phase. But we skip this phase in local
-        // compilation mode. As a result we need to handle the errors now and add them to the diagnostics.
-        if (diagnostics === undefined) {
-          diagnostics = [];
-        }
+        if (
+          this.compilationMode === CompilationMode.LOCAL &&
+          template.errors &&
+          template.errors.length > 0
+        ) {
+          // Template errors are handled at the type check phase. But we skip this phase in local
+          // compilation mode. As a result we need to handle the errors now and add them to the diagnostics.
+          if (diagnostics === undefined) {
+            diagnostics = [];
+          }
 
-        diagnostics.push(
-          ...getTemplateDiagnostics(
-            template.errors,
-            // Type check ID is required as part of the ype check, mainly for mapping the
-            // diagnostic back to its source. But here we are generating the diagnostic outside
-            // of the type check context, and so we skip the template ID.
-            '' as TypeCheckId,
-            template.sourceMapping,
-          ),
-        );
+          diagnostics.push(
+            ...getTemplateDiagnostics(
+              template.errors,
+              // Type check ID is required as part of the ype check, mainly for mapping the
+              // diagnostic back to its source. But here we are generating the diagnostic outside
+              // of the type check context, and so we skip the template ID.
+              '' as TypeCheckId,
+              template.sourceMapping,
+            ),
+          );
+        }
+      } catch (e) {
+        if (e instanceof FatalDiagnosticError) {
+          diagnostics ??= [];
+          diagnostics.push(e.toDiagnostic());
+          isPoisoned = true;
+          // Create an empty template for the missing/invalid template.
+          // A build will still fail in this case. However, for the language service,
+          // this allows the component to exist in the compiler registry and prevents
+          // cascading diagnostics within an IDE due to "missing" components. The
+          // originating template related errors will still be reported in the IDE.
+          template = createEmptyTemplate(node, component, containingFile);
+        } else {
+          throw e;
+        }
       }
     }
     const templateResource = template.declaration.isInline
diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/src/resources.ts b/packages/compiler-cli/src/ngtsc/annotations/component/src/resources.ts
@@ -254,6 +254,52 @@ export function extractTemplate(
   }
 }
 
+export function createEmptyTemplate(
+  componentClass: ClassDeclaration,
+  component: Map<string, ts.Expression>,
+  containingFile: string,
+): ParsedTemplateWithSource {
+  const templateUrl = component.get('templateUrl');
+  const template = component.get('template');
+
+  return {
+    content: '',
+    diagNodes: [],
+    nodes: [],
+    errors: null,
+    styles: [],
+    styleUrls: [],
+    ngContentSelectors: [],
+    file: new ParseSourceFile('', ''),
+    sourceMapping: templateUrl
+      ? {type: 'direct', node: template as ts.StringLiteral}
+      : {
+          type: 'external',
+          componentClass,
+          node: templateUrl!,
+          template: '',
+          templateUrl: 'missing.ng.html',
+        },
+    declaration: templateUrl
+      ? {
+          isInline: false,
+          interpolationConfig: InterpolationConfig.fromArray(null),
+          preserveWhitespaces: false,
+          templateUrlExpression: templateUrl,
+          templateUrl: 'missing.ng.html',
+          resolvedTemplateUrl: '/missing.ng.html',
+        }
+      : {
+          isInline: true,
+          interpolationConfig: InterpolationConfig.fromArray(null),
+          preserveWhitespaces: false,
+          expression: template!,
+          templateUrl: containingFile,
+          resolvedTemplateUrl: containingFile,
+        },
+  };
+}
+
 function parseExtractedTemplate(
   template: TemplateDeclaration,
   sourceStr: string,
