Update 10/2017: The Angular team has released their own tutorial on how to get Webpack + Angular working together. This did not exist when the article was originally written. I strongly recommend using that tutorial if you choose to use Angular + TypeScript.
Awhile back I wrote an article on how to get started with Angular 2 and Webpack, but I used ES6/ES7 (ES2015/ES2016) as opposed to TypeScript.
TypeScript seems to be very popular in the Angular 2 community, largely due to the Angular team’s adoption of it and Microsoft’s excellent tooling for it.
In this blog post I’m going to detail the steps to getting started with Angular 2, TypeScript and Webpack. You should be able to add this setup to an existing project (IE: ASP.NET). I used Angular 2 version 2.0.0-beta17 and TypeScript 1.8.10 in this example.
Setting up the environment
First, install node.js. As of this writing, node 6+ will not work. I’ve been sticking with the LTS version (Long Term Support) 4.x branch. Also, be certain to use npm version 3.x or above (you can use npm install -g npm for this, I am using npm v3.8.8 for this example). Once node.js is installed, open a terminal and install webpack and typings globally.
npm install -g webpack typings
Next, navigate to the root of where your web project exists and run the following commands (two commands, the second command is quite long):
npm init
npm install --save-dev webpack angular2 core-js rxjs zone.js awesome-typescript-loader es6-promise es6-promise-loader es6-shim es7-reflect-metadata exports-loader expose-loader imports-loader typescript source-map-loader
Here’s what my package.json devDependencies block ends up looking like:
Configuring the TypeScript Compiler
A special configuration file is needed to enable the options required by Angular2. TypeScript also needs to know where our source files and type definition files live. Create a tsconfig.json file in the root of your web application:
Downloading the Type Definitions using Typings
Downloading individual TypeScript type definition files for every module we intend to use would be tedious. We’ll use the “Typings” TypeScript definition manager to do this for us. First we need to create a configuration file for Typings, then we need to tell Typings to download and install the definitions. Without these type definition files, your TypeScript project will have errors. Create a typings.json file in the root of your web application:
Now that we have the typings configuration, we install and download them by running this command from the root of our web application:
typings install
Configuring Webpack and Scaffolding the App
We’re going to get a basic configuration for webpack that will get us up and running. This is not an in-depth webpack tutorial, so things like optimizations to your build pipeline wont be covered in this article. In short, we’ll tell webpack the entry point / root of our application code in a folder/src/my-app. Create these two folders and a file underneath called “app.ts”. Here’s some sample code to populate app.ts to get you started:
Angular 2 takes advantage of many cutting-edge features that are on the way in ES6 and ES7. We need a few more files to get Angular 2 up and running, to include all of the dependencies needed to enable these features.
Under /src/, create two more files, polyfills.ts and vendor.ts, respectively:
We’ll also tell webpack to generate three files, “my-app.bundle.js”, “polyfills.bundle.js” and “vendor.bundle.js” under the “src” folder. The “polyfill.bundle.js” and “vendor.bundle.js” files are shared between any other Angular 2 applications you might add later, whereas the “my-app.bundle.js” is the bundled up copy of the specific application, sans Angular 2 dependencies.
Next, create a webpack.config.js in the root of your web application:
Referencing the App from Markup
The next thing to do is create the markup needed to bootstrap the Angular 2 application and reference the two script files. The markup will probably look something like this:
Compiling and bundling the app
You’re almost ready to go. The final step is to simply run “webpack” from the command-line in the root folder of your web application. The output should look something like this:
If you got any errors, the first thing to do is double check your dependencies that are installed via npm and your file paths.
Now that the files are generated, you should be able to see your application!
Next steps
There are facilities to watch code built into webpack, and minification and optimization is just a few extra lines of code/dependencies. I’d say the first place to start is the webpack documentation. Another great place to look would be the Angular2 Webpack Starter, which inspired some of the approach in this post.
