Angular 6迁移：.angular-cli.json未自动转为angular.json，求解决办法

我之前升级Angular项目到6版本时也碰到过一模一样的问题——明明按指南执行了CLI升级命令，旧的配置文件却死活没自动转换。别着急，下面分享自动修复和手动转换两种方案：

一、尝试自动修复配置文件 #

有时候自动转换失败是因为CLI版本不匹配或者升级命令没执行到位，按以下步骤重新操作：

1. 先彻底卸载旧版本的Angular CLI，避免版本冲突

   npm uninstall -g @angular/cli
   npm uninstall @angular/cli
   

2. 安装Angular 6对应的CLI版本（注意不要装最新版，要指定6.x）

   npm install -g @angular/cli@6.x
   npm install @angular/cli@6.x --save-dev
   

3. 执行带迁移参数的升级命令，强制触发配置文件转换

   ng update @angular/cli --migrate-only --from=1
   

   注：--from=1是因为Angular 5对应的CLI版本是1.x，如果你的项目之前是更早版本，可根据实际情况调整这个数值

执行完这些步骤后，检查项目根目录，应该会生成新的angular.json，旧的.angular-cli.json会被自动重命名为.angular-cli.json.old。

二、手动转换配置文件 #

如果自动修复还是不行，那就手动创建angular.json，把旧文件的配置对应迁移过去，步骤如下：

1. 在项目根目录新建angular.json文件，粘贴以下基础模板（替换其中的your-project-name为你的项目名称）：

   {
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "version": 1,
     "newProjectRoot": "projects",
     "projects": {
       "your-project-name": {
         "root": "",
         "sourceRoot": "src",
         "projectType": "application",
         "architect": {
           "build": {
             "builder": "@angular-devkit/build-angular:browser",
             "options": {
               "outputPath": "dist",
               "index": "src/index.html",
               "main": "src/main.ts",
               "polyfills": "src/polyfills.ts",
               "tsConfig": "src/tsconfig.app.json",
               "assets": [],
               "styles": [],
               "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": "your-project-name:build"
             },
             "configurations": {
               "production": {
                 "browserTarget": "your-project-name:build:production"
               }
             }
           },
           "extract-i18n": {
             "builder": "@angular-devkit/build-angular:extract-i18n",
             "options": {
               "browserTarget": "your-project-name:build"
             }
           },
           "test": {
             "builder": "@angular-devkit/build-angular:karma",
             "options": {
               "main": "src/test.ts",
               "polyfills": "src/polyfills.ts",
               "tsConfig": "src/tsconfig.spec.json",
               "karmaConfig": "src/karma.conf.js",
               "styles": [],
               "scripts": [],
               "assets": []
             }
           },
           "lint": {
             "builder": "@angular-devkit/build-angular:tslint",
             "options": {
               "tsConfig": [
                 "src/tsconfig.app.json",
                 "src/tsconfig.spec.json"
               ],
               "exclude": [
                 "**/node_modules/**"
               ]
             }
           }
         }
       }
     },
     "defaultProject": "your-project-name"
   }
   

2. 打开旧的.angular-cli.json，把里面的配置对应到新文件中：

   • 旧文件apps[0].assets → 新文件projects.your-project-name.architect.build.options.assets
   • 旧文件apps[0].styles → 新文件projects.your-project-name.architect.build.options.styles
   • 旧文件apps[0].scripts → 新文件projects.your-project-name.architect.build.options.scripts
   • 旧文件apps[0].environments里的生产环境配置，替换到新文件build.configurations.production中对应的位置
   • 旧文件defaults里的配置，添加到新文件顶层的defaults节点（如果有的话）

3. 完成配置迁移后，删除旧的.angular-cli.json，执行ng serve验证项目是否能正常启动。

内容的提问来源于stack exchange，提问作者Mave