Convert .angular-cli.json to angular.json (for Angular 6 Migration from Angular 2/4/5)

ng-update-v6.js

/**
 * Created by leo6104 (github.com/leo6104)
 * You can use this nodejs script on angular v5/v4/v2 project.
 * 1. Place this gist file `ng-update-v6.js` to angular project's root path
 * 2. use command `node ng-update-v6.js .angular-cli.json` 
 * 3. check angular.json file (created by ng-update-v6.js)
 **/
const fs = require('fs');
const path = require('path');

const argv = process.argv;

const legacyJSONPath = argv[2];
const legacyJSON = JSON.parse(fs.readFileSync(legacyJSONPath).toString());

const newJSON = {
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "src",
  "projects": {}
};

legacyJSON.apps.forEach(app => {
  const platformType = app.platform || 'browser';
  const rootPath = app.root;
  const environmentSource = path.relative(path.join(__dirname), path.join(__dirname, app.root, app.environmentSource));

  /**
   * Configuration
   **/
  const configurations = {};
  if (platformType === 'browser') {
    Object.keys(app.environments).forEach(env => {
      if (env === 'dev') return;
      configurations[(env === 'prod' ? 'production' : env)] = {
        "fileReplacements": [
          {
            "src": environmentSource,
            "replaceWith": path.relative(path.join(__dirname), path.join(__dirname, app.root, app.environments[env]))
          }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true
      }
    });
  } else {
    Object.keys(app.environments).forEach(env => {
      if (env === 'dev') return;
      configurations[(env === 'prod' ? 'production' : env)] = {
        "environment": path.relative(path.join(__dirname), path.join(__dirname, app.root, app.environments[env]))
      }
    });
  }

  /**
   * Options
   **/
  const options = {
    "outputPath": app.outDir,
    "main": path.relative(path.join(__dirname), path.join(__dirname, app.root, app.main)),
    "tsConfig": path.relative(path.join(__dirname), path.join(__dirname, app.root, app.tsconfig)),
  };

  options.serviceWorker = !!app.serviceWorker;

  if (app.stylePreprocessorOptions) {
    options.stylePreprocessorOptions = app.stylePreprocessorOptions;
    options.stylePreprocessorOptions.includePaths = options.stylePreprocessorOptions.includePaths.map(stylePath => {
      return path.relative(path.join(__dirname), path.join(__dirname, app.root, stylePath));
    });
  }

  if (platformType === 'browser') {
    options['index'] = path.relative(path.join(__dirname), path.join(__dirname, app.root, app.index));
    options['assets'] = [];
    options['styles'] = [];
    options['scripts'] = [];

    app.assets.forEach(asset => {
      if (typeof asset === 'string') {
        const filename = path.basename(asset);
        const filePath = path.join(app.root, asset);
        const stats = fs.lstatSync(filePath);
        if (stats.isDirectory()) {
          options.assets.push({glob: '**/*', input: filePath, output: filename});
        } else {
          let inputPath = filePath.split('/');
          inputPath.pop();
          inputPath = inputPath.join('/');
          options.assets.push({glob: filename, input: inputPath, output: filename});
        }
      } else {
        options.assets.push(Object.assign({}, asset, {
          input: path.relative(path.join(__dirname), path.join(__dirname, app.root, asset.input))
        }));
      }
    });

    app.styles.forEach(style => {
      if (typeof style === 'string') {
        const filePath = path.relative(path.join(__dirname), path.join(__dirname, app.root, style));
        options.styles.push(filePath);
      } else {
        options.styles.push(Object.assign({}, asset, {
          input: path.relative(path.join(__dirname), path.join(__dirname, app.root, style.input))
        }));
      }
    });

    app.scripts.forEach(script => {
      if (typeof script === 'string') {
        const filePath = path.relative(path.join(__dirname), path.join(__dirname, app.root, script));
        options.scripts.push(filePath);
      } else {
        options.scripts.push(Object.assign({}, asset, {
          input: path.relative(path.join(__dirname), path.join(__dirname, app.root, script.input))
        }));
      }
    });
  }

  if (app.polyfills) { // polyfills dose not exists on Server cli setting
    options['polyfills'] = path.relative(path.join(__dirname), path.join(__dirname, app.root, app.polyfills));
  }

  newJSON.projects[app.name] = {
    "root": app.root,
    "projectType": "application",
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:" + platformType,
        "options": options,
        "configurations": configurations
      }
    }
  };

  if (platformType === 'browser') {
    if (app.testTsconfig) {
      const testOptions = {
        "main": path.relative(path.join(__dirname), path.join(__dirname, app.root, app.test)),
        "polyfills": path.relative(path.join(__dirname), path.join(__dirname, app.root, app.polyfills)),
        "tsConfig": path.relative(path.join(__dirname), path.join(__dirname, app.root, app.testTsconfig)),
        "karmaConfig": rootPath + "/karma.conf.js",
        "styles": [],
        "scripts": [],
        "assets": []
      };
      if (app.polyfills) { // polyfills dose not exists on Server cli setting
        testOptions['polyfills'] = path.relative(path.join(__dirname), path.join(__dirname, app.root, app.polyfills));
      }
      testOptions['tsConfig'] = path.relative(path.join(__dirname), path.join(__dirname, app.root, app.testTsconfig));
      Object.assign(newJSON.projects[app.name].architect, {
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": testOptions
        }
      });
    }
    Object.assign(newJSON.projects[app.name].architect, {
      "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
          "browserTarget": app.name + ":build"
        },
        "configurations": {
          "production": {
            "browserTarget": app.name + ":build:production"
          }
        }
      },
      "extract-i18n": {
        "builder": "@angular-devkit/build-angular:extract-i18n",
        "options": {
          "browserTarget": app.name + ":build"
        }
      },
      "lint": {
        "builder": "@angular-devkit/build-angular:tslint",
        "options": {
          "tsConfig": [
            path.relative(path.join(__dirname), path.join(__dirname, app.root, app.tsconfig))
          ],
          "exclude": [
            "**/node_modules/**"
          ]
        }
      }
    });
  }
});

fs.writeFileSync("angular.json", JSON.stringify(newJSON));
console.log(newJSON);

Sync with 6.0.0-rc.0 latest (fileReplacements syntax changes - from/to -> src/replaceWith)

serviceWorker option added

Thanks for this.

I wonder why the angular/cli update tool doesn't do this essential step.

thanks, appreciated! ;)

There is ng update @angular/cli for exactly this

"configurations": {
   "gitlab": {
      "fileReplacements": [{
         "replace": "./karma.local.conf.js",
         "with": "./karma.gitlab.conf.js"
      }]
   }
}

This is not working, it will not replace anything. I tried from/to and src/replaceWith. No luck. This is inside my angular.json file and inside the test section. Unfortunately, I can't find the exact syntax. The files exist. I call npm run test-gitlab which maps to ng test -c=gitlab --source-map=false --code-coverage

Ok, the problem was that I have to override the property karmaConfig. So this is the right syntax for it:

"configurations": {
   "gitlab": {
      "karmaConfig": "./karma.gitlab.conf.js"
   }
}

Only to let you know this.

@pfeigl ng update @angular/cli didn't convert angular-cli.json to angular.json for me

Correction: ng update @angular/cli didn't do it the first time. But when I run it again just to be sure, it actually generated it. Strange that you have to run it two times...

@dKab
Running ng update @angular/cli did not work for me even though I tried using it twice. But when I accidentally ran ng update ng update @angular/cli then it miraculously worked!``

@saiyah007 your solution worked perfectly for me! How mysterious, indeed! Thank you!!!