Angular 2

I was recently working on getting Angular 2 up and running in a new project and hit some issues getting typescript to compile. I had been using beta 3 on samples for this blog.  The issues I was having are with typescript trying to build and resulting in multiple TS2304 errors similar to “Build: Cannot find name ‘x'”.

I am going to go over the update process first and then the fix for the typescript build issue.

Upgrade

In the dependencies section of the project’s package.json file the following versions need to be updated to the versions listed.

"dependencies": {
  "angular2": "2.0.0-beta.7",
  "systemjs": "0.19.22",
  "es6-promise": "^3.1.2",
  "es6-shim": "^0.33.4",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.2",
  "zone.js": "0.5.15"
}

Not a lot of changes, but this is also the point that the build typescript build errors kick in. This reference application I found from Dan Wahlin was a huge help it tracking down what the issue was.

Fixing TS2304 Errors

The errors I was getting related mostly to promise and map which turns out to be related to es6-shim. Turns out this issues can be fixed by adding a typings references for es6-shim.

In package.json add a reference to typings in the devDependencies section. Here is an example from my project.

"devDependencies": {
  "es6-module-loader": "^0.17.8",
  "gulp": "3.8.11",
  "gulp-concat": "2.5.2",
  "gulp-cssmin": "0.1.7",
  "gulp-uglify": "1.2.0",
  "rimraf": "2.2.8",
  "jspm": "0.16.15",
  "typings": "^0.6.8"
}

Next from a console run typings init  to get typings setup for the project. This adds a typings.json file. If you are already using typing this step can be skipped. If you were previously using TSD then make sure to check out the typings upgrade command handle converting your project to the new format.

Now the typing for es6-shim can be installed by running typings install es6-shim –ambient –save in the console.

Finally add two new lines to the exclude section of the tsconfig.json file for main and main.d.ts. This prevents duplicate identifier errors.

"exclude": [
  "node_modules",
  "typings/main",
  "typings/main.d.ts"
]

After the above changes the project is now running on beta 7 of Angular 2. I updated the reference application on GitHub with the changed from this post and which can be found here.

If you hit any issues during your upgrade to beta 7 please leave a comment.