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

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 angular#58673

Author: clydin

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

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,