fix(webpack): fix some problems with errors not reported.

When analyzing the program or generating code AoT, the plugin was sometimes missing errors. On build, nothing was outputted. Now it will show the error encountered before leaving the process.

On serve, hte problem is in webpack-dev-server which does not give us a way to report the error. It seems like webpack-dev-server is not compatible with async plugins, which the @ngtools/webpack is. This is a problem with webpack-dev-server itself.

Author: hansl

packages/@ngtools/webpack/src/plugin.ts

@@ -70,6 +70,7 @@ export class AotPlugin implements Tapable {
   private _tsConfigPath: string;
 
   private _donePromise: Promise<void>;
+  private _err: Error;
   private _compiler: any = null;
   private _compilation: any = null;
 
@@ -196,9 +197,11 @@ export class AotPlugin implements Tapable {
     });
 
     // Virtual file system.
-    compiler.resolvers.normal.plugin('resolve', (request: any, cb?: () => void) => {
+    compiler.resolvers.normal.plugin('resolve', (request: any, cb?: (err?: any) => void) => {
       if (request.request.match(/\.ts$/)) {
-        this.done.then(() => cb());
+        this.done
+          .then(() => cb())
+          .catch((err) => cb(err));
       } else {
         cb();
       }
@@ -212,9 +215,8 @@ export class AotPlugin implements Tapable {
 
   private _make(compilation: any, cb: (err?: any, request?: any) => void) {
     this._compilation = compilation;
-
     if (this._compilation._ngToolsWebpackPluginInstance) {
-      cb(new Error('An @ngtools/webpack plugin already exist for this compilation.'));
+      return cb(new Error('An @ngtools/webpack plugin already exist for this compilation.'));
     }
     this._compilation._ngToolsWebpackPluginInstance = this;
 
@@ -227,28 +229,28 @@ export class AotPlugin implements Tapable {
       basePath: this.basePath
     };
 
-    let promise = Promise.resolve();
-    if (!this._skipCodeGeneration) {
-      // Create the Code Generator.
-      const codeGenerator = ngCompiler.CodeGenerator.create(
-        this._angularCompilerOptions,
-        i18nOptions,
-        this._program,
-        this._compilerHost,
-        new ngCompiler.NodeReflectorHostContext(this._compilerHost),
-        this._resourceLoader
-      );
-
-      // We need to temporarily patch the CodeGenerator until either it's patched or allows us
-      // to pass in our own ReflectorHost.
-      // TODO: remove this.
-      patchReflectorHost(codeGenerator);
-      promise = promise.then(() => codeGenerator.codegen({
-        transitiveModules: true
-      }));
-    }
+    this._donePromise = Promise.resolve()
+      .then(() => {
+        if (this._skipCodeGeneration) {
+          return;
+        }
 
-    this._donePromise = promise
+        // Create the Code Generator.
+        const codeGenerator = ngCompiler.CodeGenerator.create(
+          this._angularCompilerOptions,
+          i18nOptions,
+          this._program,
+          this._compilerHost,
+          new ngCompiler.NodeReflectorHostContext(this._compilerHost),
+          this._resourceLoader
+        );
+
+        // We need to temporarily patch the CodeGenerator until either it's patched or allows us
+        // to pass in our own ReflectorHost.
+        // TODO: remove this.
+        patchReflectorHost(codeGenerator);
+        return codeGenerator.codegen({ transitiveModules: true });
+      })
       .then(() => {
         // Create a new Program, based on the old one. This will trigger a resolution of all
         // transitive modules, which include files that might just have been generated.

packages/angular-cli/tasks/build-webpack.ts

@@ -6,6 +6,7 @@ import { BuildOptions } from '../commands/build';
 import { NgCliWebpackConfig } from '../models/webpack-config';
 import { getWebpackStatsConfig } from '../models/';
 import { CliConfig } from '../models/config';
+import { stripIndents } from 'common-tags';
 
 // Configure build and output;
 let lastHash: any = null;
@@ -36,7 +37,9 @@ export default <any>Task.extend({
 
     return new Promise((resolve, reject) => {
       webpackCompiler.run((err: any, stats: any) => {
-        if (err) { return reject(err); }
+        if (err) {
+          return reject(err);
+        }
 
         // Don't keep cache
         // TODO: Make conditional if using --watch
@@ -47,8 +50,18 @@ export default <any>Task.extend({
           process.stdout.write(stats.toString(statsConfig) + '\n');
         }
 
-        return stats.hasErrors() ? reject() : resolve();
+        if (stats.hasErrors()) {
+          reject();
+        } else {
+          resolve();
+        }
       });
+    })
+    .catch((err: Error) => {
+      if (err) {
+        this.ui.writeError('\nAn error occured during the build:\n' + ((err && err.stack) || err));
+      }
+      throw err;
     });
   }
 });

packages/angular-cli/tasks/serve-webpack.ts

@@ -115,20 +115,18 @@ export default Task.extend({
 
     const server = new WebpackDevServer(webpackCompiler, webpackDevServerConfiguration);
     return new Promise((resolve, reject) => {
-      server.listen(serveTaskOptions.port,
-                    `${serveTaskOptions.host}`,
-                    function(err: any, stats: any) {
+      server.listen(serveTaskOptions.port, `${serveTaskOptions.host}`, (err: Error, stats: any) => {
         if (err) {
-          console.error(err.stack || err);
-          if (err.details) { console.error(err.details); }
-          reject(err.details);
-        } else {
-          const { open, host, port } = serveTaskOptions;
-          if (open) {
-            opn(url.format({ protocol: 'http', hostname: host, port: port.toString() }));
-          }
+          return reject(err);
+        }
+
+        const { open, host, port } = serveTaskOptions;
+        if (open) {
+          opn(url.format({ protocol: 'http', hostname: host, port: port.toString() }));
         }
       });
+    }).catch((err) => {
+      this.ui.writeError(err.stack);
     });
   }
 });