feat(@ngtools/webpack): improved TypeScript diagnostic reporting

By leveraging the built-in TS error formatting, additional context related to errors or warnings will now be shown.  This includes a segment of the code that caused the diagnostic message.

Author: clydin

packages/ngtools/webpack/src/angular_compiler_plugin.ts

@@ -28,6 +28,7 @@ import {
   createCompilerHost,
   createProgram,
   formatDiagnostics,
+  isNgDiagnostic,
   readConfiguration,
 } from '@angular/compiler-cli';
 import { ChildProcess, ForkOptions, fork } from 'child_process';
@@ -1010,19 +1011,57 @@ export class AngularCompilerPlugin {
     const { emitResult, diagnostics } = this._emit();
     timeEnd('AngularCompilerPlugin._update._emit');
 
-    // Report diagnostics.
-    const errors = diagnostics
-      .filter((diag) => diag.category === ts.DiagnosticCategory.Error);
-    const warnings = diagnostics
-      .filter((diag) => diag.category === ts.DiagnosticCategory.Warning);
+    // Report Diagnostics
+    const tsErrors = [];
+    const tsWarnings = [];
+    const ngErrors = [];
+    const ngWarnings = [];
+
+    for (const diagnostic of diagnostics) {
+      switch (diagnostic.category) {
+        case ts.DiagnosticCategory.Error:
+          if (isNgDiagnostic(diagnostic)) {
+            ngErrors.push(diagnostic);
+          } else {
+            tsErrors.push(diagnostic);
+          }
+          break;
+        case ts.DiagnosticCategory.Message:
+        case ts.DiagnosticCategory.Suggestion:
+          // Warnings?
+        case ts.DiagnosticCategory.Warning:
+          if (isNgDiagnostic(diagnostic)) {
+            ngWarnings.push(diagnostic);
+          } else {
+            tsWarnings.push(diagnostic);
+          }
+          break;
+      }
+    }
+
+    if (tsErrors.length > 0) {
+      const message = ts.formatDiagnosticsWithColorAndContext(
+        tsErrors,
+        this._compilerHost,
+      );
+      this._errors.push(new Error(message));
+    }
+
+    if (tsWarnings.length > 0) {
+      const message = ts.formatDiagnosticsWithColorAndContext(
+        tsWarnings,
+        this._compilerHost,
+      );
+      this._warnings.push(message);
+    }
 
-    if (errors.length > 0) {
-      const message = formatDiagnostics(errors);
+    if (ngErrors.length > 0) {
+      const message = formatDiagnostics(ngErrors);
       this._errors.push(new Error(message));
     }
 
-    if (warnings.length > 0) {
-      const message = formatDiagnostics(warnings);
+    if (ngWarnings.length > 0) {
+      const message = formatDiagnostics(ngWarnings);
       this._warnings.push(message);
     }