Changes to package.json for Angular 2 to 4 migrations

Question

The application is currently on Angular 2.0.0. What are the packages or dependencies that need to be changed for compatibility with Angular 4? So far I have changed the following,

"dependencies": { "@angular/common": "4.0.0", "@angular/compiler": "4.0.0", "@angular/core": "4.0.0", "@angular/forms": "4.0.0", "@angular/http": "4.0.0", "@angular/platform-browser": "4.0.0", "@angular/platform-browser-dynamic": "4.0.0", "@angular/router": "4.0.0", "@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "4.0.0", "angular2-toaster": "2.0.0", "rxjs": "^5.0.1", "typescript": "^2.1.5", "zone.js": "^0.8.4" } 

Are there any other packages / dependencies that need to be changed?

Should I make changes to tsconfig.json?

 { "compilerOptions": { "target": "es5", "module": "commonjs", "lib": [ "es5", "es2015", "es2017", "dom", "scripthost" ], "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "noEmitHelpers": true, "allowNonTsExtensions" : true }, "exclude": [ "node_modules", "typings/main.d.ts", "typings/main" ], "filesGlob": [ "./src/**/*.ts", "./test/**/*.ts", "!./node_modules/**/*.ts", "src/custom_typings.d.ts", "typings/browser.d.ts" ], "awesomeTypescriptLoaderOptions": { "resolveGlobs": true, "forkChecker": true }, "compileOnSave": false, "buildOnSave": false, "atom": { "rewriteTsconfig": false } } 

Answer 1

I usually use the files here for guidance: https://github.com/angular/quickstart

It provides a set of basic seed files needed for the application, and it is usually updated with Angular, as it is part of Angular documents in angular.io.

Answer 2

There is an online application that will help you in the (simple) upgrade process from 2 to 4: https://angular-update-guide.firebaseapp.com/

Answer 3

Here is a good YouTube video that explains how to Migrate Angular 2 to Angular 4

Let me summarize what was said in the video. Migrating from Angular 2 to Angular 4 is a three-step process.

• Delete your old node_modules folder as it refers to Angular 2.X.

• Change all @ Angular versions from 2.X to 4.X and install "npm install".

• You can get information that this version is not compatible with this version. Correct the error that says the error. Watch a video on how to fix peer issues.

• Run the project and do a thorough test.

Answer 4

You do not need to make changes to ts.config. The changes you have in package.json seem to be correct.

A couple of points:

• I think that "typescript" should be in "devDependencies", since you won't need it in prod mode.
• I recommend removing the “^” from all your bc dependencies; better fix the exact version
• I also highly recommend using "shrinkwrap" to avoid free dependencies within your dependencies.

To install the latest version of Angular, delete / move the current node_modules folder. Then:

 npm cache clean npm install 

For reference, see the "Upgrading to 4.0.0" section http://angularjs.blogspot.com/2017/03/angular-400-now-available.html

Answer 5

You do not need to make changes to the package.json file manually, you can run this command if you use windows

 npm cache clean npm install @angular/ common@next @angular/ compiler@next @angular/ compiler-cli@next @angular/ core@next @angular/ forms@next @angular/ http@next @angular/ platform-browser@next @angular/ platform-browser-dynamic@next @angular/ platform-server@next @angular/ router@next @angular/ animations@next --save 

This will help

After you comment

you must update your typescript, and you can also try changing it in tsconfig.json

 { "compilerOptions": { "target": "es5", "lib": ["es2016", "dom"] //or es6 instead of es2016(es7) } } 

Answer 6

My solution in these situations is to use angular-cli to create a new project in the angular version that I want (almost always the newest version for me) and then add the package manager to the other dependencies that I need to figure out which version I must have, or state my opinion about it with the help of my package manager commands.

This allows me to quickly create a vendor library and quickly verify that it will load without errors using the "application works!". project that provides cli.

Once this process is complete, you should have a package.json file that you can simply cut and paste the dependency sections into your project.

One more thing to see if you don’t have ... Yarn. Yarn is the new package manager from our facebook friends. It is newer and therefore less tested than npm, but it has some really nice features and, at least in my setup, it works about 20 times faster than npm. Another commissioner mentioned shrinkwrap, which is a great tool, so I thought I would just point out another solution in this area.