什么是angular cli？本篇文章带大家了解一下angular中的angular cli，介绍一下angular cli的使用方法，希望对大家有所帮助！
1. 什么是Angular cli
它是一个命令行界面工具，可用于初始化、开发、构建和维护 Angular 应用。【相关教程推荐：《angular教程》】
2. 如何安装
无npm先去下载nodejshttps://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=truefalse“–routing=truefalse“–skipInstall=truefalse“–skipTests=truefalse“–force=truefalse“–style=cssscss`–packageManager=npmyarn–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 xxng generate component xx新建组件ng g c xxng generate directive xx新建指令ng g d xxng generate service xx新建服务ng g s xxng 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|falsetrue则在启动项目后自动打开页面，简写： ng server -o–port设置启动的端口号，避免启动多个项目占用同一个端口启动不起来–proxyConfig=xx设置代理文件–watch=true|false是否在代码更改时自动重新构建刷新页面，默认true–aot=true|false是否以预编译模式启动项目，默认为false。
缺点：项目运行时间增长。
优点：有时开发时没问题，打包上线之后出现问题可以在本地开启它来调试错误。
3.4 打包项目（build | b）
配置 意义–baseHref=xxindex.html访问其他静态资源文件的相对路径。也可以在index.html的中配置，还可以在.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" } ], ... } }, } } } }}
登录后复制
之后可以进行不同的环境打包：
qa: ng build –c=qasit: ng build –c=sitprod: ng build –c=production
–c 是 –configuration的缩写
3.5 更新项目（update ）
angular半年更新一个大版本，及时更新版本是非常重要的事情，如果落后高于1个版本以上，后续可能升级会很麻烦（别问我怎么知道，再问跳楼）。
从一个主版本升级到另外一个主版本，升级之前最好看下官方的升级指南
ng update @angular/cli@^ @angular/core@^
登录后复制先查看有哪些可以更新
ng update
登录后复制可以单个更新，也可选择全部更新
ng update --all
登录后复制如果更新时提示有的依赖包版本不一致，可以强制更新
Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=2.7.2强制更新办法:
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？怎么使用？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2706141.html
