Staying on top of the technology stack is sometimes really hard. The Angular core team tries to do it’s best to keep breaking changes as seldom as possible. Due to the fact that Angular 2 is still in beta, breaking changes may happen. I was facing some issues while catching up latest betas. If you’re also facing TS2304 while transpiling your app, this article may help.

After pulling a remote branch from git this morning, I tried to start a simple Angular 2 project by invoking our Gulp.JS tasks. But suddenly the script crashed and printed tons of errors from the TypeScript Compiler (short TSC). After some short discussion, I decided to dig deeper into the issue and tried to fix the issue and understand why this has happened.

As always, everything worked perfectly before switching the branches (where each branch has exactly the same dependencies and gulp scripts).

So this post is exactly what you’re looking for if TSC keeps driving you crazy with TS2304

TSC Errors with beta6

The solution for this error is quiet easy, but let’s first look at what actually happened and why you have to care about this also if you’re using earlier beta releases of Angular 2.

Angular 2 is using SemVer to specify their package versions. That said, you will run into the same issue when using older Angular 2 versions if you specify your Angular dependency using "angular2": "^2.0.0-beta.3" for example.

In this case npm will pull latest compatible version which is beta6 instead of beta3, so you could either lock the specific version using "angular2": "2.0.0-beta.3" (which means you’ll still use the older, outdated beta3 or you follow the instructions written down in Angular2’s change log.

What are those breaking changes

According to Angular’s change log, only those projects targeting es5 were affected. Transitive typings are no longer included in the distribution package of Angular 2. So you’ve to specify the typings manually.

In order to get your TypeScript compilation working again, you’ve to explicitly reference the typings.

A good place to add this reference is your global boot.ts file. Imagine your project structure is something like

node_modules/
src/
src/app/
src/app/boot.ts

Add the following reference to your boot.ts

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>

Save the changes and start either your Gulp.JS build or plain tsc again. Now your app should compile again as expected. I hope that works for you and you saved some time for developing instead of fighting this issue.