下面是整理的angular.json 的一些配置项,希望能给需要的人提供帮助。
粘贴过来格式可能有点乱,复制粘贴到自己的编辑器总格式化一下就很清晰了。
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": { // cli属性定义Angular CLI的配置
"analytics": "03d60a89-c556-45ac-890b-46df7c77fbe0"
},
"version": 1,
"newProjectRoot": "projects", // 由CLI创建的新的内部应用和库放置的位置。默认值为 projects
// 这个属性包含了工作空间中所有项目的配置信息
"projects": {
"angular-learning": {
"projectType": "application", // appliaction 或者 library,应用可以在浏览器中独立运行,而库则不行
"schematics": { // 一组原理图(schematic),它可以为该项目自定义 ng generate 子命令的默认选项。
"@schematics/angular:application": {
"strict": true
}
},
"root": "", // 指定了项目文件的根文件夹,可能为空,但是它指定了一个特定的文件夹
"sourceRoot": "src", // 指定了项目源文件位置
"prefix": "app", // Angular 所生成的选择器的前缀字符串。可以自定义它,以作为应用或功能区的标识。
"architect": { // 为本项目的各个构建器目标配置默认值。
// 每一个配置项都有 3 个字段属性:builder,options,configurations
"build": {
"builder": "@angular-devkit/build-angular:browser", // builder 代表要执行的内置程序
"options": { // options代表针对当前builder要配置的配置项,调用不同的内置程序,是需要传对应的配置项的
"outputPath": "dist/angular-learning", // 输出目录
"index": "src/index.html", // 入口页面
"main": "src/main.ts", // 入口文件
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json", // ts配置
"assets": [ // 包含一些用于添加到项目的全局上下文中的静态文件路径。
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/" // 相对于 outDir 的路径(默认为 dist/project-name )。
}
],
"styles": [ // 包含一些要添加到项目全局上下文中的css\less\scss等样式文件。
"src/styles.css"
],
"scripts": [] // 包含一些 JavaScript 脚本文件,用于添加到项目的全局上下文中
},
// configurations代表这个命令的多种调用模式,在此配置里,我们可以定义不同的别名,然后使用不同的配置
"configurations": {
// 1、Angular CLI 具有两种构建配置: production 和 development。
"production": {
// 全部或部分应用的默认尺寸预算的类型和阈值。当构建的输出达到或超过阈值大小时,可以将构建器配置为报告警告或错误。
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
// 一个对象,包含一些文件及其编译时替代品。
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"optimization": true, //可以是布尔值或对象
"outputHashing": "all", //打包文件加上hash值
"sourceMap": false, // 生成sourceMap文件,会使打包变慢可以是布尔值或对象
"extractCss": true, //从全局样式中将css提取到css文件而不是js文件中。
"namedChunks": false, // 使用 chunkName来替换chunkId,保持缓存的能力
"extractLicenses": true, //用于管理第三方插件的许可协议,将所有许可证提取到一个单独的文件中
"vendorChunk": false, // 是否分离第三方插件
"buildOptimizer": true, // 是否优化编译器
}
},
// 2、默认情况下,ng build 命令使用 production 配置
"defaultConfiguration": "production"
},
"serve": { // 覆盖构建默认值,并为 ng serve 命令提供额外的服务器默认值
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my-app:build"
},
"configurations": {
"production": {
"browserTarget": "my-app:build:production"
}
}
},
"extract-i18n": { // 为 ng xi18n 命令所用到的 ng-xi18n 工具选项配置了默认值,该命令用于从源代码中提取带标记的消息串,并输出翻译文件
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "my-app:build"
}
},
"test": { // 节会覆盖测试时的构建选项默认值,并为 ng test 命令提供额外的默认值以供运行测试。
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.less"
],
"scripts": []
}
},
"lint": { // 为 ng lint 命令配置了默认值,用于对项目源文件进行代码分析
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": { // 覆盖了构建选项默认值,以便用 ng e2e 命令构建端到端测试应用
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "my-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "my-app:serve:production"
}
}
}
}
}
},
"defaultProject": "angular-learning"
}