目前，無論你使用什麼前端框架，都必然要使用到各種 NodeJS 工具，Angular 也不例外。與其它框架不同，Angular 從一開始就走的“全家桶”式的設計思路，因此 @angular/cli 這款工具裡面集成了日常開發需要使用的所有 Node 模塊，使用 @angular/cli 可以大幅度降 ...
目前，無論你使用什麼前端框架，都必然要使用到各種 NodeJS 工具，Angular 也不例外。與其它框架不同，Angular 從一開始就走的“全家桶”式的設計思路，因此 @angular/cli 這款工具裡面集成了日常開發需要使用的所有 Node 模塊，使用 @angular/cli 可以大幅度降低搭建開發環境的難度。
Angular CLI 類似於 Vue CLI，是 Angular 官方開發的一個腳手架工具，專門用來開發構建 Angular 應用程式。
- Angular 應用程式初始化
- 內置開發伺服器
- 代碼變更瀏覽器自動刷新
- 創建組件、指令、服務等集成工具
- 測試和維護
- ......
Step 0. 安裝依賴環境
安裝 Node.js
- 下載地址
- 安裝
- 確認 Node.js 環境
安裝 npm
- npm 會隨著 Node 的安裝被一起安裝
- 確認 npm 環境
安裝 Python
- 下載地址
- Windows 32 位
- Windows 64位
- 確認 Python 環境
安裝 C++ 編譯工具
Angular CLi 在 Windows 上同時依賴 C++ 編譯工具，所以我們這裡也需要單獨安裝。
當然如果你的機器安裝了 Visual Studio（註意，不是 Visual Studio Code）。
執行下麵的命名安裝 C++ 編譯工具：
npm install --global --production windows-build-tools安裝 cnpm
npm i -g cnpm --registry=https://registry.npm.taobao.orgStep1. 安裝腳手架工具 Angular CLI
Angular CLI 是 Angular 官方開發的一個類似於 Vue CLI 的腳手架開發工具，它幫我們集成了 webpack 打包、開發伺服器、單元測試、自動編譯、部署等功能特性。
使用它的第一步就是先安裝：
cnpm i -g @angular/cli安裝結束之後我們可以通過在命令行輸入以下命令測試是否安裝成功：
ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.3.23
Node: 12.10.0
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.803.23
@angular-devkit/core 8.3.23
@angular-devkit/schematics 8.3.23
@schematics/angular 8.3.23
@schematics/update 0.803.23
rxjs 6.4.0安裝失敗解決方案
- 在 Windows 平臺上安裝 @angular/cli 會報很多 error，那是因為 @angular/cli 在 Windows 平臺上面依賴 Python 和 Visual Studio 環境，而很多開發者的機器上並沒有安裝這些東西
- 以及 node-sass 模塊被牆的問題，強烈推薦使用 cnpm 進行安裝，可以非常有效地避免撞牆
npm i -g cnpm --registry=https://registry.npm.taobao.org
cnpm i -g @angular/cli- 如果安裝失敗，請手動把全局的
@angular/cli刪掉：cnpm uninstall -g @angular/cli - 如果
node_modules刪不掉，爆出路徑過長之類的錯誤，請嘗試用一些文件粉碎機之類的工具強行刪除。 - 無論你用什麼開發環境，安裝的過程中請仔細看錯誤日誌。很多人沒有看錯誤日誌的習慣，報錯的時候直接懵掉，根本不知道發生了什麼。
Setp 2. 使用腳手架工具初始化項目
ng new my-appAngular CLI 將會自動幫你把目錄結構創建好，並且會自動生成一些目錄文件
請特別註意：Angular CLI 在自動生成好項目骨架之後，會立即自動使用 npm 來安裝所依賴的 Node 模塊，所以這裡你懂的，一道牆又會阻止我們通往自由的道路，所以這裡如果初始化很慢或者失敗，請自己手動 Ctrl + C 終止掉，然後進入初始化好的項目根目錄使用 cnpm 來安裝。
Step 3. Serve the application
使用腳手架工具初始化項目完成之後，我們就可以啟動開發模式了：
# 或者 npm start
ng serve註意：
- 在項目根目錄下執行
- 看好是
serve不是 server - 該命令預設會開啟一個服務占用 4200 埠，如果想要修改可以通過
--port參數來指定，例如ng serve --port 3000
接下來我們打開瀏覽器，訪問：http://localhost:4200/ 。成功即可在瀏覽器中看到如下頁面：
Step 4. 體驗一下 Angular
找到 ./src/app/app.component.ts 文件，將 AppComponent 組件類中的 title 修改如下（記得保存哦）：
export class AppComponent {
title = '你的第一個 Angular 應用';
}你會發現瀏覽器隨之刷新
標題樣式太醜了，來讓我們打開 src/app/app.component.css 文件並寫入以下內容：
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}瀏覽器隨之刷新
是不是很酷！
