Angular 6 Migration -.angular-cli.json to angular.json
AngularAngular Problem Overview
I've upgraded my project to Angular 6, and everything went fine except the conversion of .angular-cli.json
file. From the guide I followed, it was said that this will convert it automatically.
> npm install -g @angular/cli > > npm install @angular/cli > > ng update @angular/cli
However, it was not the case as I still have the old .angular-cli.json
Is there a way to do it automatically / manually?
Angular Solutions
Solution 1 - Angular
Most likely there were errors in one of those commands. For me, I had to run npm install -g @angular-devkit/core
first and then run the commands:
npm install -g @angular/cli
npm install @angular/cli
In the console output of npm install @angular/cli
you should see:
================================================================================
The Angular CLI configuration format has been changed, and your existing configuration can
be updated automatically by running the following command:
ng update @angular/cli
================================================================================
Then you obviously should run ng update @angular/cli
to finish off the process.
See the Official Update Guide for additional details.
Solution 2 - Angular
you can automatically update your existing angular-cli.json
file to angular.json
file by using the below command provided that you are on v6.x.x or greater of angular cli command line tool.
ng update @angular/cli --from=1.7.4 --to=6 --migrate-only
In the above command 1.7.4
is the previous cli version you were using. The --migrate-only
flag makes sure that it will only perform a migration but does not update the installed version. Use --to
instead of @angular/cli@6
because of https://github.com/angular/angular-update-guide/issues/64.
read more: angular/cli-github
Solution 3 - Angular
Try running "ng update @angular/cli" twice it will update angular-cli.json to angular.json
UPDATE:
if getting errors like this:
> ERROR: The specified command update is invalid, for available options see > ng-help.
then you need to run 2 commands as follows
- npm install --save-dev @angular/cli@latest.
- ng update @angular/cli
this will automatically create angular.json, delete .angular-cli.json and update karma.conf.js, src/tsconfig.spec.json, package.json, and tslint.json
Solution 4 - Angular
I was trying to update from 5.2 -> 6.1 and was running into an issue where after running npm install @angular/cli@6
followed by ng update @angular/cli@6
, (as described by https://update.angular.io/#5.2:6.1) my package.json
was being updated but none of the other files like .angular-cli.json
or tsconfig.json
were, even though I received no errors. I tried executing the update command multiple times but this had no effect.
I ended up running the following 3 commands which worked for me:
npm install @angular/cli@6
ng update @angular/cli
ng update @angular/core@6
The only real change there is the second command. The document says to run ng update @angular/cli@6
but that wouldn't update any of the config files.
Solution 5 - Angular
For upgrading version from 5.2 to 6.0 , I followed up the following steps.
- Install Node 8 or above.
- yarn global add @angular/cli.
- yarn add @angular/cli.
- ng update @angular/cli.
- ng update @angular/core.
Note: if, after executing ng update @angular/core command,invalid range issue arises,then follow below, just replace the major version in package.json, it'll automatically replace the minor. Resource : https://stackoverflow.com/questions/48970553/want-to-upgrade-project-from-angular-v5-to-angular-v6
- npm uninstall -g angular-cli
- npm cache clean or npm cache verify
- npm install -g @angular/cli@next
- then, replace lower versions to higher versions in package.json
file.
- delete node modules folder.
- run npm/yarn install.
After npm install, if you get error of missing src/styles path, then remove the paths given in angular.json file under assets block from ["src/styles", "src/fonts", "src/images", "src/assets", "src/favicon.ico"] to ["assets","favicon.ico"].
- yarn global add rxjs-tslint (might required).
- rxjs-5-to-6-migrate -p src/tsconfig.app.json (might required).
- yarn install @angular/[email protected] (to update material packages).
=> Please note you never need to rename angular.cli.json to angular.json manually!!
** feel free to ask if further queries arises.
Solution 6 - Angular
Please follow these steps :
-
Update your Angular CLI globally and locally (assuming latest version to be 7)
-
Take your old project and run following command
- npm install @angular/cli
- ng update @angular/cli
After running this you have updated all your angular packages to the latest version.
3)Add this package as it is still missing
npm install @angular-devkit/core --save -dev
-
create a fresh new project with ng serve (latest version)
-
Create a new empty file with name angular.json and copy the content of angular.json from the new project into it.
-
Update the name of project accordingly in angular.json
-
Run npm install
-
Run ng serve
-
You are now ready with the latest version of angular.
I followed the above steps to migrate from angular2 to angular7.
Solution 7 - Angular
IN CASE OF:
Local workspace file ('angular.json') could not be found.
OR
The serve command requires to be run in an Angular project, but a project definition could not be found.
Upgrade/downgrade to the desired version ( I tried Angular 6 for example )
[sudo] npm install -g -f @angular/cli@6.1.4
Update the local project
ng update @angular/cli@6.1.4
And you're good to go :)
ng serve