本篇內容介紹了“怎么使用Angular cli”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

10年積累的成都網站設計、成都網站建設、外貿網站建設經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先做網站后付款的網站建設流程，更有福清免費網站建設讓你可以放心的選擇與我們合作。

1. 什么是Angular cli

它是一個命令行界面工具，可用于初始化、開發、構建和維護 Angular 應用。【相關教程推薦：《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

參數	意義
`--force=true	false`
`--routing=true	false`
`--skipInstall=true	false`
`--skipTests=true	false`
`--force=true	false`
`--style=css	scss
`--packageManager=npm	yarn
--prefix=prefix	指定選擇器的前綴（組件、指令），如傳入--prefix=dep則組件的selector會成為dep-xxx，

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

3.2 新建文件(generate | g)

新建一個基礎文件，里面有預設的代碼片段。如ng generate service demo，則會在當前文件夾新建一個demo.service.ts。

命令	作用	簡寫
ng generate module xx	新建模塊	ng g m xx
ng generate component  xx	新建組件	ng g c xx
ng generate directive  xx	新建指令	ng g d xx
ng generate service  xx	新建服務	ng g s xx
ng generate pipe  xx	新建管道	ng g p xx

還有個更簡單的方法：

vscode 中下載Angular Files插件，搜索alexiv.vscode-angular2-files即可找到。想在哪里創建點哪里。用起來爽歪歪。后面會寫一個vscode開發angular好用的插件~

3.3 運行項目(serve | s)

配置	意義
--host=xx	設置應用的主機地址，別人可以根據這個地址訪問你啟動的應用。xx可以是你的ip或者0.0.0.0
--open=true|false	true則在啟動項目后自動打開頁面，簡寫： ng server -o
--port	設置啟動的端口號，避免啟動多個項目占用同一個端口啟動不起來
--proxyConfig=xx	設置代理文件
--watch=true|false	是否在代碼更改時自動重新構建刷新頁面，默認true
--aot=true|false	是否以預編譯模式啟動項目，默認為false。 缺點：項目運行時間增長。 優點：有時開發時沒問題，打包上線之后出現問題可以在本地開啟它來調試錯誤。

3.4 打包項目（build | b）

配置	意義
--baseHref=xx	index.html訪問其他靜態資源文件的相對路徑。也可以在index.html的<base href="xx">中配置，還可以在.angular.json中的baseHref配置。
--aot=true|false	是否以預編譯模式啟動項目， 默認false,一般在angular.json中配置
--optimization=true|false	是否啟用構建輸出的優化。
--configuration=xx	指定打包環境的配置
--prod=true|false	--configuration=production的簡寫。true則以生產環境的方式打包，進行搖樹優化等操作。

--configuration詳解

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

在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

“怎么使用Angular cli”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！

本文名稱：怎么使用Angularcli
當前地址：http://www.yijiale78.com/article4/gjhooe.html

成都網站建設公司_創新互聯，為您提供定制開發、響應式網站、網站建設、全網營銷推廣、品牌網站設計、品牌網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯