浅谈angular.json文件的使用

Angular CLI 6之后，原来的angular-cli.json改成了angular.json，里面的字段变化很大。如果不懂基本的构成，或者直接把旧版本的代码复制到新版本的工作区，就会导致一些不友好的错误。

这种变化的主要原因是Angular CLI引入了monorepo的开发模式(一个空间管理多个项目)，即使用ng new相当于一个大的工作空间，通过angular.json配置管理ng generate application | library中的各种项目或组件库。

其实这种模式的优势是显而易见的。例如，当一个公司有多个管理平台或产品时，使用这种模式可以统一每个项目的环境，统一维护每个项目共享的组件。所有项目共享npm包和typescript配置。

单一回购的结构如下：

但事实上，大多数人仍然在一个工作空间中维护一个项目，所以这在这里并不重要，只想说json文件为新模式而改变。

角动量的部分场

当您新建一个工作空间时，默认情况下会在根目录下创建一个项目和相应的e2e项目。初始angular.json结构如下(省略了部分配置代码)

{“$ schema”:/node_modules/

$schema

指向一个描述angular.json的所有字段和约束的JSON Schema文件

实际上，它可以比作一个具有“类型提示”功能文件。只要IDE或支持该功能的编辑器在编写angular.json文件时会给出相应的提示。

版本

设置版本

newProjectRoot

新项目所在的路径。

当使用ng generate application | library创建新项目时，它将自动组装到set new project根目录

项目

放置所有项目的配置。一个项目是一个子项，如xxxx，它是在创建时自动生成的。

{ ' projects ' : { ' xxxx ' : { ' root ' : ' '，' sourceRoot': 'src '，' projectType': 'application '，' prefix': 'app '，' Schematics' : {}，' architect' : {}}在单一配置中，可以通过灵活的配置实现一些自动操作，也可以使用CLI的一些内置指令。

根

表示项目的“根目录”，即项目的位置，或者项目源代码的父目录。项目的根目录包含一些特定的配置。

sourceRoot

默认情况下，src目录通常用在项目源代码所在的目录中。

projectType

标记此项是应用程序还是库

前缀

使用ng generate component | instruction生成组件或指令时的默认选择器前缀通常是app-xxx格式，因此我们可以手动更改它以使整个项目生效。

图表

在CLI中生成组件、指令、模块和其他文件的命令是使用@angular-devkit/schematics实现的。这些命令通常有一些快捷配置，比如一个生成组件的命令：ng g c-spec=false-style ext=SCS，可以直接生成一个组件，无需测试文件，使用SCS作为样式文件。每次手动输入这些配置都很麻烦，所以angular.json提供schematics属性来统一设置生成类的一些命令配置。

这里的示意图是针对单个项目的。整个angular.json也有这个字段，默认情况下对所有项目都有效。

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

@ schematics/Angular : component @ schematics/Angular : class @ schematics/Angular : directive @ schematics/Angular : guard @ schematics/Angular : Module @ schematics/Angular : Pipe @ schematics/Angular : Service以组件为例。如果想达到统一NG G C-spec=false-Style ext=SCSS的效果，可以按如下方式配置：

{ ' schematics ' : { ' @ schematics/angular : component ' : { ' style ext ' : ' less '，' spec' : false}}}然后可以直接使用ng g c直接生成相应的组件。

建筑师

包含几组与CLI相关的项目自动化命令配置，如本地运行、编译、测试等。默认情况下，预设了几组命令配置，如构建、服务等：

{“architect”: {“build”: { }、“serve”: { }、“extract-i18n”: { }、“test”: { }、“lint”: { }配置属性

每个配置项都有三个字段属性：构建器、选项和配置，例如，默认的构建命令配置：

{ ' architect ' : { ' Build ' : { ' builder ' : ' @ angular-dev kit/Build-angular : browser '，' options ' : { ' output path ' : ' dist/testApp '，' index': 'src/index.html '，' main': 'src/main.ts '，' poly fills ' : ' src/poly fills . ts '，' tsConfig ' :

Builder代表要执行的内置程序，因为有些自动化工具内置在CLI中，architect只提供一个门面模式(通俗地说，开发人员不需要知道内部复杂的实现)供开发人员配置使用，本质上就是一个所谓的内置工具。

Options代表为当前构建器中要配置的配置项调用不同的内置程序，需要传递相应的配置项。由于配置项很多，这里就不一一列举了。

Configurations代表该命令的多种调用模式。在这个配置中，我们可以定义不同的别名，然后使用不同的配置(配置的字段仍然属于选项)。最后，我们可以在使用命令时手动选择不同的模式。

如何使用

事实上，CLI内置了几个快捷命令来对应默认生成的配置，如ng serve、ng build等。如果是额外的用户定义配置，可以通过使用ng run project : architect[: configurations][其他配置]命令来实现，其中项目和architect是必需的，配置是可选的。

例如，我们只需自定义一个本地运行的服务器命令：

{ ' architect ' : { ' my server ' : { ' builder ' : ' @ angular-dev kit/build-angular : dev-server '，' options ' : { ' browserTarget ' : ' xxxx : build '，' port': 8800 }，' configurations ' : { ' port 1 ' : { ' port ' 3: 8801 } }

使用ng run xxxx:myServe正常运行本地服务器项目，端口为8800。使用ngrun xxxx : myserve :端口1是8801。

当然，我们也可以用额外的命令行配置直接覆盖定义的配置：ng run xxxx : my server : port 1-port=8808

这里的例子只是为了简单理解架构师的用法。

默认项目

默认项目，当某些命令行界面命令没有指定项目名称时，默认指向的项目。

schema.json

其实我只是想记录下我有一点印象的属性。angular.json中还有很多其他的字段，如果想有一个全面的了解，可以直接打开$schema指向的文件，里面详细展示了各个字段的类型、配置和描述。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。