Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Convert .angular-cli.json to angular.json (for Angular 6 Migration from Angular 2/4/5)
/**
* 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);
@leo6104

This comment has been minimized.

Copy link
Owner Author

@leo6104 leo6104 commented Apr 5, 2018

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

@leo6104

This comment has been minimized.

Copy link
Owner Author

@leo6104 leo6104 commented Apr 5, 2018

serviceWorker option added

@brianloweongit

This comment has been minimized.

Copy link

@brianloweongit brianloweongit commented May 11, 2018

Thanks for this.

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

@alexnoise79

This comment has been minimized.

Copy link

@alexnoise79 alexnoise79 commented May 11, 2018

thanks, appreciated! ;)

@pfeigl

This comment has been minimized.

Copy link

@pfeigl pfeigl commented May 14, 2018

There is ng update @angular/cli for exactly this

@Chris2011

This comment has been minimized.

Copy link

@Chris2011 Chris2011 commented May 14, 2018

"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

@Chris2011

This comment has been minimized.

Copy link

@Chris2011 Chris2011 commented May 15, 2018

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.

@dKab

This comment has been minimized.

Copy link

@dKab dKab commented May 31, 2018

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

@dKab

This comment has been minimized.

Copy link

@dKab dKab commented May 31, 2018

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...

@psvnlsaikumar

This comment has been minimized.

Copy link

@psvnlsaikumar psvnlsaikumar commented Jul 5, 2018

@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!``

@maiasmith

This comment has been minimized.

Copy link

@maiasmith maiasmith commented Jul 17, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment