什麼是Angular cli？怎麼使用？

1. 什麼是Angular cli

它是一個命令列介面工具，可用於初始化、開發、構建和維護 Angular 應用。【相關教學推薦：《》】

2. 如何安裝

無npm先去下載nodejs

https://nodejs.org/en/download/

npm install -g @angular/cli

解除安裝的話也需要帶上-g

npm uninstall -g @angular/cli

3. 如何使用

new|n指n是new的縮寫，效果相同，下同。

3.1 建立專案(new | n)

ng new my-project

它會建立一個angular基礎專案並且下載依賴執行專案，預設埠是4200。

可能需要用到的自定義內容

用法形如：

 ng new my-project --xxx=x

以下不特殊註明預設值均為false

呀，建立的時候沒有自定義，怎麼補救呢？ 直接在angular.json中改~

3.2 新建檔案(generate | g)

新建一個基礎檔案，裡面有預設的程式碼片段。如ng generate service demo，則會在當前資料夾新建一個demo.service.ts。

還有個更簡單的方法：

vscode 中下載Angular Files外掛，搜尋alexiv.vscode-angular2-files即可找到。想在哪裡建立點哪裡。用起來爽歪歪。後面會寫一個vscode開發angular好用的外掛~

3.3 執行專案(serve | s)

3.4 打包專案（build | b）

當我需要打成不同的環境包時，可以使用以下方法：

在angular.json中做了如下設定，：

{
    projects： {
        project-name: {
            architect: {
                build: {
                    configurations: {
                        production: {
                            "fileReplacements": [
                                {
                                  "replace": "src/environments/environment.ts",
                                  "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            ...
                        },
                        qa: {
                             "fileReplacements": [
                                {
                                  "replace": "src/environments/environment.ts",
                                  "with": "src/environments/environment.qa.ts"
                                }
                            ],
                            ...
                        },
                        sit: {
                             "fileReplacements": [
                                {
                                  "replace": "src/environments/environment.ts",
                                  "with": "src/environments/environment.sit.ts"
                                }
                            ],
                            ...
                        }
                    },
                    
                }
            }
        }
    }
}

之後可以進行不同的環境打包：

• qa: ng build --c=qa
• sit: ng build --c=sit
• prod: ng build --c=production

--c 是 --configuration的縮寫

3.5 更新專案（update ）

angular半年更新一個大版本，及時更新版本是非常重要的事情，如果落後高於1個版本以上，後續可能升級會很麻煩（別問我怎麼知道，再問跳樓）。

從一個主版本升級到另外一個主版本，升級之前最好看下官方的升級指南

ng update @angular/cli@^<major_version>  @angular/core@^<major_version>

• 先檢視有哪些可以更新

ng update

• 可以單個更新，也可選擇全部更新

ng update --all

• 如果更新時提示有的依賴包版本不一致，可以強制更新

Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=2.7.2 <2.8", would install "2.5.3")
Incompatible peer dependencies found. See above.

強制更新辦法:

ng update --all --force

如何修改update預設下載工具為yarn

ng config --global cli.packageManager yarn

ng set --global packageManager=yarn

3.6 其他

• ng lint: 執行程式碼規則檢測
• ng test: 執行單元測試
• ng e2e： 執行端到端測試
• ng add: 新增一個第三方庫到專案中，並且將其自定義設定也新增到專案中。如何寫一個可以用ng add新增的自定義設定的第三方包？

更多用法更新於 github

https://github.com/deepthan/blog-angular

更多程式設計相關知識，請存取：！！

以上就是什麼是Angular cli？怎麼使用？的詳細內容，更多請關注TW511.COM其它相關文章！