angular-cli.json配置参数解释

本文详细介绍了 Angular CLI 的配置选项及其应用场景,包括项目结构、环境配置、构建目标等内容,并提供了常见命令的关键参数说明。

原文地址:https://www.cnblogs.com/qingming/p/6961548.html

一. angular-cli.json常见配置

{
“project”: {
“name”: “ng-admin”, //项目名称
“ejected”: false // 标记该应用是否已经执行过eject命令把webpack配置释放出来
},
“apps”: [
{
“root”: “src”, // 源码根目录
“outDir”: “dist”, // 编译后的输出目录,默认是dist/
“assets”: [ // 记录资源文件夹,构建时复制到outDir指定的目录
“assets”,
“favicon.ico”
],
“index”: “index.html”, // 指定首页文件,默认值是”index.html”
“main”: “main.ts”, // 指定应用的入门文件
“polyfills”: “polyfills.ts”, // 指定polyfill文件
“test”: “test.ts”, // 指定测试入门文件
“tsconfig”: “tsconfig.app.json”, // 指定tsconfig文件
“testTsconfig”: “tsconfig.spec.json”, // 指定TypeScript单测脚本的tsconfig文件
“tsconfig”:”tsconfig.app.json”,
“prefix”: “app”, // 使用ng generate命令时,自动为selector元数据的值添加的前缀名
“deployUrl”: “//cdn.com.cn”, // 指定站点的部署地址,该值最终会赋给webpack的output.publicPath,常用于CDN部署
“styles”: [ // 引入全局样式,构建时会打包进来,常用于第三方库引入的样式
“styles.css”
],
“scripts”: [ // 引入全局脚本,构建时会打包进来,常用语第三方库引入的脚本
],
“environmentSource”: “environments/environment.ts”, // 基础环境配置
“environments”: { // 子环境配置文件
“dev”: “environments/environment.ts”,
“prod”: “environments/environment.prod.ts”
}
}
],
“e2e”: {
“protractor”: {
“config”: “./protractor.conf.js”
}
},
“lint”: [
{
“project”: “src/tsconfig.app.json”
},
{
“project”: “src/tsconfig.spec.json”
},
{
“project”: “e2e/tsconfig.e2e.json”
}
],
“test”: {
“karma”: {
“config”: “./karma.conf.js”
}
},
“defaults”: { // 执行ng generate命令时的一些默认值
“styleExt”: “scss”, // 默认生成的样式文件后缀名
“component”: {
“flat”: false, // 生成组件时是否新建文件夹包装组件文件,默认为false(即新建文件夹)
“spec”: true, // 是否生成spec文件,默认为true
“inlineStyle”: false, // 新建时是否使用内联样式,默认为false
“inlineTemplate”: false, // 新建时是否使用内联模板,默认为false
“viewEncapsulation”: “Emulated”, // 指定生成的组件的元数据viewEncapsulation的默认值
“changeDetection”: “OnPush”, // 指定生成的组件的元数据changeDetection的默认值
}
}
}

二. 常用命令的通用关键参数解释
1.ng serve –host (self)
指定本地Server绑定的域名,默认值:localhost.如果希望使用self来访问你的站点,须加入以上参数
2.ng serve –hmr
注意开启之后,只是在angular-cli里的webpack添加必要的扩展,等价于webpack-dev-server –hot,还需要在应用代码里处理hmr逻辑,如可在main.ts里添加:
if(module.hot) {
module.hot.accept();
}

3.ng serve –aot
开启aot
4.ng serve –proxy-config proxy.conf.json
指定后台转发地址,即nginx的proxy_pass代理功能。开发时为避免ajax跨域,需要指定后台接口的转发地址。
proxy.config.json文件示例如下:
{
“/api”: { // 匹配前缀
“target”: “http://localhost:3000“, // 转发地址
“secure”: false
}
}

5.–base-href
指定站点的起始路径,如果你希望你的站点根路径为www.abc.com/mypath/,需要这样设置:ng build –base-href /mypath/
6.–target
指定构建的目标,默认值是development,如果指定为production,构建时会加入treeshaking、代码压缩混淆等。下面两条等价:
ng build –target=production
ng build –prod
7.–environment
指定应用执行环境。CLI会根据指定的值加载对应的环境配置文件。下面两句等价:
ng build –environment=prod
ng build –env=prod
构建时会加载angular-cli.json指定的环境配置文件:
“environments”: {
“dev”: “environments/environment.ts”,
“prod”: “environments/environment.prod.ts”
}

### 如何配置 `angular.json` 文件在 Angular 项目中 #### 理解 `angular.json` `angular.json` 是用于管理和配置 Angular 项目的全局设置以及各个应用程序和库的具体选项。此文件替代了旧版本中的 `angular-cli.json`,并引入了一系列新的概念来更好地组织和定义工作空间内的资源[^3]。 #### `$schema` 定义 该属性指向 JSON Schema 的 URL 地址,它描述了文档本身的结构及其有效值范围。这有助于编辑器提供智能感知支持,并确保配置遵循预期的标准格式: ```json "$schema": "./node_modules/@angular/cli/lib/config/schema.json" ``` 上述路径通常会自动填充,无需手动修改[^4]。 #### 构建器 (Builder) 对于每一个项目,在 `projects` 下可以找到特定的应用程序或库的配置节。每个条目都包含多个目标(Target),而这些目标又关联着不同的构建过程。例如,“build” 目标指定如何打包应用以便部署至生产环境;这里的关键字 `"builder"` 表明将调用哪个内部工具来进行实际的任务处理。“@angular-devkit/build-angular:browser” 就是用来编译 Web 应用的一个常见实例[^1][^2]。 #### 自定义配置示例 假设想要调整开发服务器的行为,则可以在对应的目标下添加自定义参数: ```json { ... "architect": { "serve": { "options": { "host": "localhost", "port": 4200, "disableHostCheck": true } }, ... } } ``` 这段代码设置了启动服务时所监听的主机名、端口号,并禁用了主机检查功能。 #### 添加新样式表预处理器 如果希望集成 SASS 或 LESS 这样的 CSS 预处理器,可以通过更新 styles 数组实现: ```json "styles": [ "src/styles.scss" ], ``` 这样做的前提是已经安装好了相应的加载器和支持包。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值