Angular CLI构建 - 显示构建状态通知

Question

我在尝试将webpack-notifier插件添加到全新的Angular 7应用程序时遇到了一些有趣的问题。我的想法是在控制台中保持ng build --watch运行，并在当前构建失败（或从失败状态恢复）时收到气球通知。

TL;DR;

当运行ng build --watch时，即使构建失败，webpack done编译器钩子的错误数组也可能为空。如果需要错误数组来显示损坏的构建通知，是否有任何解决方法？

---

现在是细节部分。

首先，我使用 ng new my-app 创建了一个新的 Angular 项目。 然后，我按照 这里 的指示添加了自定义 webpack 配置。 接着，我使用了 webpack-notifier 源代码 并将其用作 webpack.partial.js 中的一部分。

module.exports = {
    plugins: [
        new WebpackNotifierPlugin()
    ]
}

让我们试一下：ng build --watch --extra-webpack-config webpack.partial.js

好的，一切都运行正常，现在我们通过向app.component.ts添加一些无意义的内容来破坏构建。正如预期的那样，我可以在控制台中看到错误，并通过notifier插件看到弹出通知。现在，我恢复了破坏性更改，等待构建变为绿色，并再次添加破坏性更改。

结果，我在控制台中收到了错误消息，但没有弹出错误通知。

让我们深入了解。WebpackNotifierPlugin使用webpack编译器钩子：

WebpackNotifierPlugin.prototype.apply = function(compiler) {
  if (compiler.hooks) {
    var plugin = { name: 'Notifier' };

    compiler.hooks.done.tap(plugin, this.compilationDone.bind(this));
  } else {
    compiler.plugin('done', this.compilationDone.bind(this));
  }
};

WebpackNotifierPlugin.prototype.compilationDone = function(stats) {
  // read the stats and show the message
}

Webpack done hook 有一个 stats 参数，而通知插件期望 stats.compilation.errors 数组包含错误。但是，如果我将其记录到输出中：

WebpackNotifierPlugin.prototype.compilationDone = function(stats) {
    console.log('Errors: ')
    console.info(stats.compilation.errors);
};

事实证明，即使控制台中存在错误，stats.compilation.errors也可能为空:

你对这种行为的原因有什么想法，是否有任何解决方法？

- Usurer

Answer 1

这种行为的原因是分叉的类型检查器不会将语义错误传递到下一行。作为解决方法，可以在构建选项中添加"forkTypeChecker": false（它是angular.json文件中projects.[app-name].achitect.build.options部分的一部分）。

更详细的描述可以在Angular CLI问题跟踪器中找到： https://github.com/angular/angular-cli/issues/13870

- Usurer