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/[email protected] 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

Answer 1

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 [email protected] 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 [email protected] --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

Answer 2

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" }