feat(@angular-devkit/build-angular): use webpack 5

Author: filipesilva

packages/angular_devkit/build_angular/package.json

@@ -46,7 +46,7 @@
     "stylus-loader": "3.0.2",
     "tree-kill": "1.2.1",
     "terser-webpack-plugin": "1.2.0",
-    "webpack": "4.28.2",
+    "webpack": "5.0.0-alpha.3",
     "webpack-dev-middleware": "3.4.0",
     "webpack-dev-server": "3.1.14",
     "webpack-merge": "4.1.5",

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts

@@ -108,8 +108,9 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
             name: 'vendor',
             chunks: 'initial',
             enforce: true,
-            test: (module: { nameForCondition?: Function }, chunks: Array<{ name: string }>) => {
+            test: (module: any) => {
               const moduleName = module.nameForCondition ? module.nameForCondition() : '';
+              const chunks = module.getChunks();
 
               return /[\\/]node_modules[\\/]/.test(moduleName)
                 && !chunks.some(({ name }) => name === 'polyfills'

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -7,7 +7,7 @@
  */
 import * as CopyWebpackPlugin from 'copy-webpack-plugin';
 import * as path from 'path';
-import { HashedModuleIdsPlugin, debug } from 'webpack';
+import { ids, debug } from 'webpack';
 import { AssetPatternObject } from '../../../browser/schema';
 import { BundleBudgetPlugin } from '../../plugins/bundle-budget';
 import { CleanCssWebpackPlugin } from '../../plugins/cleancss-webpack-plugin';
@@ -154,9 +154,11 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
   }
 
   if (buildOptions.showCircularDependencies) {
-    extraPlugins.push(new CircularDependencyPlugin({
-      exclude: /([\\\/]node_modules[\\\/])|(ngfactory\.js$)/,
-    }));
+    // Breaks with Webpack 5:
+    // Error: module property was removed from Dependency (use compilation.moduleGraph.getModule(dependency) instead)
+    // extraPlugins.push(new CircularDependencyPlugin({
+    //   exclude: /([\\\/]node_modules[\\\/])|(ngfactory\.js$)/,
+    // }));
   }
 
   if (buildOptions.statsJson) {
@@ -306,6 +308,8 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
           // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
           // Removing this will cause deprecation warnings to appear.
           test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
+          // Seems like this doesn't hide the warning anymore. Might need to use a filter on the
+          // warnings instead.
           parser: { system: true },
         },
         {
@@ -323,7 +327,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     optimization: {
       noEmitOnErrors: true,
       minimizer: [
-        new HashedModuleIdsPlugin(),
+        new ids.HashedModuleIdsPlugin(),
         // TODO: check with Mike what this feature needs.
         new BundleBudgetPlugin({ budgets: buildOptions.budgets }),
         ...extraMinimizers,

packages/angular_devkit/build_angular/src/angular-cli-files/utilities/stats.ts

@@ -69,13 +69,13 @@ export function statsWarningsToString(json: any, statsConfig: any) {
   const rs = (x: string) => colors ? reset(x) : x;
   const y = (x: string) => colors ? bold(yellow(x)) : x;
 
-  return rs('\n' + json.warnings.map((warning: any) => y(`WARNING in ${warning}`)).join('\n\n'));
+  return rs('\n' + json.warnings.map((warning: any) => y(`WARNING in ${warning.message}`)).join('\n\n'));
 }
 
 export function statsErrorsToString(json: any, statsConfig: any) {
   const colors = statsConfig.colors;
   const rs = (x: string) => colors ? reset(x) : x;
   const r = (x: string) => colors ? bold(red(x)) : x;
 
-  return rs('\n' + json.errors.map((error: any) => r(`ERROR in ${error}`)).join('\n'));
+  return rs('\n' + json.errors.map((error: any) => r(`ERROR in ${error.message}`)).join('\n'));
 }

packages/angular_devkit/build_webpack/package.json

@@ -15,7 +15,7 @@
     "webpack-dev-server": "^3.1.4"
   },
   "devDependencies": {
-    "webpack": "^4.6.0",
+    "webpack": "5.0.0-alpha.3",
     "webpack-dev-server": "^3.1.4"
   }
 }

packages/ngtools/webpack/package.json

@@ -36,6 +36,6 @@
     "@angular/compiler": "^7.2.0-rc.0",
     "@angular/compiler-cli": "^7.2.0-rc.0",
     "typescript": "~3.2.2",
-    "webpack": "^4.0.0"
+    "webpack": "5.0.0-alpha.3"
   }
 }