How to update / upgrade from Angular 4 to Angular 5+

Question

I need to update my project from Angular 4 to Angular 5+ ,

I need to change all following dependencies to Angular 5+.

I also updated Angular CLI to 1.5.0.

I tried to create new project but it seems to create only Angular 4 project.

ng new NG5_Project

"dependencies": {
  "@angular/animations": "^4.2.4",
  "@angular/common": "^4.2.4",
  "@angular/compiler": "^4.2.4",
  "@angular/core": "^4.2.4",
  "@angular/forms": "^4.2.4",
  "@angular/http": "^4.2.4",
  "@angular/platform-browser": "^4.2.4",
  "@angular/platform-browser-dynamic": "^4.2.4",
  "@angular/router": "^4.2.4",
  "core-js": "^2.4.1",
  "rxjs": "^5.4.2",
  "zone.js": "^0.8.14"
}

What am I doing wrong.

CLI Config :

Sangwin Gawande · Accepted Answer · 2022-06-02T08:56:33.747

This specific problem was fixed with Node version update.

I had to update Node version,

sudo apt-get install nodejs

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli@latest

ng new ProjectName

node --version ==> 8.9.0

ng --version ==> 1.5.0

"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",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
}

UPDATE :

There is also official Angular update guide available now : https://update.angular.io

You can update Angular versions from minimum of v2.0 to latest version (v15.0 currently) with proper steps

Francisco d'Anconia · Answer 2 · 2018-08-31T16:56:51.670

11

Here's the correct answer, and it's super simple.

Follow the official Angular upgrade guide.

You'll fill out a short form selecting which version of Angular you are on and which version you want to upgrade to. It then shows you the list of necessary steps to take to perform the upgrade. You should follow this guide for all upgrades. (Please upvote before navigating away) :)

https://update.angular.io/

edited Aug 31 '18 at 16:56

answered May 23 '18 at 21:58

Francisco d'Anconia

2,436
1
19
25

score 7 · Answer 3 · edited Nov 30 '17 at 09:00

7

Check Angular blog out

https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

In the article, an update guide is mentioned.

You can find it here: https://angular-update-guide.firebaseapp.com/

Also, you can update your angular-CLI to 1.5.0 which will create angular v5 project. You can compare the differences with yours.

edited Nov 30 '17 at 09:00

Sangwin Gawande

7,658
8
48
66

answered Nov 02 '17 at 08:01

Bunyamin Coskuner

8,719
1
28
48

I updated angular cli to 1.5.0 but its creating above config in package.json – Sangwin Gawande Nov 02 '17 at 08:13
I haven't tried it myself but in the article they say it creates v5 by default. https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced#148d – Bunyamin Coskuner Nov 02 '17 at 08:15
I have tried it angular-cli v1.5 and it created project with v5. Make sure you have installed latest version of angular-cli. Run `npm uninstall -g @angular/cli` first and then install it again. – Bunyamin Coskuner Nov 02 '17 at 10:31
I have seen your config. That is indeed weird, however as I said it before it worked perfectly fine for me. There may be a bug with angular-cli (which I doubt). I suggest you try it on a different computer, even preferably without any npm or angular-cli installed. – Bunyamin Coskuner Nov 02 '17 at 11:20
Yes I did, on different machine with same config its working fine. I tried uninstalling everything and installing it back – Sangwin Gawande Nov 02 '17 at 11:25

score 7 · Answer 4 · answered Mar 07 '18 at 10:03

7

If you want to simply upgrade your angular4 project to angular 5 do the following.

Go to your project directory.
Open a command prompt and run the following commands
npm install -g npm-check-updates
ncu -u

This worked for me.

http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/

answered Mar 07 '18 at 10:03

Jerin Kurian

164
2
9

"simply to angular 5" , hmm, for me this resulted in an update to angular 7. – bvdb Dec 27 '18 at 00:29

score 0 · Answer 5 · edited Jan 18 '18 at 08:47

0

To upgrade your Angular 4 to Angular 5

Open your webpack.config.js

Add the below code inside ContextReplacementPlugin

 /angular(\\|\/)core(\\|\/)(@angular|esm5)/

edited Jan 18 '18 at 08:47

VTodorov

953
1
8
25

answered Jan 18 '18 at 07:05

user1349544

53
7

score 0 · Answer 6 · answered Aug 29 '18 at 16:36

Elaborating a bit more, this helped me with BOTH the global as the PROJECT LOCAL upgrade.

The exact guide lines are (of course) in https://update.angular.io/.

Global:

$ npm uninstall -g angular-cli (to be sure)
$ npm uninstall -g @angular/cli
$ npm cache clean
$ npm install -g @angular-cli@1
$ ng -v ... this will show you the current CLI version.

Project local:

$ cd to/your/project/folder
$ remove the folder node_modules
$ npm install --save-dev @angular/cli@1
$ npm install

Then:

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

This may be needed (and won't hurt): $npm audit fix

$ npm install typescript@2.4.2 --save-exact

Source:

https://update.angular.io/ will show you the best route.

The major difference is when you still use the 'http' module. You can (or need) to migrate from http to the httpclient module. In most cases, this is quite easy.

How to update / upgrade from Angular 4 to Angular 5+

6 Answers6

Linked

Related