fix(@angular/cli): show warnings on serve

Errors and warnings neet to be printed separately.

Followup to #6989
Fix #7213

Author: filipesilva

packages/@angular/cli/tasks/build.ts

@@ -7,7 +7,7 @@ import { BuildTaskOptions } from '../commands/build';
 import { NgCliWebpackConfig } from '../models/webpack-config';
 import { getWebpackStatsConfig } from '../models/webpack-configs/utils';
 import { CliConfig } from '../models/config';
-import {statsToString} from '../utilities/stats';
+import { statsToString, statsWarningsToString, statsErrorsToString } from '../utilities/stats';
 
 const Task = require('../ember-cli/lib/models/task');
 const SilentError = require('silent-error');
@@ -47,6 +47,13 @@ export default Task.extend({
           this.ui.writeLine(statsToString(json, statsConfig));
         }
 
+        if (stats.hasWarnings()) {
+          this.ui.writeLine(statsWarningsToString(json, statsConfig));
+        }
+        if (stats.hasErrors()) {
+          this.ui.writeError(statsErrorsToString(json, statsConfig));
+        }
+
         if (runTaskOptions.watch) {
           return;
         } else if (runTaskOptions.statsJson) {

packages/@angular/cli/tasks/serve.ts

@@ -9,7 +9,7 @@ import { NgCliWebpackConfig } from '../models/webpack-config';
 import { ServeTaskOptions } from '../commands/serve';
 import { CliConfig } from '../models/config';
 import { getAppFromConfig } from '../utilities/app-utils';
-import {statsToString} from '../utilities/stats';
+import { statsToString, statsWarningsToString, statsErrorsToString } from '../utilities/stats';
 
 const WebpackDevServer = require('webpack-dev-server');
 const Task = require('../ember-cli/lib/models/task');
@@ -215,13 +215,13 @@ export default Task.extend({
     const server = new WebpackDevServer(webpackCompiler, webpackDevServerConfiguration);
     if (!serveTaskOptions.verbose) {
       webpackCompiler.plugin('done', (stats: any) => {
-        const str = statsToString(stats.toJson(), statsConfig);
+        const json = stats.toJson('verbose');
+        this.ui.writeLine(statsToString(json, statsConfig));
+        if (stats.hasWarnings()) {
+          this.ui.writeLine(statsWarningsToString(json, statsConfig));
+        }
         if (stats.hasErrors()) {
-          this.ui.writeError(str);
-        } else if (stats.hasWarnings()) {
-          this.ui.writeWarnLine(str);
-        } else {
-          this.ui.writeLine(str);
+          this.ui.writeError(statsErrorsToString(json, statsConfig));
         }
       });
     }

packages/@angular/cli/utilities/stats.ts

@@ -1,4 +1,4 @@
-import { bold, green, reset, white, yellow } from 'chalk';
+import { bold, green, red, reset, white, yellow } from 'chalk';
 import { stripIndents } from 'common-tags';
 
 
@@ -16,12 +16,12 @@ function _formatSize(size: number): string {
 
 export function statsToString(json: any, statsConfig: any) {
   const colors = statsConfig.colors;
-  const r = (x: string) => colors ? reset(x) : x;
+  const rs = (x: string) => colors ? reset(x) : x;
   const w = (x: string) => colors ? bold(white(x)) : x;
   const g = (x: string) => colors ? bold(green(x)) : x;
   const y = (x: string) => colors ? bold(yellow(x)) : x;
 
-  return r(stripIndents`
+  return rs(stripIndents`
     Date: ${w(new Date().toISOString())}
     Hash: ${w(json.hash)}
     Time: ${w('' + json.time)}ms
@@ -38,8 +38,21 @@ export function statsToString(json: any, statsConfig: any) {
 
       return `chunk {${y(chunk.id)}} ${g(files)}${names}${size}${parents} ${initial}${flags}`;
     }).join('\n')}
-
-    ${json.warnings.map((warning: any) => y(`WARNING in ${warning}`)).join('\n\n')}
-    ${json.errors.map((error: any) => r(`ERROR in ${error}`)).join('\n')}
     `);
 }
+
+export function statsWarningsToString(json: any, statsConfig: any) {
+  const colors = statsConfig.colors;
+  const rs = (x: string) => colors ? reset(x) : x;
+  const y = (x: string) => colors ? bold(yellow(x)) : x;
+
+  return rs('\n' + json.warnings.map((warning: any) => y(`WARNING in ${warning}`)).join('\n\n'));
+}
+
+export function statsErrorsToString(json: any, statsConfig: any) {
+  const colors = statsConfig.colors;
+  const rs = (x: string) => colors ? reset(x) : x;
+  const r = (x: string) => colors ? bold(red(x)) : x;
+
+  return rs('\n' + json.errors.map((error: any) => r(`ERROR in ${error}`)).join('\n'));
+}