Blog Archives

Upgrading from Angular 2 RC5 to RC7 – watch out for required NPM version

I skipped RC6 and made the jump straight from RC5 to RC7.

First step was to upgrade the versions of my dependencies (both the “dependencies” and “devDependencies”) in the package.json file. To get the magic recipe of what versions of each dependency were needed I referred back to the QuickStart guide on the Angular.io website.

{
"name": "myapp",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.7",
"@angular/compiler": "2.0.0-rc.7",
"@angular/compiler-cli": "0.6.1",
"@angular/core": "2.0.0-rc.7",
"@angular/forms": "2.0.0-rc.7",
"@angular/http": "2.0.0-rc.7",
"@angular/platform-browser": "2.0.0-rc.7",
"@angular/platform-browser-dynamic": "2.0.0-rc.7",
"@angular/router": "3.0.0-rc.3",
"@angular/upgrade": "2.0.0-rc.7",
"systemjs": "0.19.27",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.21",
"angular2-in-memory-web-api": "0.0.19",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"gulp": "3.9.1",
"lite-server": "^2.2.2",
"typescript": "^1.8.10",
"typings": "^1.3.2"
}
}

Running npm install with the upgraded dependencies was failing for me with the following error:

npm ERR! argv "c:\\Program Files (x86)\\nodejs\\node.exe" "c:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v4.4.3
npm ERR! npm v2.15.1
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package typescript@1.8.10 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer @angular/compiler-cli@0.6.1 wants typescript@^2.0.2
npm ERR! Please include the following file with any support request:
npm ERR! C:\Projects\….\npm-debug.log

From the Angular.io documentation https://angular.io/docs/ts/latest/guide/npm-packages.html it states than you must have node 4.x.x or higher, and npm 3.x.x or higher.

You can see from the error message above that I have node v4.4.3 (good) and npm v2.15.1 (bad).

So my fix was to upgrade npm to at least v3. I followed this information in this thread to upgrade npm to the latest available version by:

Opening cmd.exe as administrator
Navigating to C:\Program Files (x86)\nodejs
Running this command: npm install npm@latest

Running an npm install on the project now works after upgrading npm to v3.10.7. I now a warnings relating to some peer dependencies instead of the failures.

npm WARN optional Skipping failed optional dependency /lite-server/browser-sync/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.14
npm WARN optional Skipping failed optional dependency /karma/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.14
npm WARN @angular/compiler-cli@0.6.1 requires a peer of typescript@^2.0.2 but none was installed.

Advertisements

Day zero resources for upgrading from Angular 2 RC4 to RC5

Angular 2 RC5 is now available!

For those looking to get their hands dirty from day 1, I’ve compiled some links of resources that are already available that helped me along the way.

 

What’s New

NgModule

The biggest change is the new NgModule which will impact the bootstrapping of your application and the way components reference directives and pipes.

https://angular.io/docs/ts/latest/guide/ngmodule.html

 

RC5 Changelog

https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc5-2016-08-09

 

Ahead of Time (AoT) Compiler

A more detailed look at the offline (AoT) compiler, lazy loading and other changes in RC5

http://angularjs.blogspot.com.au/2016/08/angular-2-rc5-ngmodules-lazy-loading.html

 

How to Upgrade

RC4 to RC5 Migration steps

https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

 

Update Dependencies

A quick way to update your dependencies from RC4 to RC5 is to take a look at the Angular.io sites’ Quick Start project which has already been updated to use RC5. Change your to be the same, run npm install and you are away.

https://angular.io/docs/ts/latest/quickstart.html

clip_image001

 

Follow the Examples

All of the Plunker examples from Angular.io website documentation seem to have been updated to use RC5 and show the new patterns and serve as good examples of how you should be doing things the RC5 way. For example, there have been some changes in routing which can be seen in this Plunker:

https://angular.io/resources/live-examples/toh-5/ts/plnkr.html

%d bloggers like this: