Check out myAngular article series with live demos and Facebook group Angular - Advanced Topics

Angular AoT In Watch Mode

Torgeir "Tor" Helgevold
- JavaScript Developer and Blogger
Published: Thu Sep 07 2017

One of the really cool things in Angular 5 is watch mode for the ngc (AoT) compiler. In this post I will look at how this works.

Prior to Angular 5 (currently in beta), AoT has been too slow to be practical during development. As a result you are forced to run a parallel JiT build for development.

In addition to extra build code, you also have to support two different bootstrapping methods.

In Angular 5 you will be able to ditch JiT altogether, and go full AoT, even for development builds.

To test it out I gave it a try in my demo project. So far, compilation performance seems pretty good.

Ngc is now essentially a drop-in replacement for tsc. All you have to do is add the -w flag to enable file watching.

You will also be able to remove the JiT specific bootstrapping code. Instead you use regular AoT bootstrapping for all your builds.

There are a few tweaks to the configuration that you have to be aware of.

The ngc compiler will no longer output typescript ngfactory files to “genDir”. These files are now kept in memory, and only outputted as JavaScript files. The files are written to the outDir specified in tsconfig.json.

I really like this change since it greatly reduces the number of generated files. I suspect it also helps with compilation performance.

Bundling

It’s up to you if you want to feed the compiled files into a bundler like Webpack during development. In my demo I decided to just serve the “dev build” using systemjs. You should be able to convert your existing systemjs build by just changing tsc to ngc.

During development I still transpile to commonJS, not ES2015, since ES2015 import statements are generally not supported by browsers.

With this setup you end up with two tsconfig.json files (dev vs prod), but you can avoid this if you add a bundler like Webpack.

If you liked this article, share it with your friends on social media:

We also have a new Facebook group about advanced Angular topics.

I invite you to follow me on twitter