Блог

У меня возникла довольно интересная проблема, когда я пытался добавить webpack-notifier плагин к совершенно новому приложению Angular 7. Идея состояла в том, чтобы продолжать ng build --watch работать в консоли и получать уведомления о воздушном шаре, если текущая сборка завершается неудачей (или восстанавливается из состояния сбоя).

TL; DR;

При запуске ng build --watch массив ошибок для перехвата done компилятора webpack может быть пустым, даже если сборка завершилась неудачно. Есть ли какой-либо обходной путь для этого, если мне нужен массив ошибок, чтобы показывать уведомление о поврежденной сборке?

Теперь подробности.

Сначала я создал новый проект Angular, используя ng new my-app Затем я добавил пользовательскую конфигурацию webpack, следуя ngx-build-plus инструкциям из здесь. Затем я взял 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
}
  

У done крючка Webpack есть один stats параметр, и плагин-уведомитель ожидает, что stats.compilation.errors массив будет содержать, ну, ошибки. Но если я запишу это в выходные данные:

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

оказывается, что stats.compilation.errors может быть пустым, даже если в консоли есть ошибки:

Есть ли у вас какие-либо идеи о причине такого поведения и есть ли какой-либо обходной путь?

Причина такого поведения заключается в том, что средство проверки разветвленного типа не передает семантические ошибки по строке. В качестве обходного пути можно добавить "forkTypeChecker": false в параметры сборки (его проекты.[app-name].achitect.build.options часть angular.json)

Более подробное описание можно найти в журнале отслеживания проблем Angular CLI:https://github.com/angular/angular-cli/issues/13870