angular.json文件的讲解（代码示例）

directive生成组件或者指令时默认的selector前缀，通常我们使用命令创建的组件或指令都是app-xxx格式，我们可以手动在这里改动，使整个项目生效。

schematics

CLI中生成组件、指令、模块等文件的指令是使用@angular-devkit/schematics实现的，这些指令通常带有一些快捷配置，比如一个生成组件的命令：ng g c --spec=false --styleext=scss，这条命令可以直接生成一个不带测试文件、使用scss为样式文件的组件。如果每次都要手动输入这些配置就会显得麻烦，所以angular.json提供了schematics属性来统一设置一些生成类的命令配置。

这里的schematics是针对单个project来的。整个angular.json也有此字段，默认生效于所有project。

CLI预设了几组选项，我们可以针对不同的选项进行配置：

@schematics/angular:component

@schematics/angular:class

@schematics/angular:directive

@schematics/angular:guard

@schematics/angular:module

@schematics/angular:pipe

@schematics/angular:service

拿component举例，如果要实现统一ng g c --spec=false --styleext=scss的效果，可以配置如下：

{
    "schematics": {
        "@schematics/angular:component": {
             "styleext": "less",
             "spec": false
        }
    }
}

包含几组CLI相关的项目自动化命令配置，比如本地运行、编译、测试等等。默认预设了几组命令配置如build、serve等等：

{ "architect":{ "build":{}, "serve":{}, "extract-i18n":{}, "test":{}, "lint":{} } }

配置属性

每一个配置项都有 3 个字段属性：builder，options，configurations，例如默认的build命令配置：

{ "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/testApp", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true } } } } }

这个是项目默认生成的配置。

builder代表要执行的内置程序，因为CLI内置了一些自动化工具，architect只是提供了一个facade模式（通俗地讲，就是开发者不需要知道内部的复杂实现）给开发者配置使用，本质上还是调用的内置工具。

options代表针对当前builder要配置的配置项，调用不同的内置程序，是需要传对应的配置项的，由于配置项很多，这里也不会列出。

configurations代表这个命令的多种调用模式，在此配置里，我们可以定义不同的别名，然后使用不同的配置（配置的字段还是属于options里的），最后在使用命令时便可以手动选择不同的模式。

如何使用

CLI其实内置了几个快捷命令来对应默认生成的配置如ng serve、ng build等等，如果是我们额外自定义的配置，则可以使用ng run <project>:<architect>[:configurations] [其他配置]
命令来实现，其中project和architect为必填，configurations为选填。

比如我们简单额外自定义一个本地运行的服务器命令：

{ "architect":{ "myServe":{ "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "xxxx:build", "port": 8800 }, "configurations": { "port1": { "port": 8801 }, "port2": { "port": 880 } } } } }

配置使用了内置的运行本地服务器程序，然后使用默认的build配置，加上自定义的运行端口，另外加上两个不同模式，运行不同端口。

使用ng run xxxx:myServe可以正常运行本地服务器跑项目，端口是8800
使用ng run xxxx:myServe:port1端口是8801

当然，我们还可以直接使用额外的命令行配置直接覆盖已经定义的配置：
ng run xxxx:myServe:port1 --port=8808

这里的例子只是为了简单了解下architect的用法。

defaultProject

默认项目，当使用一些CLI命令没有指定项目名称时，默认指向的项目。

schema.json

其实我只是为了记录自己有点印象的属性，整个angular.json还有很多其他的字段，如果想要全面了解，我们可以直接打开$schema所指向的文件，里面详细地展示了各种字段的类型、配置以及描述说明。

以上就是angular.json文件的讲解（代码示例）的详细内容，更多请关注php中文网其它相关文章！

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

关键词：angular.json文件的讲解（代码示例）