目前，無論你使用什么前端框架，都必然要使用到各種 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.org
Step1. 安裝腳手架工具 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-app
Angular 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%;
}
瀏覽器隨之重繪
是不是很酷！????????????
一些常見的坑
@angular/cli 這種“全家桶”式的設計帶來了很大的方便，同時也有一些人不太喜歡，因為很多底層的東西被屏蔽掉了，開發者不能天馬行空地自由發揮，比如：@angular/cli 把底層 webpack 的組態檔屏蔽掉了，很多喜歡自己手動配 webpack 的開發者就感到很不爽，
對于國內的開發者來說，上面這些其實不是最重要的，國內開發者碰到的坑主要是由兩點引起的：
- 第一點是網路問題：比如
node-sass這個模塊你很有可能就裝不上，原因你懂的， - 第二點是開發環境導致的問題：國內使用 Windows 平臺的開發者比例依然巨大，而 @angular/cli 在 Windows 平臺上有一些非常惡心的依賴，比如它需要依賴 python 環境、Visual Studio 環境，
所以，如果你的開發平臺是 Windows，請特別注意：
- 如果你知道如何給 npm 配置代理，也知道如何翻墻，請首選 npm 來安裝 @angular/cli，
- 否則，請使用 cnpm 來安裝 @angular/cli，原因有三：1、cnpm 的快取服務器在國內，你裝東西的速度會快很多；2、用 cnpm 可以幫你避開某些模塊裝不上的問題，因為它在服務器上面做了快取；3、cnpm 還把一些包都預編譯好了快取在服務端，不需要把原始碼下載到你本地去編譯，所以你的機器上可以沒有那一大堆麻煩的環境，
- 如果安裝失敗，請手動把 node_modules 目錄刪掉重試一遍，全域的 @angular/cli 也需要刪掉重裝，cnpm uninstall -g @angular/cli，
- 如果 node_modules 刪不掉，爆出路徑過長之類的錯誤，請嘗試用一些檔案粉碎機之類的工具強行洗掉，
- 無論你用什么開發環境，安裝的程序中請仔細看 log，很多朋友沒有看 log 的習慣，報錯的時候直接懵掉，根本不知道發生了什么，
總結一下
安裝依賴
- Node 6.9.0 or higher
- NPM 3 or higher
- Python
- C++ 編譯工具
安裝angular/cli
npm install -g @angular/cli
使用幫助
ng help
初始化專案
ng new <專案名稱>
啟動開發服務
ng serve
ng serve 默認占用 4200 埠號，可以通過下面選項配置：
ng serve --port 4201
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/154325.html
標籤：JavaScript
上一篇：ng-專案結構
下一篇：ng-簡介