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

[rsxdalv]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Versions.

@angular/cli: 1.0.0

Repro steps.

ng build >> log.txt

The log given by the failure.

chunk {�[1m�[33m4�[39m�[22m} �[1m�[32minline.bundle.js, inline.bundle.js.map�[39m�[22m (inline) 0 bytes�[1m�[33m [entry]�[39m�[22m�[1m�[32m [rendered]�[39m�[22m

Desired functionality.

There's no way to disable colors in output. Leading to lines and lines of:
chunk {�[1m�[33m4�[39m�[22m} �[1m�[32minline.bundle.js, inline.bundle.js.map�[39m�[22m (inline) 0 bytes�[1m�[33m [entry]�[39m�[22m�[1m�[32m [rendered]�[39m�[22m
in log files. This makes log lines absurdly long and generally reader unfriendly. Plus, the color option being only available for testing makes it even more confusing, as one would expect such an option to be global.

Mention any other details that might be useful.

This is an issue with any non-console or otherwise color unsupporting viewer. For both builds and live reload, in high reliance systems it doesn't seem viable to constantly designate a terminal window for the output of one component of the product, since 95+% of the time you won't need it.

[rsxdalv]

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.

[ivanseidel]

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.

[rsxdalv]

@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.

[haidaraM]

I think this option should be a must have. I'm facing the same problem when I deploy my application with GitLab CI and Ansible. The logs are almost unreadable because of the coloring.

The coloring is pretty nice but sometimes useless when using some CI tools.

[zstadler]

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]",""}

[textbook]

Given that the colours seem to be based on chalk, which uses supports color, I'd expect setting the environment variable FORCE_COLOR=0 to "forcefully disable" the colours, but this doesn't seem to work either.

[rsxdalv]

@textbook That's when this feature gets fun, isn't it?

[jmacloue]

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

angular-cli/packages/@angular/cli/models/webpack-configs/utils.ts

Line 8 in b6b8acc

colors: true,

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) => {

[v-karbovnichy]

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