Loading episodes…
0:00 0:00

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

00:00
BACK TO HOME

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

10xTeam September 06, 2020 10 min read

In this quick example, we’ll see a script that can help you to convert .angular-cli.json to angular.json for migrating your app to Angular 10/…/6 from Angular 2/4/5.

This script is created by leo6104. You can use this Node script inside your Angular v5/4/2 project.

Create a ng-update-v6.js file inside the Angular project’s folder and add the following code:

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);

Next, run the following command

$ node ng-update-v6.js .angular-cli.json

A file named angular.json will be created in your project.

Check this gist


Join the 10xdev Community

Subscribe and get 8+ free PDFs that contain detailed roadmaps with recommended learning periods for each programming language or field, along with links to free resources such as books, YouTube tutorials, and courses with certificates.

Audio Interrupted

We lost the audio stream. Retry with shorter sentences?