Checkmark doesn't match other checkmark

[stephengeorgewest]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

Probably not.

Description

The checkmark before "Compiled successfully." is different from the checkmark before "Browser application bundle generation complete." Text copy: √ Compiled successfully. ✔ Browser application bundle generation complete.

🔬 Minimal Reproduction

generate a new project run ng serve in powershell it is more noticeable after modifying a file and it rebuilds, then the checkmarks are right next to each other.

🌍 Your Environment

Angular CLI: 11.0.4
Node: 14.17.1
OS: win32 x64

Angular: 11.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------       
@angular-devkit/architect       0.1100.4
@angular-devkit/build-angular   0.1100.4
@angular-devkit/core            11.0.4
@angular-devkit/schematics      11.0.4
@angular/cdk                    11.0.3
@angular/material               11.0.3
@schematics/angular             11.0.4
@schematics/update              0.1100.4
rxjs                            6.6.7
typescript                      4.0.7

Anything else relevant? Yeah. This is a super minor thing. It does provide a sense of comradery when I see it pasted into issues (hello there fellow powershell user), yet I can't get past it. Much like having a stray \  pull a word to the next line that should fit. or kerning issues, or having the div off center by a few pixels, or

😤I must not fear 😤Fear is the mind killer 😤 😮‍💨 kittens riding on dogs 😮‍💨 pygmy goats headbutting toddlers 😮‍💨 Namaste 🙏

Ok, jokes aside (👀). I dug into it a bit.

Windows/Powershell specific. The "Browser..." checkmark comes from: https://github.com/angular/angular-cli/blob/32dbf659acb632fac1d76d99d8191ea9c5e6350b/packages/angular_devkit/build_angular/src/webpack/configs/common.ts#L74-L77 -> https://github.com/angular/angular-cli/blob/32dbf659acb632fac1d76d99d8191ea9c5e6350b/packages/angular_devkit/build_angular/src/utils/spinner.ts#L41 or https://github.com/angular/angular-cli/blob/1341ad6406fbd1c733dad40020d8b4bb52d73ff7/packages/angular/cli/utilities/spinner.ts#L32 -> https://github.com/sindresorhus/ora/blob/c5026b7b411765636ae08a8f4a15789617ba695e/index.js#L360 import ora from 'ora'; // spinner (checkmark) --import { colors } from './color'; -> ora: import chalk from 'chalk'; ... import logSymbols from 'log-symbols'; return this.stopAndPersist({symbol: logSymbols.success, text}); -> https://github.com/sindresorhus/log-symbols/blob/main/index.js -> https://github.com/sindresorhus/is-unicode-supported/blob/main/index.js -> ✔

The "Compiled..." checkmark comes from: https://github.com/angular/angular-cli/blob/32dbf659acb632fac1d76d99d8191ea9c5e6350b/packages/angular_devkit/build_angular/src/builders/dev-server/index.ts#L328 -> https://github.com/angular/angular-cli/blob/32dbf659acb632fac1d76d99d8191ea9c5e6350b/packages/angular_devkit/build_angular/src/utils/color.ts -> https://github.com/doowb/ansi-colors/blob/master/symbols.js -> √

It seems that the criteria for unicode support differs between LogSymbols and Colors. I see a few options to fix/avoid this issue.

1. Since the the spinner (via ora) imports logSymbols already, ng serve could just skip the one from Colors, and have builders/dev-server/index.ts use logger.info(`\n${colors.greenBright(logSymbols.success)} Compiled successfully.`);
2. Move the issue to the colors repository, and suggest that it use the same logic as LogSymbols to determine unicode support. Or pull in LogSymbols as a dependency. Or keep the colors library dedicated to colors. Which would bring us back to 1. I think I'm just rambling now. I'll stop

[alan-agius4]

Let’s continue tracking this in https://github.com/angular/angular-cli/issues/21282 as it shares the same root cause.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}