refactor(@angular-devkit/build-angular): update webpack typings (#15334)

Author: clydin

package.json

@@ -101,8 +101,8 @@
     "@types/node": "10.9.4",
     "@types/request": "^2.47.1",
     "@types/semver": "^6.0.0",
-    "@types/webpack": "^4.4.11",
-    "@types/webpack-dev-server": "^3.1.0",
+    "@types/webpack": "^4.32.1",
+    "@types/webpack-dev-server": "^3.1.7",
     "@types/webpack-sources": "^0.1.5",
     "@yarnpkg/lockfile": "1.1.0",
     "ajv": "6.10.2",

packages/angular_devkit/build_angular/plugins/webpack/analytics.ts

@@ -13,7 +13,6 @@ import {
   compilation,
 } from 'webpack';
 import { Source } from 'webpack-sources';
-import Compilation = compilation.Compilation;
 
 const NormalModule = require('webpack/lib/NormalModule');
 
@@ -262,7 +261,7 @@ export class NgBuildAnalyticsPlugin {
     }
   }
 
-  protected _compilation(compiler: Compiler, compilation: Compilation) {
+  protected _compilation(compiler: Compiler, compilation: compilation.Compilation) {
     this._reset();
     compilation.hooks.succeedModule.tap('NgBuildAnalyticsPlugin', this._succeedModule.bind(this));
   }

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

@@ -78,20 +78,20 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
       splitChunks: {
         maxAsyncRequests: Infinity,
         cacheGroups: {
-          default: buildOptions.commonChunk && {
+          default: !!buildOptions.commonChunk && {
             chunks: 'async',
             minChunks: 2,
             priority: 10,
           },
-          common: buildOptions.commonChunk && {
+          common: !!buildOptions.commonChunk && {
             name: 'common',
             chunks: 'async',
             minChunks: 2,
             enforce: true,
             priority: 5,
           },
           vendors: false,
-          vendor: buildOptions.vendorChunk && {
+          vendor: !!buildOptions.vendorChunk && {
             name: 'vendor',
             chunks: 'initial',
             enforce: true,
@@ -105,7 +105,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
           },
         },
       },
-    } as webpack.Options.Optimization,
+    },
     plugins: extraPlugins,
     node: false,
   };

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

@@ -18,7 +18,6 @@ import {
   Configuration,
   ContextReplacementPlugin,
   HashedModuleIdsPlugin,
-  Output,
   debug,
 } from 'webpack';
 import { RawSource } from 'webpack-sources';
@@ -408,8 +407,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
       path: path.resolve(root, buildOptions.outputPath as string),
       publicPath: buildOptions.deployUrl,
       filename: `[name]${targetInFileName}${hashFormat.chunk}.js`,
-      // cast required until typings include `futureEmitAssets` property
-    } as Output,
+    },
     watch: buildOptions.watch,
     watchOptions: {
       poll: buildOptions.poll,

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

@@ -14,7 +14,7 @@ import { getSourceMapDevTool } from './utils';
  * Returns a partial specific to creating a bundle for node
  * @param wco Options which are include the build options and app config
  */
-export function getServerConfig(wco: WebpackConfigOptions) {
+export function getServerConfig(wco: WebpackConfigOptions): Configuration {
   const extraPlugins = [];
   if (wco.buildOptions.sourceMap) {
     const { scripts, styles, hidden } = wco.buildOptions.sourceMap;

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

@@ -101,7 +101,5 @@ export function getTestConfig(
         },
       },
     },
-    // Webpack typings don't yet include the function form for 'chunks',
-    // or the built-in vendors cache group.
-  } as {} as webpack.Configuration;
+  };
 }

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

@@ -1,37 +1,34 @@
-// tslint:disable
-// TODO: cleanup this file, it's copied as is from Angular CLI.
-
 /**
  * @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 CleanCSS from 'clean-css';
 import { Compiler, compilation } from 'webpack';
 import { RawSource, Source, SourceMapSource } from 'webpack-sources';
 
-interface Chunk {
-  files: string[];
-}
-
 export interface CleanCssWebpackPluginOptions {
   sourceMap: boolean;
   test: (file: string) => boolean;
 }
 
 function hook(
-  compiler: any,
-  action: (compilation: any, chunks: Array<Chunk>) => Promise<void | void[]>,
+  compiler: Compiler,
+  action: (
+    compilation: compilation.Compilation,
+    chunks: compilation.Chunk[],
+  ) => Promise<void | void[]>,
 ) {
-  compiler.hooks.compilation.tap('cleancss-webpack-plugin', (compilation: any) => {
-    compilation.hooks.optimizeChunkAssets.tapPromise(
-      'cleancss-webpack-plugin',
-      (chunks: Array<Chunk>) => action(compilation, chunks),
-    );
-  });
+  compiler.hooks.compilation.tap(
+    'cleancss-webpack-plugin',
+    (compilation: compilation.Compilation) => {
+      compilation.hooks.optimizeChunkAssets.tapPromise('cleancss-webpack-plugin', chunks =>
+        action(compilation, chunks),
+      );
+    },
+  );
 }
 
 export class CleanCssWebpackPlugin {
@@ -40,22 +37,22 @@ export class CleanCssWebpackPlugin {
   constructor(options: Partial<CleanCssWebpackPluginOptions>) {
     this._options = {
       sourceMap: false,
-      test: (file) => file.endsWith('.css'),
+      test: file => file.endsWith('.css'),
       ...options,
     };
   }
 
   apply(compiler: Compiler): void {
-    hook(compiler, (compilation: compilation.Compilation, chunks: Array<Chunk>) => {
+    hook(compiler, (compilation: compilation.Compilation, chunks: compilation.Chunk[]) => {
       const cleancss = new CleanCSS({
         compatibility: 'ie9',
         level: {
           2: {
             skipProperties: [
               'transition', // Fixes #12408
               'font', // Fixes #9648
-            ] 
-          }
+            ],
+          },
         },
         inline: false,
         returnPromise: true,
@@ -79,6 +76,7 @@ export class CleanCssWebpackPlugin {
           }
 
           let content: string;
+          // tslint:disable-next-line: no-any
           let map: any;
           if (this._options.sourceMap && asset.sourceAndMap) {
             const sourceAndMap = asset.sourceAndMap();
@@ -101,8 +99,8 @@ export class CleanCssWebpackPlugin {
           }
 
           if (output.errors && output.errors.length > 0) {
-            output.errors
-              .forEach((error: string) => compilation.errors.push(new Error(error)));
+            output.errors.forEach((error: string) => compilation.errors.push(new Error(error)));
+
             return;
           }
 
@@ -116,6 +114,7 @@ export class CleanCssWebpackPlugin {
             newSource = new SourceMapSource(
               output.styles,
               file,
+              // tslint:disable-next-line: no-any
               output.sourceMap.toString() as any,
               content,
               map,

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/index-html-webpack-plugin.ts

@@ -62,9 +62,7 @@ export class IndexHtmlWebpackPlugin {
     compiler.hooks.emit.tapPromise('index-html-webpack-plugin', async compilation => {
       // Get input html file
       const inputContent = await readFile(this._options.input, compilation);
-      (compilation as compilation.Compilation & {
-        fileDependencies: Set<string>;
-      }).fileDependencies.add(this._options.input);
+      compilation.fileDependencies.add(this._options.input);
 
       // Get all files for selected entrypoints
       const files: FileInfo[] = [];

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

@@ -315,19 +315,17 @@ export function buildServerConfig(
     host: serverOptions.host,
     port: serverOptions.port,
     headers: { 'Access-Control-Allow-Origin': '*' },
-    historyApiFallback:
-      !!browserOptions.index &&
-      ({
-        index: `${servePath}/${getIndexOutputFile(browserOptions)}`,
-        disableDotRule: true,
-        htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
-        rewrites: [
-          {
-            from: new RegExp(`^(?!${servePath})/.*`),
-            to: context => url.format(context.parsedUrl),
-          },
-        ],
-      } as WebpackDevServer.HistoryApiFallbackConfig),
+    historyApiFallback: !!browserOptions.index && {
+      index: `${servePath}/${getIndexOutputFile(browserOptions)}`,
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+      rewrites: [
+        {
+          from: new RegExp(`^(?!${servePath})/.*`),
+          to: context => url.format(context.parsedUrl),
+        },
+      ],
+    },
     stats: false,
     compress: styles || scripts,
     watchOptions: {
@@ -434,8 +432,8 @@ function _addLiveReload(
   // This adds it back so that behavior is consistent when using a custom URL path
   let sockjsPath = '';
   if (clientAddress.pathname) {
-      clientAddress.pathname = path.posix.join(clientAddress.pathname, 'sockjs-node');
-      sockjsPath = '&sockPath=' + clientAddress.pathname;
+    clientAddress.pathname = path.posix.join(clientAddress.pathname, 'sockjs-node');
+    sockjsPath = '&sockPath=' + clientAddress.pathname;
   }
 
   const entryPoints = [`${webpackDevServerPath}?${url.format(clientAddress)}${sockjsPath}`];
@@ -465,7 +463,7 @@ function _addLiveReload(
     }
   }
   if (typeof webpackConfig.entry !== 'object' || Array.isArray(webpackConfig.entry)) {
-    webpackConfig.entry = {} as webpack.Entry;
+    webpackConfig.entry = {};
   }
   if (!Array.isArray(webpackConfig.entry.main)) {
     webpackConfig.entry.main = [];

packages/angular_devkit/build_webpack/src/webpack-dev-server/index.ts

@@ -47,7 +47,7 @@ export function runWebpackDevServer(
 
   const devServerConfig = options.devServerConfig || config.devServer || {};
   if (devServerConfig.stats) {
-    config.stats = devServerConfig.stats as webpack.Stats.ToStringOptionsObject;
+    config.stats = devServerConfig.stats;
   }
   // Disable stats reporting by the devserver, we have our own logger.
   devServerConfig.stats = false;

yarn.lock

@@ -935,6 +935,11 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@types/anymatch@*":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
+  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
+
 "@types/bluebird@*":
   version "3.5.26"
   resolved "https://registry.yarnpkg.com/@types/bluebird/-/bluebird-3.5.26.tgz#a38c438ae84fa02431d6892edf86e46edcbca291"
@@ -970,6 +975,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/connect-history-api-fallback@*":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.2.tgz#40a497500238ebf30ae28fdf687c2f92969f2635"
+  integrity sha512-tobKLYh5XszXIQ2lHTeyK1wMi/3K5WiOKb/sl6MENCirlOcXw0jUBHHmST2dLKnYMv6WHWPOSmR8jIF3za0MBQ==
+  dependencies:
+    "@types/express-serve-static-core" "*"
+    "@types/node" "*"
+
 "@types/connect@*":
   version "3.4.32"
   resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.32.tgz#aa0e9616b9435ccad02bc52b5b454ffc2c70ba28"
@@ -1327,11 +1340,12 @@
   dependencies:
     "@types/node" "*"
 
-"@types/webpack-dev-server@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@types/webpack-dev-server/-/webpack-dev-server-3.1.0.tgz#1fae06ad346d2dd09bc5e34745723946458eed58"
-  integrity sha512-nutifgcFiPP3I/+mPWlZCsQNKpWNUGm6qjAMfleZuPfPfybXWymHvlcYsKvg+NPedSkrNh0vu2xKAlak/l+pOg==
+"@types/webpack-dev-server@^3.1.7":
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/@types/webpack-dev-server/-/webpack-dev-server-3.1.7.tgz#a3e7a20366e68bc9853c730b56e994634cb78dac"
+  integrity sha512-VIRkDkBDuOkYRXQ1EG/etisQ3odo6pcjSmA1Si4VYANuNhSBsLxfuPGeGERwCx1nDKxK3aaXnicPzi0gUvxUaw==
   dependencies:
+    "@types/connect-history-api-fallback" "*"
     "@types/express" "*"
     "@types/http-proxy-middleware" "*"
     "@types/serve-static" "*"
@@ -1346,11 +1360,12 @@
     "@types/source-list-map" "*"
     source-map "^0.6.1"
 
-"@types/webpack@*", "@types/webpack@^4.4.11":
-  version "4.4.11"
-  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.4.11.tgz#0ca832870d55c4e92498c01d22d00d02b0f62ae9"
-  integrity sha512-NdESmbpvVEtJgs15kyZYKr5ouLYPMYt9DNG5JEgCekbG/ezFLPCzf4XcAv8caOb+b7x6ieAuSt0eoR0UkSI7RA==
+"@types/webpack@*", "@types/webpack@^4.32.1":
+  version "4.32.1"
+  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.32.1.tgz#6e95010e806f808abd6551c112097ac09035aacf"
+  integrity sha512-9n38CBx9uga1FEAdTipnt0EkbKpsCJFh7xJb1LE65FFb/A6OOLFX022vYsGC1IyVCZ/GroNg9u/RMmlDxGcLIw==
   dependencies:
+    "@types/anymatch" "*"
     "@types/node" "*"
     "@types/tapable" "*"
     "@types/uglify-js" "*"