refactor(@angular-devkit/build-angular): add webpack diagnostic helpers

Author: clydin

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/any-component-style-budget-checker.ts

@@ -9,6 +9,7 @@
 import * as path from 'path';
 import { Compiler } from 'webpack';
 import { Budget, Type } from '../../../src/browser/schema';
+import { addError, addWarning } from '../../utils/webpack-diagnostics';
 import { ThresholdSeverity, calculateThresholds, checkThresholds } from '../utilities/bundle-calculator';
 
 const PLUGIN_NAME = 'AnyComponentStyleBudgetChecker';
@@ -53,10 +54,10 @@ export class AnyComponentStyleBudgetChecker {
           for (const { severity, message } of checkThresholds(thresholds[Symbol.iterator](), size, label)) {
             switch (severity) {
               case ThresholdSeverity.Warning:
-                compilation.warnings.push(message);
+                addWarning(compilation, message);
                 break;
               case ThresholdSeverity.Error:
-                compilation.errors.push(message);
+                addError(compilation, message);
                 break;
               default:
                 assertNever(severity);

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/bundle-budget.ts

@@ -8,6 +8,7 @@
 import { Compiler } from 'webpack';
 import { Budget } from '../../browser/schema';
 import { ProcessBundleResult } from '../../utils/process-bundle';
+import { addError, addWarning } from '../../utils/webpack-diagnostics';
 import { ThresholdSeverity, checkBudgets } from '../utilities/bundle-calculator';
 
 export interface BundleBudgetPluginOptions {
@@ -33,10 +34,10 @@ export class BundleBudgetPlugin {
       for (const { severity, message } of checkBudgets(budgets, stats, processResults)) {
         switch (severity) {
           case ThresholdSeverity.Warning:
-            compilation.warnings.push(`budgets: ${message}`);
+            addWarning(compilation, `budgets: ${message}`);
             break;
           case ThresholdSeverity.Error:
-            compilation.errors.push(`budgets: ${message}`);
+            addError(compilation, `budgets: ${message}`);
             break;
         }
       }

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/common-js-usage-warn-plugin.ts

@@ -9,6 +9,7 @@
 
 import { isAbsolute } from 'path';
 import { Compiler, compilation } from 'webpack';
+import { addWarning } from '../../utils/webpack-diagnostics';
 
 // Webpack doesn't export these so the deep imports can potentially break.
 const CommonJsRequireDependency = require('webpack/lib/dependencies/CommonJsRequireDependency');
@@ -93,7 +94,7 @@ export class CommonJsUsageWarnPlugin {
 
               // Avoid showing the same warning multiple times when in 'watch' mode.
               if (!this.shownWarnings.has(warning)) {
-                compilation.warnings.push(warning);
+                addWarning(compilation, warning);
                 this.shownWarnings.add(warning);
               }
             }

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/optimize-css-webpack-plugin.ts

@@ -9,6 +9,7 @@ import * as cssNano from 'cssnano';
 import { ProcessOptions, Result } from 'postcss';
 import { Compiler, compilation } from 'webpack';
 import { RawSource, Source, SourceMapSource } from 'webpack-sources';
+import { addWarning } from '../../utils/webpack-diagnostics';
 
 export interface OptimizeCssWebpackPluginOptions {
   sourceMap: boolean;
@@ -99,9 +100,8 @@ export class OptimizeCssWebpackPlugin {
               .catch(reject);
           });
 
-          const warnings = output.warnings();
-          if (warnings.length) {
-            compilation.warnings.push(...warnings.map(({ text }) => text));
+          for (const { text } of output.warnings()) {
+            addWarning(compilation, text);
           }
 
           let newSource;

packages/angular_devkit/build_angular/src/dev-server/index.ts

@@ -36,6 +36,7 @@ import { I18nOptions } from '../utils/i18n-options';
 import { createI18nPlugins } from '../utils/process-bundle';
 import { assertCompatibleAngularVersion } from '../utils/version';
 import { getIndexInputFile, getIndexOutputFile } from '../utils/webpack-browser-config';
+import { addError, addWarning } from '../utils/webpack-diagnostics';
 import { Schema } from './schema';
 const open = require('open');
 
@@ -354,9 +355,9 @@ async function setupLocalize(
           }
           for (const diagnostic of diagnostics.messages) {
             if (diagnostic.type === 'error') {
-              compilation.errors.push(diagnostic.message);
+              addError(compilation, diagnostic.message);
             } else {
-              compilation.warnings.push(diagnostic.message);
+              addWarning(compilation, diagnostic.message);
             }
           }
           diagnostics.messages.length = 0;

packages/angular_devkit/build_angular/src/utils/webpack-diagnostics.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 * as webpack from 'webpack';
+
+const WebpackError = require('webpack/lib/WebpackError');
+const isWebpackFiveOrHigher = (() => {
+  if (typeof webpack.version === 'string') {
+    const versionParts = webpack.version.split('.');
+    if (versionParts[0] && Number(versionParts[0]) >= 5) {
+      return true;
+    }
+  }
+
+  return false;
+})();
+
+export function addWarning(compilation: webpack.compilation.Compilation, message: string): void {
+  if (isWebpackFiveOrHigher) {
+    compilation.warnings.push(new WebpackError(message));
+  } else {
+    // Allows building with either Webpack 4 or 5+ types
+    // tslint:disable-next-line: no-any
+    compilation.warnings.push(message as any);
+  }
+}
+
+export function addError(compilation: webpack.compilation.Compilation, message: string): void {
+  if (isWebpackFiveOrHigher) {
+    compilation.errors.push(new WebpackError(message));
+  } else {
+    // Allows building with either Webpack 4 or 5+ types
+    // tslint:disable-next-line: no-any
+    compilation.errors.push(new Error(message) as any);
+  }
+}