How I Use Angular 2 with Webpack: TypeScript Compiler

Reading time: 2 minutes

A disclaimer: I’m not claiming to be an expert here and I’m open to any corrections or input from everyone; this is just what’s worked for me so far. Please enjoy!

As I mentioned in the first post of this series, this series looks out how I have been using Angular 2 with Webpack. The topics in the series are:

  1. Directory Structure
  2. Node Modules & NPM Configuration
  3. Typings
  4. Code Linting
  5. TypeScript Configuration
  6. Karma Configuration
  7. Webpack Configuration
  8. Sample Application

In this article we’ll look at how to set up the TypeScript compiler configuration, in the tsconfig.json file.

TypeScript Configuration (tsconfig.json)

Just a disclaimer: this is mostly lifted from the Angular 2 tutorials. The tsconfig.json file I used has two sections compilerOptions and exclude.

The exclude Section

TypeScript configuration files can have a files list, in which you can explicitly state the files that TypeScript should compile. One thing I’m not a big fan of with TypeScript’s tsconfig.json is that it doesn’t support globbing yet. This makes managing larger projects pretty unwieldy. So instead, I use the exclude section, which does the same thing but, instead, tells TypeScript which files and folders it shouldn’t compile.

We don’t want to compile any TypeScript files that live in the node_modules directory and we don’t want it to try to compile–or recognize–any of the TypeScript definition files under the typings/main directory or those referenced by the typings/main.d.ts file since (as mentioned before) they’re just duplicates of what’s in browser.d.ts.

The compilerOptions Section

The compilerOptions section does exactly what it says: it defines the options for the compiler. Once again, this is mostly lifted from the Angular 2 tutorials, but let’s walk through it.

This first two options are used in conjunction with the reflect-metadata dependency to use ES7 decorators in our code (which Angular 2 uses heavily).

This tells TypeScript that we’ll be using the CommonJS style of module referencing in our code and that modules will be resolved in the same way Node resolves modules. We could have picked es2015 but (at this time) you cannot compile to ES5 with that module type set.

This tells the compiler that it should raise errors if no type is specified but, based on the code, it is implied that any type can be used. I like this because it keeps my code explicit when it comes to types. The second line makes it so that implicit index errors don’t arise (we don’t want myArray[i] to complain about implicit any errors). As the Angular 2 docs mention, having this set to false while learning TypeScript is probably a good idea.

I don’t want the TypeScript compiler removing our comments–especially since I only comment to explain why something is (i.e., no “// returns an integer” type comments).

Lastly, we want TypeScript to compile to ES5 code, since, as of now, most browsers aren’t ES6/ES2015-ready and create source maps.

The Final Product

I tend to keep object keys in alphabetical order because that’s how I can best read them, so my final tsconfig.json looks like this:

And That’s It!

Again, this is another straightforward post. I think the simplicity of each part of the configuration by itself highlights how easy this really is, but, when trying to tackle the whole set of configurations it all is a bit foreboding.

In the next post, we’ll delve into the configuration with the Karma configurations! It’s the last stop before setting up Webpack!

2 Comments

    1. Well I’m glad I can help out another person! Thanks for the feedback. Only a couple more steps and you’re there. I’m going to create a github repo with the final product which will be available at the end of the series.

Leave a Comment

Your email address will not be published. Required fields are marked *