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.
Hey Eric,
You’re tutorials on using Angular2 have been very helpful but this one has me stumped. I am running into the same TS2304 errors; “Build: Cannot find name ‘Promise’.
When you say, “..from a console run typings init to get typings setup..”, what console are you referring to? Do you have a VS Extension installed? I haven’t been able to get this to work.
Thanks
Command prompt if you are in Windows. Just make sure you are in your project directory.
I feel like you need to be more specific…
‘typings’ is not recognized as an internal or external command,
operable program or batch file.
When you added the typings line to your package.json it should have installed the typings package for you.
Are you using Visual Studio? If not you will have to install the package yourself using “npm install typgings”.