简单说说angular.json文件的使用

下面是“简单说说angular.json文件的使用”的完整攻略。

什么是angular.json文件？

angular.json是Angular项目的核心配置文件，它包含了项目的所有配置信息，包括构建选项、样式、脚本、插件等等。在Angular CLI中，使用angular.json文件来进行项目配置和构建。在一般情况下，我们不需要手动修改该文件。

angular.json文件的结构

angular.json文件由以下几部分组成：

• version: 项目的版本号
• newProjectRoot: 新项目的根目录，默认为projects
• projects: 对应每个Angular项目的配置信息
• defaultProject: 默认项目的名称，通常为第一个项目的名称
• cli: CLI本身的配置信息
• schematics: 架构设计相关的配置信息

其中，projects是我们需要关注的重点，下面对projects进行详细的介绍。

projects的结构

每个项目都拥有一个唯一的名称，对应于projects中的一个属性，例如下面的例子：

"projects": {
  "my-project": {
    ...
  }
}

在项目属性中，有以下几个重要的属性：

• projectType: 项目类型，可以为application、library或component
• root: 项目根目录，即src目录的路径
• sourceRoot: 源代码文件夹的路径，通常与root属性相同
• prefix: 组件、指令和管道的前缀，用于解决组件、指令和管道名称冲突的问题

除了这些基本属性外，还有一些其他的属性，例如：

• architect: 构建和测试的配置信息
• schematics: 架构设计相关的配置信息

architect属性

architect属性是projects中最重要的属性之一，它包含了项目的构建、测试和部署的所有配置信息，例如：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/my-project",
      "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.scss"
      ],
      "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
      }
    }
  },
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "my-project:build"
    },
    "configurations": {
      "production": {
        "browserTarget": "my-project:build:production"
      }
    }
  },
  "test": {
    "builder": "@angular-devkit/build-angular:karma",
    "options": {
      "main": "src/test.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.spec.json",
      "karmaConfig": "karma.conf.js",
      "styles": [
        "src/styles.scss"
      ],
      "scripts": [],
      "assets": [
        "src/favicon.ico",
        "src/assets"
      ]
    }
  },
  "lint": {
    "builder": "@angular-devkit/build-angular:tslint",
    "options": {
      "tsConfig": [
        "tsconfig.app.json",
        "tsconfig.spec.json",
        "e2e/tsconfig.json"
      ],
      "exclude": [
        "**/node_modules/**"
      ]
    }
  }
}

在architect属性中，有以下几个重要的属性：

• build: 构建项目的配置信息
• serve: 启动开发服务器的配置信息
• test: 测试项目的配置信息
• lint: 对项目进行代码检查的配置信息

一个简单的例子

例如，我们可以通过以下方式使用angular.json文件：

"projects": {
  "my-project": {
    "root": "src",
    "sourceRoot": "src",
    "prefix": "app",
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist/my-project",
          "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.scss"
          ],
          "scripts": []
        }
      }
    }
  }
}

这个例子中，my-project项目的root属性设置为src，prefix属性设置为app。同时，在architect属性中，我们定义了一个build任务，用于构建我们的应用程序。

另一个例子

接下来，我们来看看一个带有配置文件的应用程序的示例：

"projects": {
  "my-app": {
    "root": "src",
    "sourceRoot": "src",
    "prefix": "app",
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist/my-app",
          "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.scss"
          ],
          "scripts": []
        }
      },
      "test": {
        "builder": "@angular-devkit/build-angular:karma",
        "options": {
          "main": "src/test.ts",
          "polyfills": "src/polyfills.ts",
          "tsConfig": "tsconfig.spec.json",
          "karmaConfig": "karma.conf.js",
          "styles": [
            "src/styles.scss"
          ],
          "scripts": [],
          "assets": [
            "src/favicon.ico",
            "src/assets"
          ]
        }
      }
    }
  }
}

在这个例子中，我们定义了一个test任务，用于测试我们的应用程序。这个test任务使用了不同的构建器@angular-devkit/build-angular:karma。用于针对我们的应用程序写测试。

结论

在现代的Angular项目中，angular.json文件已经成为了必须的文件之一。通过配置angular.json文件，我们可以轻松地管理各种构建、测试和部署任务。了解如何使用angular.json文件是非常重要的，它可以帮助我们更好地开发Angular项目。