Last active
December 2, 2024 05:55
-
-
Save leo6104/b4a2da0863d3c5b1877860d62464c706 to your computer and use it in GitHub Desktop.
Convert .angular-cli.json to angular.json (for Angular 6 Migration from Angular 2/4/5)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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); |
@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
@dKab
Running
ng update @angular/cli
did not work for me even though I tried using it twice. But when I accidentally ranng update ng update @angular/cli
then it miraculously worked!``