文档章节

angular-cli.json配置参数解释,以及依稀常用命令的通用关键参数解释

o
 osc_z1hvg4cu
发布于 2018/04/24 23:08
字数 786
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

一. 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"
}

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

设计模式(4) 建造者模式

什么是建造者模式 经典建造者模式的优缺点 对建造者模式的扩展 什么是建造者模式 建造者模式将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。创建者模式隐藏了...

zhixin9001
28分钟前
14
0
ArrayList源码分析 —— JDK8

ArrayList的特性 ArrayList内部使用数据作为存储结构,ArrayList可以理解为数组的扩展对象,封装了常用的和非常用的操作数组的方法。以及当数组长度不足以保存数组时,自动扩容数组,通常Arr...

XuePeng77
34分钟前
32
0
__slots__的用法? - Usage of __slots__?

问题: Python中__slots__的目的是什么-尤其是关于何时以及何时不使用它的目的? 解决方案: 参考一: https://stackoom.com/question/1ymu/slots-的用法 参考二: https://oldbug.net/q/1ym...

富含淀粉
45分钟前
17
0
Python分析42年高考数据,告诉你高考为什么这么难?

作者:徐麟 历年录取率 可能很多经历过高考的人都不知道高考的全称,高考实际上是普通高等学校招生全国统一考试的简称。从1977年国家恢复高考制度至今,高考经历了许多的改革,其中最为显著的...

爱码小哥
47分钟前
19
0
CKEditor 5 + SpringBoot实战(四):SpringBoot 实现文件上传

在本系列的文章中,我将介绍如何在Spring Boot Application中使用CKEditor编辑器。介绍的内容包括基本环境的搭建,文件上传,SpringData JPA数据持久化,CKEditor5的安装,CKEditor图片上传,...

树下魅狐
49分钟前
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部