Progress Bar for Builds

[amcdnl]

Bug Report or Feature Request (mark with an x)

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

Request

The progress indicator when builds are happening is ugly. We should make it pretty w/ a progress bar or something.

It would be nice to have something like ONE of these:

I'm happy to PR if someone approves this.

[herzinger]

I'm pretty sure it's the default progress indicators from webpack, not something made for the CLI.

[filipesilva]

I suppose it's not very pretty, no. We use webpack/lib/ProgressPlugin currently. I don't really how useful/practical it would be to have one of those progress indicators though... You can't really know how much time is left because the different phases can take different amounts of time.

[dgp1130]

This came up in our team discussion today. We'd like to give a better UX for builds, and a progress bar is a good way of doing that. Currently we just report the percentage complete as a simple string ("92%"), but a progress bar can make that much nicer.

However, the current reporting is just based on Webpack, which is only one component of ng build. Also framing it as a percentage makes it seem like a portion of the time of the build, which is very hard to estimate. Displaying "Step 4/9 - Compiling TypeScript" can be much clearer and avoid misleading the user. I filed #19181 to add progress reporting outside of Webpack and get more representative values to users.

Once that has landed and we have accurate reporting, we can follow up with a nice progress bar here. For now, the progress bar is blocked on accurate progress reporting just to avoid drawing attention to percentage values that aren't very representative of the actual compilation.