angular.json

一 angular.json的字段讲解
- 1 前序
- 2 字段讲解
- - 1 $schema
  - 2 version
  - 3 newProjectRoot
  - 4 projects
  - - 1 root
    - 2 sourceRoot
    - 3 projectType
    - 4 prefix
    - 5 schematics
    - 5 architect
    - - 1 前序
      - 2 总览
      - 3 以`build`为例
二 proxy.conf.json 统一前端的请求地址
- 2 配置`proxy.conf.json`
- 3 创建`proxy.conf.json`

一 angular.json的字段讲解

1 前序

angular.json 是用于管理angular项目环境的。
angular.json中所有字段表示的意思都在$schema 文件中，一般被放置在angular.json文件的第一行。

 "$schema": "http://json-schema.org/draft-07/schema"

2 字段讲解

1 $schema

指向一个 JSON Schema 文件，这个文件描述了angular.json所有的字段以及约束。

2 version

设置版本

3 newProjectRoot

新建项目所在的路径

4 projects

用于管理所有项目，其中的一个项目如下

"projects": {"pumkin-web": {"projectType": "application","schematics": {"@schematics/angular:application": {"strict": true}},"root": "","sourceRoot": "src","prefix": "app",}},

1 root

代表跟目录也就是项目所在的位置，通常为"";

2 sourceRoot

项目源码所在目录，默认为src

3 projectType

标示这个项目是application还是library。

4 prefix

使用ng generate component生成组件时的前缀。

5 schematics

用于简化cli的命令，如简化生成组件的命令：

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

此外这些是CLI预设的几组选项

@schematics/angular:component
@schematics/angular:class
@schematics/angular:directive
@schematics/angular:guard
@schematics/angular:module
@schematics/angular:pipe
@schematics/angular:service

5 architect

1 前序

在angular.json中有一个architect字段，包含了一些项目自动化相关的命令，如运行，编译，测试等等，其中默认有build、serve、test、extract-i18n。
第二点中build每个字段(build、serve、test、extract-i18n)都有3个子字段属性builder、options、configurations。
其中builder代表要执行的内置程序，options代表builder要配置的配置项，调用不同的程序，需要不同的配置项；configrations代表这个命令的多种调用模式，在此配置里，我们可以定义不同的别名，在使用的时候手动选择不同的模式。

2 总览

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

3 以`build`为例

"build": {"builder": "@angular-devkit/build-angular:browser","options": {"outputPath": "dist/pumkin-web","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","assets": ["src/favicon.ico","src/assets"],"styles": ["src/styles.css"],"scripts": []},"configurations": {"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": {"buildOptimizer": false,"optimization": false,"vendorChunk": true,"extractLicenses": false,"sourceMap": true,"namedChunks": true}},"defaultConfiguration": "production"},

二 proxy.conf.json 统一前端的请求地址

2 配置`proxy.conf.json`

architect->serve然后在serve中添加如下

"serve": {"options":{"browserTarget": "pumkin-web:build","proxyConfig": "proxy.conf.json"},
},

3 创建`proxy.conf.json`

创建一个与angular.json同级的以.json结尾的配置文件。
在文件中加入如下。
/frontkit/service中把fromkit修改为对应的项目名即可。
target改为统一的前端请求地址

{"/frontkit/service": {"target": "http://127.0.0.1:9000","secure": false}
}

angular.json相关推荐

SAP Spartacus angular.json 中定义的 serve-ssr
直接不带参数运行 ng run: An unhandled exception occurred: Cannot determine project or target for command. Se ...
Angular 项目里 angular.json 文件内容的学习笔记
看一个基于 Angular 的 SAP Spartacus 项目里 angular.json 的例子: version: The configuration-file version. newProj ...
Angular应用的angular.json文件字段一览
$schema JSON Schema 是一个允许我们注解和验证JSON数据格式的工具. 我们可以在任何使用Angular cli创建的Angular应用的node_module对应路径下找到这个sc ...
【精】angular.json配置详解【angular12】
文章目录说明目录结构的理解 angular.json详解说明 angular升级到6以后,我们通过脚手架创建的项目就由angular-cli.json变为了angular.json了.其中引入了 ...
SAP Spartacus 中 Angular json pipe 的工作原理
源代码如下: <ng-template cxOutletRef="header" cxOutletPos="before" let-jerryvar> ...
SAP Spartacus的Angular.json内容一览
这个扩展安装之后,右键菜单会增添新的选项: Gen Dependent tree: 选择之后,会自动生成被选中的文件导入的其他module所在的ts文件,非常方便: 默认的项目是storefronta ...
Angular tsconfig.json 文件里的 paths 用法和 scoped module 定义
执行命令行: ng run storefrontapp:server:production 报错: Error: projects/storefrontapp/src/app/app.module.t ...
关于 Angular 项目类型为 library 的工程使用 tsconfig.json 的问题
我今天做 Angular 开发时,遇到一个很奇怪的问题: 在某个 Angular library 项目里,无法正确解析出 @Spartacus/core, 错误消息: Cannot find modu ...
Angular 项目 tsconfig.json 里定义的 out-tsc 还有作用吗？
在这个 StackOverflow 帖子里有介绍: What happens to the outDir in tsconfig.json for Angular projects? ng 命令的路径 ...

angular.json

angular.json

一 angular.json的字段讲解

1 前序

2 字段讲解

1 $schema

2 version

3 newProjectRoot

4 projects

1 root

2 sourceRoot

3 projectType

4 prefix

5 schematics

5 architect

1 前序

2 总览

3 以`build`为例

二 proxy.conf.json 统一前端的请求地址

2 配置`proxy.conf.json`

3 创建`proxy.conf.json`

angular.json相关推荐

最新文章

热门文章

angular.json

angular.json

一 angular.json的字段讲解

1 前序

2 字段讲解

1 $schema

2 version

3 newProjectRoot

4 projects

1 root

2 sourceRoot

3 projectType

4 prefix

5 schematics

5 architect

1 前序

2 总览

3 以build为例

二 proxy.conf.json 统一前端的请求地址

2 配置proxy.conf.json

3 创建proxy.conf.json

angular.json相关推荐

最新文章

热门文章

3 以`build`为例

2 配置`proxy.conf.json`

3 创建`proxy.conf.json`