Angular2 Quicky - Why can't I compile my Angular2 app anymore

Angular2 Quicky - Why can't I compile my Angular2 app anymore

Perhaps are you already using Angular2 for internal testing. Or you and your team decided to start your next big thing in these early days of Angular2 to ensure that your app will rely on latest and greatest web technologies. If so, you may have seen the following issues in the most recent past.

After pulling a remote branch from git this morning, I tried to start a simple Angular2 project by invoking our gulp 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 Angular2.

Angular2 is using SemVer to specify their package versions. That said, you will run into the same issue when using older Angular2 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 Angular2. 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 your gulp script or tsc again. Now your app should compile again as expected.

I hope that works for you and saves you some time. Feel free to share your findings or solutions using the comment area below.

Comments

comments powered by Disqus