refactor(@angular-devkit/build-angular): use devkit/build-webpack

package.json

@@ -113,7 +113,6 @@
     "license-webpack-plugin": "^1.3.1",
     "loader-utils": "^1.1.0",
     "material-design-icons": "^3.0.1",
-    "memory-fs": "^0.4.1",
     "mini-css-extract-plugin": "~0.4.0",
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",

packages/angular_devkit/build_angular/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@angular-devkit/architect": "0.0.0",
     "@angular-devkit/build-optimizer": "0.0.0",
+    "@angular-devkit/build-webpack": "0.0.0",
     "@angular-devkit/core": "0.0.0",
     "@ngtools/webpack": "0.0.0",
     "ajv": "~6.4.0",
@@ -27,7 +28,6 @@
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
     "license-webpack-plugin": "^1.3.1",
-    "memory-fs": "^0.4.1",
     "mini-css-extract-plugin": "~0.4.0",
     "minimatch": "^3.0.4",
     "parse5": "^4.0.0",

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

@@ -253,6 +253,10 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
       publicPath: buildOptions.deployUrl,
       filename: `[name]${hashFormat.chunk}.js`,
     },
+    watch: buildOptions.watch,
+    watchOptions: {
+      poll: buildOptions.poll
+    },
     performance: {
       hints: false,
     },

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

@@ -15,3 +15,4 @@ export * from './styles';
 export * from './test';
 export * from './typescript';
 export * from './utils';
+export * from './stats';

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

@@ -0,0 +1,48 @@
+/**
+ * @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 { WebpackConfigOptions } from '../build-options';
+
+const webpackOutputOptions = {
+  colors: true,
+  hash: true, // required by custom stat output
+  timings: true, // required by custom stat output
+  chunks: true, // required by custom stat output
+  chunkModules: false,
+  children: false, // listing all children is very noisy in AOT and hides warnings/errors
+  modules: false,
+  reasons: false,
+  warnings: true,
+  errors: true,
+  assets: true, // required by custom stat output
+  version: false,
+  errorDetails: false,
+  moduleTrace: false,
+};
+
+const verboseWebpackOutputOptions = {
+  children: true,
+  assets: true,
+  version: true,
+  reasons: true,
+  chunkModules: false, // TODO: set to true when console to file output is fixed
+  errorDetails: true,
+  moduleTrace: true,
+};
+
+export function getWebpackStatsConfig(verbose = false) {
+  return verbose
+    ? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions)
+    : webpackOutputOptions;
+}
+
+export function getStatsConfig(wco: WebpackConfigOptions) {
+  const verbose = !!wco.buildOptions.verbose;
+
+  return { stats: getWebpackStatsConfig(verbose) };
+}

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

@@ -16,39 +16,6 @@ export const ngAppResolve = (resolvePath: string): string => {
   return path.resolve(process.cwd(), resolvePath);
 };
 
-const webpackOutputOptions = {
-  colors: true,
-  hash: true, // required by custom stat output
-  timings: true, // required by custom stat output
-  chunks: true, // required by custom stat output
-  chunkModules: false,
-  children: false, // listing all children is very noisy in AOT and hides warnings/errors
-  modules: false,
-  reasons: false,
-  warnings: true,
-  errors: true,
-  assets: true, // required by custom stat output
-  version: false,
-  errorDetails: false,
-  moduleTrace: false,
-};
-
-const verboseWebpackOutputOptions = {
-  children: true,
-  assets: true,
-  version: true,
-  reasons: true,
-  chunkModules: false, // TODO: set to true when console to file output is fixed
-  errorDetails: true,
-  moduleTrace: true,
-};
-
-export function getWebpackStatsConfig(verbose = false) {
-  return verbose
-    ? Object.assign(webpackOutputOptions, verboseWebpackOutputOptions)
-    : webpackOutputOptions;
-}
-
 export interface HashFormat {
   chunk: string;
   extract: string;

packages/angular_devkit/build_angular/src/browser/index.ts

@@ -11,21 +11,21 @@ import {
   BuilderConfiguration,
   BuilderContext,
 } from '@angular-devkit/architect';
+import { LoggingCallback, WebpackBuilder } from '@angular-devkit/build-webpack';
 import { Path, getSystemPath, normalize, resolve, virtualFs } from '@angular-devkit/core';
 import * as fs from 'fs';
-import { Observable, concat, of } from 'rxjs';
+import { Observable, concat, of, throwError } from 'rxjs';
 import { concatMap, last, tap } from 'rxjs/operators';
 import * as ts from 'typescript'; // tslint:disable-line:no-implicit-dependencies
-import * as webpack from 'webpack';
 import { WebpackConfigOptions } from '../angular-cli-files/models/build-options';
 import {
   getAotConfig,
   getBrowserConfig,
   getCommonConfig,
   getNonAotConfig,
+  getStatsConfig,
   getStylesConfig,
 } from '../angular-cli-files/models/webpack-configs';
-import { getWebpackStatsConfig } from '../angular-cli-files/models/webpack-configs/utils';
 import { readTsconfig } from '../angular-cli-files/utilities/read-tsconfig';
 import { requireProjectModule } from '../angular-cli-files/utilities/require-project-module';
 import { augmentAppWithServiceWorker } from '../angular-cli-files/utilities/service-worker';
@@ -58,6 +58,7 @@ export class BrowserBuilder implements Builder<BrowserBuilderSchema> {
     const root = this.context.workspace.root;
     const projectRoot = resolve(root, builderConfig.root);
     const host = new virtualFs.AliasHost(this.context.host as virtualFs.Host<fs.Stats>);
+    const webpackBuilder = new WebpackBuilder({ ...this.context, host });
 
     return of(null).pipe(
       concatMap(() => options.deleteOutputPath
@@ -68,7 +69,7 @@ export class BrowserBuilder implements Builder<BrowserBuilderSchema> {
         options.assets, host, root, projectRoot, builderConfig.sourceRoot)),
       // Replace the assets in options with the normalized version.
       tap((assetPatternObjects => options.assets = assetPatternObjects)),
-      concatMap(() => new Observable(obs => {
+      concatMap(() => {
         // Ensure Build Optimizer is only used with AOT.
         if (options.buildOptimizer && !options.aot) {
           throw new Error('The `--build-optimizer` option cannot be used without `--aot`.');
@@ -79,80 +80,35 @@ export class BrowserBuilder implements Builder<BrowserBuilderSchema> {
           webpackConfig = this.buildWebpackConfig(root, projectRoot, host,
             options as NormalizedBrowserBuilderSchema);
         } catch (e) {
-          obs.error(e);
-
-          return;
+          return throwError(e);
         }
-        const webpackCompiler = webpack(webpackConfig);
-        const statsConfig = getWebpackStatsConfig(options.verbose);
-
-        const callback: webpack.compiler.CompilerCallback = (err, stats) => {
-          if (err) {
-            return obs.error(err);
-          }
-
-          const json = stats.toJson(statsConfig);
-          if (options.verbose) {
-            this.context.logger.info(stats.toString(statsConfig));
-          } else {
-            this.context.logger.info(statsToString(json, statsConfig));
-          }
-
-          if (stats.hasWarnings()) {
-            this.context.logger.warn(statsWarningsToString(json, statsConfig));
-          }
-          if (stats.hasErrors()) {
-            this.context.logger.error(statsErrorsToString(json, statsConfig));
-          }
-
-          if (options.watch) {
-            obs.next({ success: !stats.hasErrors() });
-
-            // Never complete on watch mode.
-            return;
-          } else {
-            if (builderConfig.options.serviceWorker) {
-              augmentAppWithServiceWorker(
-                this.context.host,
-                root,
-                projectRoot,
-                resolve(root, normalize(options.outputPath)),
-                options.baseHref || '/',
-                options.ngswConfigPath,
-              ).then(
-                () => {
-                  obs.next({ success: !stats.hasErrors() });
-                  obs.complete();
-                },
-                (err: Error) => {
-                  // We error out here because we're not in watch mode anyway (see above).
-                  obs.error(err);
-                },
-              );
-            } else {
-              obs.next({ success: !stats.hasErrors() });
-              obs.complete();
-            }
-          }
-        };
 
-        try {
-          if (options.watch) {
-            const watching = webpackCompiler.watch({ poll: options.poll }, callback);
-
-            // Teardown logic. Close the watcher when unsubscribed from.
-            return () => watching.close(() => { });
-          } else {
-            webpackCompiler.run(callback);
-          }
-        } catch (err) {
-          if (err) {
-            this.context.logger.error(
-              '\nAn error occured during the build:\n' + ((err && err.stack) || err));
-          }
-          throw err;
+        return webpackBuilder.runWebpack(webpackConfig, getBrowserLoggingCb(options.verbose));
+      }),
+      concatMap(buildEvent => {
+        if (buildEvent.success && !options.watch && options.serviceWorker) {
+          return new Observable(obs => {
+            augmentAppWithServiceWorker(
+              this.context.host,
+              root,
+              projectRoot,
+              resolve(root, normalize(options.outputPath)),
+              options.baseHref || '/',
+              options.ngswConfigPath,
+            ).then(
+              () => {
+                obs.next({ success: true });
+                obs.complete();
+              },
+              (err: Error) => {
+                obs.error(err);
+              },
+            );
+          });
+        } else {
+          return of(buildEvent);
         }
-      })),
+      }),
     );
   }
 
@@ -185,6 +141,7 @@ export class BrowserBuilder implements Builder<BrowserBuilderSchema> {
       getCommonConfig(wco),
       getBrowserConfig(wco),
       getStylesConfig(wco),
+      getStatsConfig(wco),
     ];
 
     if (wco.buildOptions.main || wco.buildOptions.polyfills) {
@@ -213,4 +170,22 @@ export class BrowserBuilder implements Builder<BrowserBuilderSchema> {
   }
 }
 
+export const getBrowserLoggingCb = (verbose: boolean): LoggingCallback =>
+  (stats, config, logger) => {
+    // config.stats contains our own stats settings, added during buildWebpackConfig().
+    const json = stats.toJson(config.stats);
+    if (verbose) {
+      logger.info(stats.toString(config.stats));
+    } else {
+      logger.info(statsToString(json, config.stats));
+    }
+
+    if (stats.hasWarnings()) {
+      logger.warn(statsWarningsToString(json, config.stats));
+    }
+    if (stats.hasErrors()) {
+      logger.error(statsErrorsToString(json, config.stats));
+    }
+  };
+
 export default BrowserBuilder;