怎么在Angular中使用Angular CLI

怎么在Angular中使用Angular CLI？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

具體的命令是：

yarn global add @angular/cli

參數 global 說明是在全局安裝； add 說明是在“添加”；最后是 CLI 的包名，沒有注明版本好的話，會讓 yarn 安裝最新版的 CLI。。這一語句與之前 NPM 的

npm install -g @angular/cli

是等價的。

之后我們運行

ng version

如果能夠輸出 Angular CLI 的版本號，說明安裝成功。注意，Angular CLI 的所有命令都是以 ng 開始的。

Angular CLI 建立在 webpack 基礎之上，可以幫助我們生成 Angular 項目框架，生成 Angular 模塊、組件、指令等。如果手動搭建這一開發環境，需要了解 webpack 的各種細節、編寫各種自動化腳本等，要求較高的前端開發技術。考慮到我們的基礎教程，使用 CLI 輔助開發無疑是合適的。我們會在后面的章節中詳細介紹 Angular CLI 的使用，如果你對 Angular CLI 感興趣，可以通過其官方網站 了解更多的細節。

剛剛安裝完成的 CLI 默認使用 NPM 作為包管理工具。我們希望使用 yarn，只需運行下面的命令：

ng set --global packageManager=yarn

反之，如果想換回 NPM，只需使用

ng set --global packageManager=npm

即可。

安裝好 Angular CLI，下面我們來創建第一個示例工程，了解 Angular CLI 的基本使用。

首先，使用

ng new demo

創建一個演示項目。 new 是創建一個全新項目，后面的 demo 是項目的名字。Angular CLI 會幫我們生成完整的項目框架——包括項目所需所有文件、文件結構以及各種輔助文件等。之后，Angular CLI 會自動運行 yarn install ，這是在安裝項目所需要的各種依賴。安裝過程會比較漫長，需要耐心等待一段時間。

當出現類似上面的界面，提示“Projecy ‘demo' successfully created”時，表示項目已經創建完成。如果有錯誤，需要檢查安裝過程或者網絡連接等。

項目創建完畢，會在當前目錄下生成一個項目文件夾。之后我們可以進入項目目錄

cd demo

然后運行

ng serve

ng serve 命令會編譯項目，然后啟動一個內置的小型服務器，我們就可以通過瀏覽器查看項目的運行結果。注意上面的提示：NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/，也就是說，這個服務器的地址應該是 http://localhost:4200，我們只要用瀏覽器訪問這個地址即可：

可以看到 Angular CLI 默認生成的項目頁面的運行結果。

注意，這一內置服務器僅適用于開發測試用，并不能作為實際使用的服務器。因此，我們如果要部署到正式的服務器，需要將項目編譯成一個發布版。編譯發布版也很簡單，只需使用一條命令：

ng build --prod

看完上述內容，你們掌握怎么在Angular中使用Angular CLI的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！