Angular CLI build - show build state notifications

Question

I've got some quite interesting issue while I was trying to add webpack-notifier plugin to a brand new Angular 7 application. The idea was to keep ng build --watch running in a console and have a balloon notifications if the current build fails (or restored back from the failed state).

TL;DR;

When running ng build --watch, the array of errors for the webpack done compiler hook could be empty even if the build has failed. Is there any workaround for this if I need the errors array to show the broken build notification?

---

Now the details.

At first, I've created a new Angular project using ng new my-app Then I've added a custom webpack config by following ngx-build-plus instructions from here. Then I've taken a webpack-notifier source and used it in webpack.partial.js as

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

Let's try it: ng build --watch --extra-webpack-config webpack.partial.js

Okay, everything works fine, let's break the build by adding some nonsense to, say, app.component.ts. As expected, I can see an error in console and a popup notification by the notifier plugin. Now, I revert the breaking changes back, wait for build to turn green and add breaking changes again.

As a result, I have an error message in console, but no popup error notification.

Let's go deeper. WebpackNotifierPlugin uses webpack compiler hooks:

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 has one stats parameter and notifier plugin expects stats.compilation.errors array to contain, well, errors. But if I'll log it to the output:

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

it turns out that stats.compilation.errors could be empty even if there are errors in console:

Do you have any ideas on the cause of such behaviour and whether there's any workaround?

Answer 1

The reason of such a behaviour is that forked type checker doesn't pass semantic errors down the line. As a workaround one may add "forkTypeChecker": false to the build options (its projects.[app-name].achitect.build.options part of the angular.json)

A bit more detailed description could be found in the Angular CLI issue tracker: https://github.com/angular/angular-cli/issues/13870