31

I have read the following blogs and documentation

and no clear information about how to migrate from 4.x to 5.

Tried the following commands

  • npm install 

    npm install @angular/{animations,common,compiler,compiler-cli,
            core,forms,http,platform-browser,platform-browser-dynamic,
            platform-server,router}@5.0.0

  • yarn installation

    yarn add @angular/{animations,common,compiler,compiler-cli,
         core,forms,http,platform-browser,platform-browser-dynamic,
         platform-server,router}@5.0.0

  • Tried the update guide

     npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' 
        @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' 
        @angular/core@'^5.0.0' @angular/forms@'^5.0.0'
        @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' 
        @angular/platform-browser-dynamic@'^5.0.0' 
        @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' 
        typescript@2.4.2 rxjs@'^5.5.2'

 npm install typescript@2.4.2 --save-exact

Nothing worked fine for me. Please help

Aravind
  • 40,391
  • 16
  • 91
  • 110
  • 6
    When you say 'nothing works', what do you mean? Were you having any errors? For the command from the update guide, I had the remove all the singles quotes between the package and version: https://github.com/StephenFluin/angular-update-guide/issues/4 – Kevin Doyon Nov 03 '17 at 20:50
  • You could also edit your package.json file and then run `npm install`. `"dependencies": { "@angular/animations": "5.0.0", "@angular/common": "5.0.0", "@angular/compiler": "5.0.0", "@angular/core": "5.0.0", "@angular/forms": "5.0.0", "@angular/http": "5.0.0", "@angular/platform-browser": "5.0.0", "@angular/platform-browser-dynamic": "5.0.0", "@angular/router": "5.0.0",` – Matthias Sommer Nov 03 '17 at 21:22
  • There is an upgrade guide by the Angular team available [here](https://angular-update-guide.firebaseapp.com/). – JayChase Nov 03 '17 at 23:47

2 Answers2

72

You need to update all angular provided packages to their latest versions as follows:

npm install typescript@2.4 --save-dev

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

This should do all the necessary. Plus you could also update your angular cli that ships with angular 5 as standard version as follows:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

Here is the official blogpost by Angular team : https://angular-update-guide.firebaseapp.com/. This update guide will help you to migrate from any version to the latest one.

Peter
  • 10,492
  • 21
  • 82
  • 132
  • 3
    worked for me... I have used npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest -g --save – Foram Sangani Nov 17 '17 at 11:33
  • 3
    @ForamSangani, the -g parameter will install each of those packages globally and should be removed. – benmod Dec 05 '17 at 09:23
  • Its necessary for updating Angular 4 to 5 version? – Rijo Jan 17 '18 at 00:40
  • @Rijo Not necessary but yes V5 does offer some cool improvements in Build Optimizer & Compiler. Check this: https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced. Its all on you. – Peter Jan 17 '18 at 03:52
  • 8
    instead of `npm cache clean` use `npm cache verify` instead – greatgumz Jan 17 '18 at 23:46
  • The link is currently down now, not sure what problem with their guide – Raphaël VO Jan 30 '18 at 09:35
  • @ThoVo it loads for me. Just refresh! – Peter Jan 30 '18 at 09:36
  • yeah, I saw it worked, thanks :) – Raphaël VO Jan 30 '18 at 11:07
  • ..might want to add **@angular/cdk@latest** for later versions as well :) – Tony Feb 13 '18 at 10:24
  • also had to `npm i -D @angular/language-service@latest` – CleverPatrick Feb 13 '18 at 14:01
5

This website made it very easy for me. Put in your version you're upgrading from, and which one you're upgrading to. My app is simple, so it may depend on the complexity of your app.

Ben
  • 1,169
  • 3
  • 17
  • 27