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;