Fast Angular 2 compile cycle with TSC

There are numerous choices for tooling in a TypeScript Angular 2 project. This list is no doubt incomplete:

  • SystemJS with JSPM
  • SystemJS without JSPM
  • Webpack
  • Angular-CLI (which uses System and Broccoli and other things behind the scenes)

At Oasis Digital, we have worked with all of these variations, and experienced trouble at least with all of them but have been around long enough to have trouble with. There is no clear winner yet, there are only trade-offs.

Speed matters. Specifically, speed of the development cycle, of how long it takes to compile/recompile an application and reload it in the browser during development. (I’m less concerned with the speed of a “production build” because those happen much less often and usually without a human actively waiting.)

As of May 2016 (these things change rapidly) we have found the following yields the very fastest results for the development cycle:

  • Bundle libraries using JSPM/System-Bundler or WebPack, or use bundles shipped by the Angular 2 team.
  • Set up tsconfig to use “module”: “system” and “outFile”: “somebundlenamehere.js”. TypeScript both compiles your code, and produces a single-file bundle of the results. This is much faster than having typescript emit numerous files and then bundling them with another tool.
  • Run tsc in your IDE; don’t bother to “watch” from the command line or by other means – better for compile errors to land in the IDE. There is no benefit to simultaneously compiling in your IDE and in a concurrent “watch” – omitting that (for example, by moving away from Webpack) roughly cuts in half the total CPU effort spent on each development cycle.

To demonstrate how little work is typically needed to set this up, see the following tiny “fork” of the “quickstart”. This single commit shows the slightly less configuration needed with the “module”: “system” approach.

Of course, there is no benefit to this change in the quickstart application – the tutorial adds only a handful of components. But we have confirmed the performance lead with other teams developing on Angular 2 “at scale”. This approach is, as of May 2016, the fastest compile-reload cycle for large Angular 2 applications.

It might not last long; there are many efforts underway, including the official angular-cli, to build better development tooling. Moreover, Hot Module Reloading might make speed up the development cycle enough that the clean-reload time isn’t important.

(Cross posted to the Oasis Digital blog.)

Angular 2 alpha 38-or-so error finding Subject.js

Here’s a tip for the intrepid out there who are following the Angular 2 alphas. It has been somewhat harrowing, as alpha software tends to be. Here’s a problem I encountered today, and could not find an obvious answer anywhere on the Internet, therefore this post.

Here’s a critical piece of background, I have been using JSPM to manage dependencies in my Angular 2 work. I am using an alpha package manager with an alpha module loader to load an alpha framework and it’s mostly-alpha dependencies. Realistically it is surprising that it sometimes works at all.

I made the mistake(?) of falling behind a couple of weeks in the alphas – rather than updating one at a time I leapt directly from 37 to 40. With a bit of experimentation I found that breakage occurs starting with Alpha 38, and elaborate error failing to load a file Subject.js.

After reading numerous websites, Angular alpha diffs, and so on, it appears that this is related to the transition recently to “RxNext”, the upcoming next version of reactive extensions.  The new dependency is visible in the top level package.json, for reasons unknown to me JSPM did not notice this and bring it in. Fortunately all of the sulfa software coordinated enough to fix the problem with a single command:

jspm install npm:@reactivex/rxjs

All of the Alpha stuff, that’s just life in your working with software on the edge. The one piece of this thing that I am a bit unhappy with is the name of the package mentioned above. This is the first NPM package I’ve encountered that begins with or otherwise includes a special character. I didn’t even know that was allowable, and I hope it does not become common practice.