How I Use Angular 2 with Webpack: Node Modules and NPM Scripts

Reading time: 4 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 what Node modules to install and how to set up the NPM package.json file.

Setting Up the package.json File

As you may already know, NPM uses the package.json file to keep track of projects your project depends on. It’s divided up into production dependencies and development dependencies. You can enter the dependencies by hand in the package.json or use the command-line utility to add them. I opt for the command-line utility because I think it’s easier to let NPM handle it for me.

To start, I always just do a forced NPM initialized, to generate a bare-bones package.json:

NOTE: After a co-worker brought it to my attention, I’ve updated the order of installs and been more explicit so that the installs happen with minimal warnings and errors that occur when using NPM version 3 or later.

Development Dependencies

The development dependencies–and there are quite a few–fall into three main groups:

  • Karma: the test runner and any dependencies it uses
  • TypeScript: the TypeScript compiler & the Typings utility
  • Webpack: our module-loading library and any dependencies it uses

To install them I usually run a single install command, but here I’ll break them down into their two groups and highlight what each does.

TypeScript Dependencies

This command will install the TypeScript compiler and Typings manager as local dependencies. Both of these can also be installed globally (using the -g flag) but I like having them local so that I can be more assured that my project can build on any system with Node & NPM on it.

Webpack Dependencies

Webpack is obviously needed and also has a plugin system which allows processing on files to be done per filetype.

There’s only a single plugin that I use. It allows me to inject scripts into the index.html file after they are packaged up. I’ve found this to be a super handy tool. My HTML file is now very minimal, as you can see in the post on Webpack configuration.

Another of these plugins are “loaders” which will convert files, specified by extension, before they’re packaged up. I use one for loading HTML files (index.html and Angular 2 templates) and the first stage of SASS processing–this is the raw-loader. The second stage of SASS processing uses the sass-loader (we also install node-sass which is a dependency of sass-loader).

For TypeScript I use two loaders, the first is the tslint-loader which runs the files through the TypeScript linter as part of the “pre-loading” process. The second is the actual TypeScript loader, ts-loader, processes TypeScript files through the TypeScript compiler.

The last item on the above list is the Webpack Development Server, which is a server so that, as you develop, you can see your site in a browser.

Testing Dependencies

Karma, which runs the tests you’ll write, has a plugin system that makes using it and running tests a breeze. Karma comes with a command to create the configuration file for you (which we’ll do after installing all dependencies). During that process,  you can specify the testing framework, where to look for files, and plugins to launch different browsers for testing.

One of those launchers–the one for PhantomJS–has a version 2 that works better with modern development (namely, there are some APIs missing from PhantomJS 1). So I add the version 2 plugin during the install command (karma-phantomjs2-launcher).

There are also two pre-processors needed to run Webpack before running the tests (karma-webpack) and create source-maps while the tests are being run (karma-sourcemap-loader).

Main Dependencies

There are a set of dependencies needed when running in the browser. These can all be installed, however, with a single command:

Angular 2 depends on five other libraries, which are called out above. They are:

  • es6-promise: provides a shim for the new Promise API
  • es6-shim: provides a bunch of shims for newer APIs
  • reflect-metadata: allows ES7 decorators to be used today
  • rxjs: provides the Observables Angular 2 requires
  • zone.js: provides advanced change detection; this is a standalone library by the Angular team

This Is Going to Warn You

The install is going to throw up warnings the first time and whine about the versions of reflect-metadata and rxjs. Something like (the following is for Angular 2 beta 17):

The Angular team seems team to know about it, but it hasn’t been fixed. eta.6 but none was installed. You’ll need to install reflect-metadata and rxjs with specific versions, for instance:

NPM Scripts

I’ve recently become a big fan of using NPM as the vehicle for my build system. As such, I’ve begun utilizing the run system to execute any tasks. The run module looks at keys of the scripts section of package.json and executes whatever command the value associated with that key.

Since I’ve only been using this in a non-production system, I don’t have a real “build” script (at this point). But the scripts I’ve been using so far are:

  • build
    • purpose build the application
    • command: npm run test && webpack --config webpack/webpack.prod.js
  • lint
    • purpose: test the code for style errors in code style and patterns
    • command: tslint ./src/**/*.ts
  • start
    • purpose: run the development server
    • command: webpack-dev-server --config webpack/webpack.dev.js
  • test
    • purpose: unit test the code
    • command: karma start src/test/karma/karma.conf.js

Like I said, this is nothing production-ready yet, but it gives a good starting point to start developing. Each of these commands needs a configuration (such as karma.conf.js or webpack.dev.js) which will be described later in their individual posts.

That’s it for Now!

In future posts, I’ll show how all of these will be loaded up via Webpack. As for the next post, though, I’ll look at how to install a few TypeScript definitions that are needed for compilation.

1 Comment

Leave a Comment

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