diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/any-component-style-budget-checker.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/any-component-style-budget-checker.ts index 2717bf086400..ffa3df9a02c0 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/any-component-style-budget-checker.ts +++ b/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); diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/bundle-budget.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/bundle-budget.ts index d68157e13132..41a84a5488cd 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/bundle-budget.ts +++ b/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; } } diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/common-js-usage-warn-plugin.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/common-js-usage-warn-plugin.ts index c28ef5a1341d..e5bb86e949a1 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/common-js-usage-warn-plugin.ts +++ b/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); } } diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/optimize-css-webpack-plugin.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/optimize-css-webpack-plugin.ts index fddabc6e82dd..aed3602b8b48 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/optimize-css-webpack-plugin.ts +++ b/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; diff --git a/packages/angular_devkit/build_angular/src/dev-server/index.ts b/packages/angular_devkit/build_angular/src/dev-server/index.ts index 3a69be9611da..034003b44e55 100644 --- a/packages/angular_devkit/build_angular/src/dev-server/index.ts +++ b/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; diff --git a/packages/angular_devkit/build_angular/src/utils/webpack-diagnostics.ts b/packages/angular_devkit/build_angular/src/utils/webpack-diagnostics.ts new file mode 100644 index 000000000000..7e7fe746e66d --- /dev/null +++ b/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); + } +}