一.踩坑
1.问题来源
2.解决方案
- 使用configuration参数启动项目,如
ng serve --configuration=local or ng serve -c local
启动名为local的环境
- 环境的定义在angular.json文件中(architect下build和serve都要添加环境配置),如下所示
"configurations": {
"production": { #定义环境名词
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
其中默认使用的时environment.ts文件作为当前的环境文件,如需要在不同环境中使用不同的environment文件则需要写fileReplacements进行文件的替换
二.相关知识
1.添加新环境
Reference :Angular Cli使用
- 在angular.json的build中添加配置(如添加一个dev2的环境)
"build": {
"configurations": {
"dev2": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev2.ts"
}
/* You can add all other options here, such as aot, optimization, ... */
],
"serviceWorker": true
}
- 在angular.json的serve中添加配置,当使用
ng serve -c dev2
时以dev2环境的方式配置
"serve":
"configurations": {
"dev2": {
"browserTarget": "projectName:build:dev2"
}
2.构建命令
- 通常使用的构建命令是
ng build
,构建会从angular.json
中读取相关配置
- 上述命令等同于如下命令
$ ng build --target=development --environment=dev
$ ng build --dev --e=dev
$ ng build --dev
$ ng build
- 其中用到了如下特性(关闭 aot 构建、生成 sourcemaps 等):
--aot=false #Ahead of Time编译,执行aot会去掉一些程序执行不需要的代码, 例如angular的compiler这时就不在build输出的文件里了,且–aot参数是让angular-cli启动预编译特性。
--envrionment=dev #-e Build环境
--output-hashing=media
--sourcemaps=true #-sm 生成source map
--extract-css=false
--watch #-w Watch并rebuild
--target -t #Build target
$ ng build --prod
// 等同于
$ ng build --target=production --environment=prod
$ ng build --prod --env=prod
- 默认开启的选项有(开启 aot 构建,关闭 sourcemaps 等):
--aot=true
--envrionment=prod
--output-hashing=all
--sourcemaps=false
--extract-css=true
3.测试
- 如果是库项目或者一些公有底层项目,一个项目需要配套的测试文件,可以使用
ng test
来进行单元测试,使用ng e2e
来进行集成测试。
- 不过如果是变化频繁的业务型项目,可以看情况是否启用测试。
- 如果不需要测试,可以将相关测试文件全部删掉即可,另外用
ng new
和ng g
生成项目和组件时,可以忽略生成测试文件。
$ ng new lego --skip-tests=true
$ ng g c header --spec=false
4.脚手架
Component ng g component my-new-component
// 不生成单元测试文件则可以使用 --spec=false 参数
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module
5.代理
- 通常我们采用
ng serve --proxy-config proxy.conf.json
的方式实现代理,深入了解之后发现,ng serve
底层使用了webpack-dev-server
,而webpack-dev-server
又使用了http-proxy-middleware
。
6.自定义规范模板
- 企业中都会有自己的代码规范,可能与
ng g
命令生成的样式不同,我们可以借助vscode自带的snippet定义模板,可以参考 VSCode Snippet
7.生产与开发build对比
|
ng build |
ng build --prod |
Environment |
environment.ts |
environment…prod.ts |
缓存 |
只缓存css里引用的图片 |
所有build的文件 |
source maps |
生成 |
不生成 |
uglify |
不 |
是 |
Tree-Shaking |
不去掉无用代码 |
去掉无用代码 |
AOT |
不 |
是 |
Bundling打包 |
是 |
是 |
–build-optimizer |
否 |
是 |
–named-chunks |
是 |
否 |
–output-hashing |
media |
所有 |
8.Serve命令常用参数
--open -o 打开默认浏览器
--port -p 端口
--live-reload -lr 发生变化时重新加载网页(默认开启的)
--ssl 使用https--proxy-config -pc 代理配置
--prod 在内存中serve 生产模式build的文件