fix(@angular/cli): throw xi18n errors

Fixes #8065

Author: ocombe

packages/@angular/cli/tasks/extract-i18n.ts

@@ -3,6 +3,8 @@ import * as webpack from 'webpack';
 import { AngularCompilerPlugin } from '@ngtools/webpack';
 import { XI18nWebpackConfig } from '../models/webpack-xi18n-config';
 import { getAppFromConfig } from '../utilities/app-utils';
+import {getWebpackStatsConfig} from '../models/webpack-configs';
+import {statsErrorsToString, statsWarningsToString} from '../utilities/stats';
 
 const Task = require('../ember-cli/lib/models/task');
 const MemoryFS = require('memory-fs');
@@ -34,27 +36,26 @@ export const Extracti18nTask = Task.extend({
 
     const webpackCompiler = webpack(config);
     webpackCompiler.outputFileSystem = new MemoryFS();
+    const statsConfig = getWebpackStatsConfig(runTaskOptions.verbose);
 
     return new Promise((resolve, reject) => {
       const callback: webpack.compiler.CompilerCallback = (err, stats) => {
         if (err) {
           return reject(err);
         }
 
+        const json = stats.toJson('verbose');
+        if (stats.hasWarnings()) {
+          this.ui.writeLine(statsWarningsToString(json, statsConfig));
+        }
         if (stats.hasErrors()) {
-          reject();
+          reject(statsErrorsToString(json, statsConfig));
         } else {
           resolve();
         }
       };
 
       webpackCompiler.run(callback);
-    })
-    .catch((err: Error) => {
-      if (err) {
-        this.ui.writeError('\nAn error occured during the i18n extraction:\n'
-          + ((err && err.stack) || err));
-      }
     });
   }
 });

tests/e2e/tests/i18n/extract-errors.ts

@@ -0,0 +1,18 @@
+import { ng } from '../../utils/process';
+import { writeFile } from '../../utils/fs';
+import { expectToFail } from '../../utils/utils';
+import { join } from 'path';
+
+export default function() {
+  return ng('generate', 'component', 'i18n-test')
+    .then(() => writeFile(
+      join('src/app/i18n-test', 'i18n-test.component.html'),
+      '<p i18n>Hello world <span i18n>inner</span></p>'))
+    .then(() => expectToFail(() => ng('xi18n')))
+    .then(({ message }) => {
+      if (!message.includes('Could not mark an element as' +
+          ' translatable inside a translatable section')) {
+        throw new Error(`Expected i18n extraction error, got this instead:\n${message}`);
+      }
+    });
+}