Angular 6 迁移 -.angular-cli.json 到 angular.json

JS

从.angular-cli.JSon到angular.JSon的Angular 6迁移指南

在Angular 6中，官方推荐将项目的配置文件从旧版的.angular-cli.JSon迁移到新版的angular.JSon。这一变化旨在提高项目的可维护性和性能。本文将详细介绍这一迁移过程，并提供相关的案例代码。

1. 迁移背景

随着Angular版本的升级，一些项目配置也需要进行相应的更新。在Angular 6中，.angular-cli.JSon被弃用，取而代之的是angular.JSon。新的配置文件不仅更灵活，而且支持更多的高级配置选项，使得开发者能够更好地定制项目。

2. 迁移步骤

首先，打开项目根目录下的.angular-cli.JSon文件，将其内容复制到新建的angular.JSon文件中。然后，按照以下步骤逐一调整配置项。

2.1. 配置文件结构

在.angular-cli.JSon中，配置文件结构如下：

JSon
{
  "project": {
    ...
  },
  "apps": [
    ...
  ],
  "e2e": {
    ...
  },
  ...
}

而在angular.JSon中，配置文件结构进行了一些调整：

JSon
{
  "projects": {
    "your-project-name": {
      ...
    }
  },
  "defaultProject": "your-project-name",
  ...
}

其中，"your-project-name"应该替换为实际的项目名称。

2.2. 环境配置

在.angular-cli.JSon中，环境配置可能如下所示：

JSon
{
  ...
  "environments": {
    "prod": "environments/environment.prod.ts",
    "dev": "environments/environment.dev.ts"
  }
  ...
}

迁移到angular.JSon时，环境配置应该放在项目配置的"architect"下：

JSon
{
  ...
  "projects": {
    "your-project-name": {
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "development": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ]
            }
          }
        }
      }
    }
  }
  ...
}

2.3. 其他配置项迁移

根据实际项目需要，逐一检查.angular-cli.JSon中的其他配置项，并将其迁移到angular.JSon中相应的位置。这可能涉及到各种配置，例如样式文件、输出路径等。

3. 测试与验证

完成所有配置项的迁移后，运行项目以确保一切正常。可以使用以下命令启动开发服务器：

bash
ng serve

访问[http://localhost:4200](http://localhost:4200)检查项目是否正常运行。

4.

通过将.angular-cli.JSon迁移到angular.JSon，我们成功地更新了项目配置，使其与Angular 6及更高版本兼容。这一迁移过程不仅为项目提供了更多的定制选项，还提高了整体性能和可维护性。在未来的Angular版本中，我们建议及时进行类似的迁移操作，以确保项目始终保持最新的配置和功能。

希望这个指南对你的项目迁移过程有所帮助！