Update to Angular 5

Question

How to update to Angular 5? This is from my package.json:

"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",
    "@types/jwt-decode": "^2.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "jwt-decode": "^2.2.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "1.4.0-rc.2",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.31",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "sw-precache": "^5.2.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
}

When I run npm install I get this error

npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" npm ERR! node v6.11.2 npm ERR! npm v3.10.10 npm ERR! code ETARGET

npm ERR! notarget No compatible version found: @angular/common@5.0.0 npm ERR! notarget Valid install targets: npm ERR! notarget 5.0.0-rc.0, 5.0.0-beta.7, 5.0.0-beta.6, 5.0.0-beta.5, 5.0.0-beta.4, 5.0.0-beta.3, 5.0.0-beta.2, 5.0.0-beta.1, 5.0.0-beta.0, 4.4.4, 4.4.3, 4.4.2, 4.4.1, 4.4.0-RC.0, 4.3.6, 4.3.5, 4.3.4, 4.3.3, 4.3.2, 4.3.1, 4.3.0, 4.3.0-rc.0, 4.3.0-beta.1, 4.3.0-beta.0, 4.2.6, 4.2.5, 4.2.4, 4.2.3, 4.2.2, 4.2.1, 4.2.0, 4.2. 0-rc.2, 4.2.0-rc.1, 4.2.0-rc.0, 4.2.0-beta.1, 4.2.0-beta.0, 4.1.3, 4.1.2, 4.1.1, 4.1.0, 4.1.0-rc.0, 4.1.0-beta.1, 4.1.0-beta.0, 4.0.3, 4.0.2, 4.0.1, 4.0.0, 4.0.0- rc.6, 4.0.0-rc.5, 4.0.0-rc.4, 4.0.0-rc.3, 4.0.0-rc.2, 4.0.0-rc.1, 4.0.0-rc.0, 4.0.0-beta.8, 4.0.0-beta.7, 4.0.0-beta.6, 4.0.0-beta.5, 4.0.0-beta.4, 4.0.0-beta.3, 4.0.0-beta.2, 4.0.0-beta.1, 4.0.0-beta.0, 2.4.10, 2.4.9, 2.4.8, 2.4.7, 2.4.6, 2.4.5, 2.4.4, 2.4.3, 2.4.2, 2.4.1, 2.4.0, 2.3.1, 2.3.0, 2.3.0-rc.0, 2.3.0-beta.1, 2. 3.0-beta.0, 2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.2.0-rc.0, 2.2.0-beta.1, 2.2.0-beta.0, 2.1.2, 2.1.1, 2.1.0, 2.1.0-rc.0, 2.1.0-beta.0, 2.0.2, 2.0.1, 2.0.0, 2.0.0-r c.7, 2.0.0-rc.6, 2.0.0-rc.5, 2.0.0-rc.4, 2.0.0-rc.3, 2.0.0-rc.2, 2.0.0-rc.1, 2.0.0-rc.0, 0.0.0-7, 0.0.0-6, 0.0.0-5, 0.0.0-4, 0.0.0-3, 0.0.0-2, 0.0.0-1, 0.0.0-0 npm ERR! notarget npm ERR! notarget This is most likely not a problem with npm itself. npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist. npm ERR! notarget npm ERR! notarget It was specified as a dependency of 'gizza' npm ERR! notarget

I know Angular 5 is still in beta but I want to test it.

EDIT: Version 5.0.0 now does exist as of Nov. 1st 2017

Don't specify minor versions unless that's really important to you. — BentOnCoding, Sep 29 '17 at 22:46

score 55 · Answer 1 · edited Nov 03 '18 at 20:25

As Now, angular 5 has been released officially on 1st Novemebr 2017, So for those who want to update your old angular applications to angular 5:

1) The Angular team has also put a handy tool to make upgrading from any version to angular 5, as simple as possible.

2) You will have to upgrade all of your angular packages to version 5.0, run the following command:

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 zone.js@^0.8.4 @angular/upgrade@^5.0.0 typescript@2.4.2 rxjs@^5.5.2

3) Angular 5 now also depends on TypeScript 2.4.2 and RxJS 5.5.2, so you’ll have to upgrade those package as well.

npm install typescript@2.4.2 --save-exact

4) If you rely on the date, currency, decimal, or percent pipes, in 5 you will see minor changes to the format. For applications using locales other than en-us you will need to import it and optionally locale_extended_fr from @angular/common/i18n_data/locale_fr and registerLocaleData(local). For more information on pipes breaking changes: https://stackoverflow.com/a/47263949/2810015

5) Use of implements instead of extends with any lifecycle events : Ensure you don't use extends OnInit, or use extends with any lifecycle event. Instead use implements .

6) Switch from HttpModule and the Http service to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (You don't need to map to json anymore and remove any map(res => res.json()) calls, which are no longer needed.) and now supports typed return values and interceptors.

7) The recommended way of importing operators in RxJS 5.5 is from rxjs/operators.

import { map, filter, mergeMap, tap } from 'rxjs/operators';

I have tried to explain more here. https://onlyforcoder.blogspot.in/2017/11/angular-5-upgrade-your-project-To-Angular5.html

Fail for me. I get npm ERR! notarget No matching version found for @angular/compiler@'5.0.0' — AntonK, Nov 20 '17 at 23:17
https://www.npmjs.com/package/@angular/compiler, You can check, @angular/compilerversion 5.0.2 has been released. Try this version to install, IF this also fails for you. try this `npm install https://github.com/angular/angular/tree/master/packages/compiler` — Nimish goel, Nov 21 '17 at 05:42
I can verify that i'm getting the exact error when I run the command from the upgrade tool that Google provided. I don't understand why this happens. When I go to npm view @angular/core versions --json I can see the version exists — Diskdrive, Nov 30 '17 at 03:42
for those getting "No matching version found for" error, you need to remove the ' ' on the version part — Lexy Feito, Nov 30 '17 at 16:27
I have been fighting ( _This version of CLI is only compatible with Angular version 5.0.0 or higher._ ) for days until I did your rather long command above and I am finally able to `ng serve` again. Cannot tell you how much grief you have ended for me. — Aggie Jon of 87, Jun 08 '18 at 08:29

rjustin · Accepted Answer · 2017-11-21T19:28:49.500

EDIT: Version 5.0.0 now does exist as of Nov. 1st 2017

NPM is telling you 5.0.0 doesnt exist. change your package.json to one of the suggested release candidates like 5.0.0-rc.0. There is a good chance they aren't all exactly that either so read the npm error it is actually helpful in this case.

"dependencies": {
    "@angular/animations": "5.0.0-rc.0",
    "@angular/common": "5.0.0-rc.0",
    "@angular/compiler": "5.0.0-rc.0",
    "@angular/core": "5.0.0-rc.0",
    "@angular/forms": "5.0.0-rc.0",
    "@angular/http": "5.0.0-rc.0",
    "@angular/platform-browser": "5.0.0-rc.0",
    "@angular/platform-browser-dynamic": "5.0.0-rc.0",
    "@angular/router": "5.0.0-rc.0",
    "@types/jwt-decode": "^2.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "jwt-decode": "^2.2.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "1.4.0-rc.2",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.31",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "sw-precache": "^5.2.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
}

@Melchia If this answer is sufficient please accept for future users with this issue. — rjustin, Sep 29 '17 at 22:46
Yes I'm just waiting for the 3 minutes to pass so I can accept your answer — Melchia, Sep 29 '17 at 22:46

score 13 · Answer 3 · edited Jun 20 '20 at 09:12

Edit: This is the latest Angular 5 working dependencies:

  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.7",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

Just copy Paste & run npm install

score 3 · Answer 4 · answered Nov 30 '17 at 03:52

I got the same error even when pasting the command from the Angular upgrade guide.

In the end, I just changed the versions to the latest and it worked.

npm install @angular/animations@latest @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 rxjs@latest --save

npm install typescript@2.4.2 --save-exact

I'm unsure why this error is occurring because even when I type in

 npm view @angular/core versions --json

I can see that the version actually exists. My only theory is maybe it's cause I'm on Windows and the Windows version of NPM doesn't like those version numbers...

score 3 · Answer 5 · edited Feb 05 '18 at 07:35

Original Answer by @Vishal Gulati: https://stackoverflow.com/a/47132265/6877180

Quick Overview:

Upgrade Angular with all its packages to the latest version.

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

Upgrade CLI if needed

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

score 2 · Answer 6 · answered Jun 07 '18 at 06:31

2

Here is the command to update Angular CLI in version 5.2.0

npm install @angular/compiler-cli@5.2.0

answered Jun 07 '18 at 06:31

Sheo Dayal Singh

1,591
19
11

score 1 · Answer 7 · answered Sep 29 '17 at 22:43

1

This problem is occur because of npm version In order to work in Angular 5 ;

"node": ">=6.9.5 <7.0.0",
"npm": ">=3.10.7 <4.0.0",
"yarn": ">=1.0.2 <2.0.0"

answered Sep 29 '17 at 22:43

Dr. X

2,890
2
15
37

my npm version is 3.10.10 – Melchia Sep 29 '17 at 22:46
1

In addition, u can read the error to change the version of package.json like @angular/common@5.0.0 npm ERR! notarget Valid install targets: npm ERR! notarget 5.0.0-rc.0, 5.0.0-beta.7. This means that you have to change the version @angular/common@5.0.0 to @angular/common@5.0.0-rc.0 or @angular/common@5.0.0-beta.7 anf goes like in error. – Dr. X Sep 29 '17 at 22:48

score 1 · Answer 8 · answered Nov 08 '17 at 11:10

1

Basically, there’re few important steps to achieve that.

Upgrade Angular CLI to the latest version.
Modify Angular 4 app dependencies and Update the dependencies.

That’s it, this way you can easily upgrade your Angular 4 app to Angular 5, Read more

answered Nov 08 '17 at 11:10

Mohit Tanwani

6,608
2
14
32

Lijo · Answer 9 · 2017-11-19T03:20:44.267

Before updating, rename your template tags to ng-template.

Update all of your dependencies to the latest Angular and the right version of TypeScript. If you are using Windows, you can use:

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

Update to Angular 5

9 Answers9

Edit: This is the latest Angular 5 working dependencies:

Linked