Angular-cli: no colours for chunk list in git bash when using `yarn start` on a new project

[micobarac]

Bug Report or Feature Request (mark with an x)

- [*] bug report
- [ ] feature request

Command (mark with an x)

- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Angular CLI: 7.0.6
Node: 11.1.0
OS: win32 x64
Angular: 7.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.10.6
@angular-devkit/build-angular 0.10.6
@angular-devkit/build-optimizer 0.10.6
@angular-devkit/build-webpack 0.10.6
@angular-devkit/core 7.0.6
@angular-devkit/schematics 7.0.6
@angular/cli 7.0.6
@ngtools/webpack 7.0.6
@schematics/angular 7.0.6
@schematics/update 0.10.6
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1

Repro steps

ng serve

Desired functionality

Build speed should be at least reasonably normal
Built chunks list should be coloured in git bash

Mention any other details that might be useful

Build speed is painfully slow, even with a brand new Angular Cli project
Built chunks list is monochromatic.

My hardware is very fast, btw, with I7 CPU, SSD HDD, 8GB RAM.
I excluded project directory from NOD32 antivirus.
I even tried ember-cli-windows tool, but with no success.

[alan-agius4]

Hi, Can you please provide the output of ng version?

When you say it's painfully slow can you please elaborate a bit more regarding the timings that you are seeing?

Also, the command you are running is npm start? as there is no such command as ng start.

Thanks.

[micobarac]

Sorry for the typo. I updated the comment with additional info. Comparing to the speed of ng serve on Linux and MacOS, on Windows it is like a slow motion. Every time I make a change, updating and reloading browser takes at least 10-20 seconds, even with a brand new Angular project created by ng new. Compared to other OS-es, it's at least 5x slower.

Someone should really investigate this, as people have been complaining for a long time about this speed issue, with no logical explanation and solution.

According to forums, this might be related to ember-cli speed issues on Windows, which @angular/cli is based on. Another potential culprit could be bash itself.

[alan-agius4]

The last time I checked the built times were pretty close between Windows and Mac. (I usually work on a Mac though).

@filipesilva do you have any insights on this since you usually work on a Windows?

Also, one of the community members today mentioned that built times were better when using PowerShell though when using WSL https://github.com/angular/angular-cli/issues/5775#issuecomment-440249887, might be worth to give it a shot :)

[filipesilva]

WSL will always be very, very slow. @micobarac are you sure you are using Git Bash and not WSL?

You should be able to check by running cat /proc/version.

I use git bash and see this:

kamik@RED-X1C6 MINGW64 /d/sandbox
$ cat /proc/version
MINGW64_NT-10.0 version 2.9.0(0.318/5/3) (@41cac4138e17) (gcc version 6.4.0 (GCC) ) 2018-01-12 23:37

I work on Windows as my primary machine. A new project builds in 9.8s and rebuilds in 200ms:

kamik@RED-X1C6 MINGW64 /d/sandbox/latest-project (master)
$ ng serve
Your global Angular CLI version (7.0.6) is greater than your local
version (7.0.4). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-11-20T17:34:59.507Z
Hash: a7c779b399674e00c600
Time: 9811ms
chunk {main} main.js, main.js.map (main) 12.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.2 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.55 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...

Date: 2018-11-20T17:35:14.197Z - Hash: abb5496f946efb3b5575 - Time: 2370ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 12.7 kB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...

Date: 2018-11-20T17:35:15.638Z - Hash: 1de83e10d0f98ab03969 - Time: 249ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 12.7 kB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...

Date: 2018-11-20T17:35:16.857Z - Hash: 0ea8cec92fc14091f190 - Time: 265ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 12.7 kB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...

Date: 2018-11-20T17:35:18.939Z - Hash: 7d7bb19bc8fb9b945173 - Time: 179ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 12.8 kB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...
i ｢wdm｣: wait until bundle finished: /vendor.js.map

Date: 2018-11-20T17:35:20.494Z - Hash: 661aee6ad93ece6b3add - Time: 267ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 12.8 kB [initial] [rendered]
i ｢wdm｣: Compiled successfully.

[micobarac]

@filipesilva , here is the output you mentioned:

Milan@MARS MINGW64 ~
$ cat /proc/version
MINGW64_NT-10.0 version 2.10.0(0.325/5/3) (@8d059672d1f9) (gcc version 7.3.0 (GCC) ) 2018-07-25 13:06

[micobarac]

Git Bash:

$ yarn start
yarn run v1.12.3
$ ng serve --open
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-11-20T18:15:42.183Z
Hash: 2b3d9d3fb20cd18e6fca
Time: 11744ms
chunk {main} main.js, main.js.map (main) 26.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 155 kB  [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.23 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.54 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...

Date: 2018-11-20T18:32:37.616Z - Hash: 2b3d9d3fb20cd18e6fca - Time: 290ms
6 unchanged chunks
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...

Date: 2018-11-20T18:34:26.049Z - Hash: 2b3d9d3fb20cd18e6fca - Time: 317ms
6 unchanged chunks
i ｢wdm｣: Compiled successfully.

ConEmu:

Date: 2018-11-20T18:41:29.262Z
Hash: 2b3d9d3fb20cd18e6fca
Time: 16243ms
chunk {main} main.js, main.js.map (main) 26.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 155 kB  [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.23 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.54 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.

[micobarac]

Initial build with pure git bash is faster (Time: 11744ms) than ConEmu (Time: 16243ms).

[micobarac]

What about no colors in chunks list?

[filipesilva]

@micobarac your build times look similar to mine really. I don't the 20s rebuilds you mentioned in those logs. I'll edit the issue name to reflect that.

Your console seems to show some colors in the output and not others. I'm using gitbash on windows too and can see it when running ng serve but not when running yarn start.

Seems to be a bad interaction between yarn and the colors.

[tiaguinho]

@filipesilva I think this bad interaction only occurs on Windows. I use zsh on two different terminals.
iTerm on mac and urxvt on Linux (Gentoo). None of those environments present the problem.

I don't think this is a CLI problem.

[mgechev]

@filipesilva looks like this is not issue on our side. Can we close it?

[filipesilva]

@mgechev I think we should keep it open because ng serve doesn't show colors on the chunks, but does so on rebuilds (the wdm bit in https://github.com/angular/angular-cli/issues/13008#issuecomment-440397194).

I think that shows that it is possible to show these colors, but that something is going wrong in the chunks proper. We use a custom stats reporting for the chunks so that's on our side.

[valentinstn]

I recognized this issue of the colorless chunk list too. Anyone knows a fix for it?

[alan-agius4]

Hi @valentinstn, which Angular CLI version are you using?

[valentinstn]

@alan-agius4 I'm using 9.1.4