不確定從哪一版 CLI 開始，當執行 ng serve 時，命令視窗的進度表，就會出現很混亂的數字後，才會正常的顯示編譯結果，想說一開始就算了，GitHub 上也找不到相關的 Issue，就這樣子擺著。今天實在受不了，就開始追到底是什麼原因造成這神奇的現象

這神奇的現象，用簡單的影片表示一下 (使用字型: 細明體)

開始追蹤

當然一開始是從 Angular CLI 下手，但很不幸的，Angular CLI 所使用的進度顯示是透過 Webpack 的 ProgressPlugin 來完成的

...
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
...
if (buildOptions.progress) {
    extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose, colors: true }));
}

只好前往 ProgressPlugin 探索了，還好 ProgressPlugin 只是單純一隻 js 檔案，應該很容易找 (才怪)

const defaultHandler = (percentage, msg, ...args) => {
		let state = msg;
		const details = args;
		if (percentage < 1) {
			percentage = Math.floor(percentage * 100);
			msg = `${percentage}% ${msg}`;
			if (percentage < 100) {
				msg = ` ${msg}`;
			}
			if (percentage < 10) {
				msg = ` ${msg}`;
			}
			for (let detail of details) {
        if (!detail) continue;
				if (detail.length > 40) {
          detail = `…${detail.substr(detail.length - 39)}`;
				}
				msg += ` ${detail}`;
			}
		}
		if (profile) {
			state = state.replace(/^\d+\/\d+\s+/, "");
			if (percentage === 0) {
				lastState = null;
				lastStateTime = Date.now();
			} else if (state !== lastState || percentage === 1) {
				const now = Date.now();
				if (lastState) {
					const stateMsg = `${now - lastStateTime}ms ${lastState}`;
					goToLineStart(stateMsg);
					process.stderr.write(stateMsg + "\n");
					lineCaretPosition = 0;
				}
				lastState = state;
				lastStateTime = now;
			}
		}
		goToLineStart(msg);
		process.stderr.write(msg);
	};

	const goToLineStart = nextMessage => {
    let str = "";
		for (; lineCaretPosition > nextMessage.length; lineCaretPosition--) {
			str += "\b \b";
		}
		for (var i = 0; i < lineCaretPosition; i++) {
			str += "\b";
		}
    lineCaretPosition = nextMessage.length;
		if (str) process.stderr.write(str);
	};

	return defaultHandler;
};