feat(server): add related information to diagnostics (#1492)

Show related information in the diagnostics generated for the language
service.

integration/lsp/ivy_spec.ts

@@ -99,6 +99,11 @@ describe('Angular Ivy language server', () => {
     expect(diagnostics.length).toBe(1);
     expect(diagnostics[0].message)
         .toBe(`Property 'doesnotexist' does not exist on type 'FooComponent'.`);
+    expect(diagnostics[0].relatedInformation).toBeDefined();
+    expect(diagnostics[0].relatedInformation!.length).toBe(1);
+    expect(diagnostics[0].relatedInformation![0].message)
+        .toBe(`Error occurs in the template of component FooComponent.`);
+    expect(diagnostics[0].relatedInformation![0].location.uri).toBe(FOO_COMPONENT_URI);
   });
 
   it('should support request cancellation', async () => {

server/src/diagnostic.ts

@@ -8,7 +8,7 @@
 
 import * as ts from 'typescript/lib/tsserverlibrary';
 import * as lsp from 'vscode-languageserver';
-import {tsTextSpanToLspRange} from './utils';
+import {tsRelatedInformationToLspRelatedInformation, tsTextSpanToLspRange} from './utils';
 
 /**
  * Convert ts.DiagnosticCategory to lsp.DiagnosticSeverity
@@ -45,5 +45,6 @@ export function tsDiagnosticToLspDiagnostic(
       tsDiagnosticCategoryToLspDiagnosticSeverity(tsDiag.category),
       tsDiag.code,
       tsDiag.source,
+      tsRelatedInformationToLspRelatedInformation(scriptInfo, tsDiag.relatedInformation),
   );
 }

server/src/utils.ts

@@ -77,6 +77,35 @@ export function lspRangeToTsPositions(
   return [start, end];
 }
 
+/**
+ * Convert a ts.DiagnosticRelatedInformation array to a
+ * lsp.DiagnosticRelatedInformation array
+ * @param scriptInfo Used to determine the offsets.
+ * @param relatedInfo
+ */
+export function tsRelatedInformationToLspRelatedInformation(
+    scriptInfo: ts.server.ScriptInfo,
+    relatedInfo?: ts.DiagnosticRelatedInformation[]): lsp.DiagnosticRelatedInformation[]|undefined {
+  if (relatedInfo === undefined) return;
+  const lspRelatedInfo: lsp.DiagnosticRelatedInformation[] = [];
+  for (const info of relatedInfo) {
+    if (info.file === undefined || info.start === undefined || info.length === undefined) continue;
+    const textSpan: ts.TextSpan = {
+      start: info.start,
+      length: info.length,
+    };
+    const location = lsp.Location.create(
+        filePathToUri(info.file.fileName),
+        tsTextSpanToLspRange(scriptInfo, textSpan),
+    );
+    lspRelatedInfo.push(lsp.DiagnosticRelatedInformation.create(
+        location,
+        ts.flattenDiagnosticMessageText(info.messageText, '\n'),
+        ));
+  }
+  return lspRelatedInfo;
+}
+
 export function isConfiguredProject(project: ts.server.Project):
     project is ts.server.ConfiguredProject {
   return project.projectKind === ts.server.ProjectKind.Configured;