angular.json 配置项

劳彦
2023-12-01

下面是整理的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"

}

 类似资料: