Angular CLI란 무엇인가요? 이 글은 Angular의 Angular cli를 안내하고 Angular cli 사용 방법을 소개합니다. 도움이 되기를 바랍니다.
Angular 애플리케이션을 초기화, 개발, 빌드 및 유지하는 데 사용할 수 있는 명령줄 인터페이스 도구입니다. [관련 튜토리얼 추천 : "angular tutorial"]
설치하는 방법 먼저 nodejs를 다운로드
https://nodejs.org/en/download/
npm install -g @angular/cli
제거하려면 -g-g
npm uninstall -g @angular/cli
new|n指n是new的缩写，效果相同，下同。
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中改~
新建一个基础文件，里面有预设的代码片段。如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好用的插件~
| 配置 | 意义 |
|---|---|
--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{
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"
}
],
...
}
},
}
}
}
}
}로그인 후 복사 로그인 후 복사 | 3를 가져와야 합니다.
ng update @angular/cli@^<major_version> @angular/core@^<major_version>
ng update
| 매개변수 | 의미 | 🎜|||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 명령 | 함수 | 약어 | 🎜|||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 구성 | 의미 | 🎜||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 配置 | 意义 |
|---|---|
--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则以生产环境的方式打包，进行摇树优化等操作。 |
当我需要打成不同的环境包时，可以使用以下方法：
在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"
}
],
...
}
},
}
}
}
}
}之后可以进行不同的环境打包：
ng build --c=qang build --c=sitng build --c=production--c 是 --configuration的缩写
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
ng lint: 运行代码规则检测ng test: 运行单元测试ng e2e： 运行端到端测试ng add: 添加一个第三方库到项目中，并且将其自定义配置也添加到项目中。如何写一个可以用ng add添加的自定义配置的第三方包？
更多用法更新于 github
https://github.com/deepthan/blog-angular
更多编程相关知识，请访问：编程视频！！
위 내용은 Angular cli란 무엇인가요? 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
