fix(language-service): don't show external template diagnostics in ts files (#41070)

The compiler considers template diagnostics to "belong" to the source file
of the component using the template. This means that when diagnostics for
a source file are reported, it returns diagnostics of TS structures in the
actual source file, diagnostics for any inline templates, and diagnostics of
any external templates.

The Language Service uses a different model, and wants to show template
diagnostics in the actual .html file. Thus, it's not necessary (and in fact
incorrect) to include such diagnostics for the actual .ts file as well.
Doing this currently causes a bug where external diagnostics appear in the
TS file with "random" source spans.

This commit changes the Language Service to filter the set of diagnostics
returned by the compiler and only include those diagnostics with spans
actually within the .ts file itself.

Fixes #41032

PR Close #41070

packages/language-service/ivy/language_service.ts

@@ -70,7 +70,28 @@ export class LanguageService {
       const program = compiler.getNextProgram();
       const sourceFile = program.getSourceFile(fileName);
       if (sourceFile) {
-        diagnostics.push(...compiler.getDiagnosticsForFile(sourceFile, OptimizeFor.SingleFile));
+        const ngDiagnostics = compiler.getDiagnosticsForFile(sourceFile, OptimizeFor.SingleFile);
+        // There are several kinds of diagnostics returned by `NgCompiler` for a source file:
+        //
+        // 1. Angular-related non-template diagnostics from decorated classes within that file.
+        // 2. Template diagnostics for components with direct inline templates (a string literal).
+        // 3. Template diagnostics for components with indirect inline templates (templates computed
+        //    by expression).
+        // 4. Template diagnostics for components with external templates.
+        //
+        // When showing diagnostics for a TS source file, we want to only include kinds 1 and 2 -
+        // those diagnostics which are reported at a location within the TS file itself. Diagnostics
+        // for external templates will be shown when editing that template file (the `else` block)
+        // below.
+        //
+        // Currently, indirect inline template diagnostics (kind 3) are not shown at all by the
+        // Language Service, because there is no sensible location in the user's code for them. Such
+        // templates are an edge case, though, and should not be common.
+        //
+        // TODO(alxhub): figure out a good user experience for indirect template diagnostics and
+        // show them from within the Language Service.
+        diagnostics.push(...ngDiagnostics.filter(
+            diag => diag.file !== undefined && diag.file.fileName === sourceFile.fileName));
       }
     } else {
       const components = compiler.getComponentsWithTemplateFile(fileName);

packages/language-service/ivy/test/compiler_spec.ts

@@ -30,11 +30,11 @@ describe('language-service/compiler integration', () => {
       'test.html': `<other-cmp>Test</other-cmp>`
     });
 
-    expect(project.getDiagnosticsForFile('test.ts').length).toBeGreaterThan(0);
+    expect(project.getDiagnosticsForFile('test.html').length).toBeGreaterThan(0);
 
     const tmplFile = project.openFile('test.html');
     tmplFile.contents = '<div>Test</div>';
-    expect(project.getDiagnosticsForFile('test.ts').length).toEqual(0);
+    expect(project.getDiagnosticsForFile('test.html').length).toEqual(0);
   });
 
   it('should not produce errors from inline test declarations mixing with those of the app', () => {

packages/language-service/ivy/test/diagnostic_spec.ts

@@ -75,6 +75,44 @@ describe('getSemanticDiagnostics', () => {
     expect(diags).toEqual([]);
   });
 
+  it('should not report external template diagnostics on the TS file', () => {
+    const files = {
+      'app.ts': `
+        import {Component, NgModule} from '@angular/core';
+
+        @Component({
+          templateUrl: './app.html'
+        })
+        export class AppComponent {}
+      `,
+      'app.html': '{{nope}}'
+    };
+
+    const project = createModuleAndProjectWithDeclarations(env, 'test', files);
+    const diags = project.getDiagnosticsForFile('app.ts');
+    expect(diags).toEqual([]);
+  });
+
+  it('should report diagnostics in inline templates', () => {
+    const files = {
+      'app.ts': `
+        import {Component, NgModule} from '@angular/core';
+
+        @Component({
+          template: '{{nope}}',
+        })
+        export class AppComponent {}
+      `
+    };
+    const project = createModuleAndProjectWithDeclarations(env, 'test', files);
+    const diags = project.getDiagnosticsForFile('app.ts');
+    expect(diags.length).toBe(1);
+    const {category, file, messageText} = diags[0];
+    expect(category).toBe(ts.DiagnosticCategory.Error);
+    expect(file?.fileName).toBe('/test/app.ts');
+    expect(messageText).toBe(`Property 'nope' does not exist on type 'AppComponent'.`);
+  });
+
   it('should report member does not exist in external template', () => {
     const files = {
       'app.ts': `
@@ -179,11 +217,17 @@ describe('getSemanticDiagnostics', () => {
     };
 
     const project = env.addProject('test', files);
-    const diags = project.getDiagnosticsForFile('app.ts');
+    const diags1 = project.getDiagnosticsForFile('app1.html');
-    expect(diags.map(x => x.messageText).sort()).toEqual([
+    expect(diags1.length).toBe(1);
-      'Parser Error: Bindings cannot contain assignments at column 8 in [{{nope = false}}] in /test/app1.html@0:0',
+    expect(diags1[0].messageText)
-      'Parser Error: Bindings cannot contain assignments at column 8 in [{{nope = true}}] in /test/app2.html@0:0'
+        .toBe(
-    ]);
+            'Parser Error: Bindings cannot contain assignments at column 8 in [{{nope = false}}] in /test/app1.html@0:0');
+
+    const diags2 = project.getDiagnosticsForFile('app2.html');
+    expect(diags2.length).toBe(1);
+    expect(diags2[0].messageText)
+        .toBe(
+            'Parser Error: Bindings cannot contain assignments at column 8 in [{{nope = true}}] in /test/app2.html@0:0');
   });
 
   it('reports a diagnostic for a component without a template', () => {