本篇内容介绍了“怎么使用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 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则以生产环境的方式打包,进行摇树优化等操作。 |
当我需要打成不同的环境包时,可以使用以下方法:
在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”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!