fix(@ngtools/webpack): report diagnostics the same way in type checker

(cherry picked from commit b9667b3)

Author: filipesilva

packages/ngtools/webpack/src/angular_compiler_plugin.ts

@@ -28,7 +28,6 @@ import {
   createCompilerHost,
   createProgram,
   formatDiagnostics,
-  isNgDiagnostic,
   readConfiguration,
 } from '@angular/compiler-cli';
 import { ChildProcess, ForkOptions, fork } from 'child_process';
@@ -38,8 +37,8 @@ import * as ts from 'typescript';
 import { Compiler, compilation } from 'webpack';
 import { time, timeEnd } from './benchmark';
 import { WebpackCompilerHost } from './compiler_host';
+import { DiagnosticMode, gatherDiagnostics, hasErrors, reportDiagnostics } from './diagnostics';
 import { resolveEntryModuleFromMain } from './entry_resolver';
-import { DiagnosticMode, gatherDiagnostics, hasErrors } from './gather_diagnostics';
 import {
   AngularCompilerPluginOptions,
   ContextElementDependencyConstructor,
@@ -1097,59 +1096,13 @@ export class AngularCompilerPlugin {
     const { emitResult, diagnostics } = this._emit();
     timeEnd('AngularCompilerPlugin._update._emit');
 
-    // 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 (ngErrors.length > 0) {
-      const message = formatDiagnostics(ngErrors);
-      this._errors.push(new Error(message));
-    }
-
-    if (ngWarnings.length > 0) {
-      const message = formatDiagnostics(ngWarnings);
-      this._warnings.push(message);
-    }
+    // Report any diagnostics.
+    reportDiagnostics(
+      diagnostics,
+      this._compilerHost,
+      msg => this._errors.push(new Error(msg)),
+      msg => this._warnings.push(msg),
+    );
 
     this._emitSkipped = !emitResult || emitResult.emitSkipped;
 

packages/ngtools/webpack/src/gather_diagnostics.ts renamed to packages/ngtools/webpack/src/diagnostics.ts

@@ -5,9 +5,13 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import { Diagnostic, Diagnostics, Program } from '@angular/compiler-cli';
+import {
+  CompilerHost, Diagnostic, Diagnostics,
+  Program, formatDiagnostics, isNgDiagnostic,
+} from '@angular/compiler-cli';
 import * as ts from 'typescript';
 import { time, timeEnd } from './benchmark';
+import { WebpackCompilerHost } from './compiler_host';
 
 export enum DiagnosticMode {
   Syntactic = 1 << 0,
@@ -102,3 +106,57 @@ export function gatherDiagnostics(
 
   return allDiagnostics;
 }
+
+export function reportDiagnostics(
+  diagnostics: Diagnostics,
+  compilerHost: WebpackCompilerHost & CompilerHost,
+  reportError: (msg: string) => void,
+  reportWarning: (msg: string) => void,
+) {
+  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, compilerHost);
+    reportError(message);
+  }
+
+  if (tsWarnings.length > 0) {
+    const message = ts.formatDiagnosticsWithColorAndContext(tsWarnings, compilerHost);
+    reportWarning(message);
+  }
+
+  if (ngErrors.length > 0) {
+    const message = formatDiagnostics(ngErrors);
+    reportError(message);
+  }
+
+  if (ngWarnings.length > 0) {
+    const message = formatDiagnostics(ngWarnings);
+    reportWarning(message);
+  }
+}

packages/ngtools/webpack/src/type_checker.ts

@@ -18,7 +18,10 @@ import {
 import * as ts from 'typescript';
 import { time, timeEnd } from './benchmark';
 import { WebpackCompilerHost } from './compiler_host';
-import { CancellationToken, DiagnosticMode, gatherDiagnostics } from './gather_diagnostics';
+import {
+  CancellationToken, DiagnosticMode,
+  gatherDiagnostics, reportDiagnostics,
+} from './diagnostics';
 import { LogMessage, TypeCheckerMessage } from './type_checker_messages';
 
 
@@ -106,21 +109,12 @@ export class TypeChecker {
 
     // Report diagnostics.
     if (!cancellationToken.isCancellationRequested()) {
-      const errors = allDiagnostics.filter((d) => d.category === ts.DiagnosticCategory.Error);
-      const warnings = allDiagnostics.filter((d) => d.category === ts.DiagnosticCategory.Warning);
-
-      if (errors.length > 0) {
-        const message = formatDiagnostics(errors);
-        this.sendMessage(new LogMessage('error', 'ERROR in ' + message));
-      } else {
-        // Reset the changed file tracker only if there are no errors.
-        this._compilerHost.resetChangedFileTracker();
-      }
-
-      if (warnings.length > 0) {
-        const message = formatDiagnostics(warnings);
-        this.sendMessage(new LogMessage('warn', 'WARNING in ' + message));
-      }
+      reportDiagnostics(
+        allDiagnostics,
+        this._compilerHost,
+        msg => this.sendMessage(new LogMessage('error', 'ERROR in ' + msg)),
+        msg => this.sendMessage(new LogMessage('warn', 'WARNING in ' + msg)),
+      );
     }
   }
 

packages/ngtools/webpack/src/type_checker_worker.ts

@@ -7,7 +7,7 @@
  */
 import * as process from 'process';
 import { time, timeEnd } from './benchmark';
-import { CancellationToken } from './gather_diagnostics';
+import { CancellationToken } from './diagnostics';
 import {
   AUTO_START_ARG,
   TypeChecker,