angular-cli: Flag to disable build/serve colors for text viewers that don't support them

@sumitarora consider changing the label to type: bug as per previous comment, and also maybe change the priority 🙏

This should be a bare basic option for Angular cli, as it is intended to be used within a CI, and it might not have color support out of the box (With Jenkins + Blue Ocean for instance, it cannot be achieved. And the logs are just crazy and hard to look at)

I think it should be a high priority, as the main reason for a CLI is to be a interface from the User to the Code, and we cannot understand the interface if information is not clear.

Funny thing, it looks like the following line in angular-cli sources is responsible for colorizing the ng build output:

https://github.com/angular/angular-cli/blob/b6b8acc1bf9928fc8016d77980dc61e9d978876b/packages/%40angular/cli/models/webpack-configs/utils.ts#L8

It’s compiled into utils.js version upon install, and if you replace colors property value with false there - the color is gone everywhere in angular-cli output. So, despite dependency on supports-color, it just isn’t invoked by ng build ....

Actually I’d consider it a bug rather than a feature request - other angular-cli commands seem to use supports-color correctly - e.g., ng help | less doesn’t show color codes. I suppose it’s because the webpack options override becomes global somehow.

UPDATE:

I have played with the issue a bit, looks like the only thing colorized forcibly is webpack output. So, a quick and dirty way to make ng build recognize the terminal and apply colors as chalk does is as follows:

diff --git a/packages/@angular/cli/tasks/build.ts b/packages/@angular/cli/tasks/build.ts
index 580de684..50579d69 100644
--- a/packages/@angular/cli/tasks/build.ts
+++ b/packages/@angular/cli/tasks/build.ts
@@ -1,6 +1,7 @@
 import * as fs from 'fs-extra';
 import * as path from 'path';
 import * as webpack from 'webpack';
+import chalk from 'chalk';
 
 import { getAppFromConfig } from '../utilities/app-utils';
 import { BuildTaskOptions } from '../commands/build';
@@ -36,7 +37,12 @@ export default Task.extend({
 
     const webpackConfig = new NgCliWebpackConfig(runTaskOptions, app).buildConfig();
     const webpackCompiler = webpack(webpackConfig);
-    const statsConfig = getWebpackStatsConfig(runTaskOptions.verbose);
+    const statsConfig = Object.assign(
+      getWebpackStatsConfig(runTaskOptions.verbose),
+      {
+        colors: (chalk.supportsColor ? true : false)
+      }
+    );
 
     return new Promise((resolve, reject) => {
       const callback: webpack.compiler.CompilerCallback = (err, stats) => {

Please use the environment variable NO_COLOR to align with the NO_COLOR-project: http://no-color.org/

For me, using a solarized theme in my terminal, the output is particularly unreadable.

@ivanseidel There are some things that help improve it, like, --no-progess (or similar). But I know your feeling, it’s a shock, especially before there was an issue, and it felt like no one else had ever launched it on jenkins or redirected stdout to file and seen the horror.

Note: currently this can be removed like this on UNIX: ng build | sed -r "s/\x1B\[([0-9]{1,2}(;[0-9]{1,2})?)?[mGK]//g" > log.txt According to: https://stackoverflow.com/a/18000433 It works for me, however, I cannot guarantee it’s consistency, so exercise caution when piping your logs.

Edit: using this for ng serve causes a segfault for me. I suppose it still can help when retrieving the files.

Just an update for everyone interested (as I’ve spend some time investigating this issue myself today): This will be fixed in @angular-devkit/build-angular v0.7.0 as they removed chalk and are using their own terminal capabilities from @angular-devkit/core. Haven’t seen this mentioned anywhere though.

You can use an environment variable like CI=1, to disable color output if you’re doing something custom, but it seems it’s already preconfigured, for the most common solutions.

See here how it’s determined if to use colors or not: https://github.com/angular/angular-cli/blob/44086c60ff1d6c26d30850bef125120f6c498ac1/packages/angular_devkit/core/src/terminal/caps.ts#L79-L144

Based on @rsxdalv comment above, when running ng build in MS-Studio’s Package Manager Console, the escape sequences can be removed using

ng build --progress=false | %{$_ -replace "\x1B\[([0-9]{1,2}(;[0-9]{1,2})?)?[mGK]",""}