首頁  >  文章  >  web前端  >  什麼是Angular cli?怎麼使用?

什麼是Angular cli?怎麼使用?

青灯夜游
青灯夜游轉載
2021-11-09 09:52:372592瀏覽

什麼是Angular cli?這篇文章帶大家了解一下Angular中的Angular cli,介紹一下Angular cli的使用方法,希望對大家有幫助!

什麼是Angular cli?怎麼使用?

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 xxng generate component  xxng generate directive  xx##ng generate service xx新服務ng g s xx#ng generate pipe  xx新管道#ng g p xx還有更簡單的方法:
新模組 ng g m xx
新元件 ng g c xx
#新指令 ng g d 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的06ab6afd8378b103ee0ad34f89ed5100中配置,还可以在.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
ng set --global packageManager=yarn

3.6 其他

更多用法更新于 github

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

更多编程相关知识,请访问:编程视频!!

以上是什麼是Angular cli?怎麼使用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除