Speed Up Your Angular Application and Development with Angular CLI and Ahead of Time Compilation

Our Angular app was getting pretty large. In fact, it was slowly becoming a problem as it would take an enormous 8 seconds to compile on Google Chrome before it actually ran. That’s 8 seconds of waiting for every user booting the web app.

Ahead of Time compilation (AoT) can fix that kind of issue (see below). But when trying to add AoT to our custom webpack setup, it would crash the whole build process and we just couldn’t get it to work.

So we took a chance and tried to ditch our Webpack setup for Angular CLI as it has built-in AoT support and more.
There was no going back!

If you want to do it the easy way

“Why wouldn’t you want to do it the easy way? You’ve got to work smarter, lad, not harder.”
― Scrooge McDuck

Angular CLI does everything so that you only have to worry about coding!

Build and serve

The basic stuff. Serve your app for development and build it for production. Angular CLI also provides you with all the options you could imagine so you can get the results you want.

Unit and end-to-end tests

Add your test files and voilà! The CLI uses Karma and Protractor for running your tests and it works out of the box. It’s pretty easy to customize too.

Lint

If you want to make sure your code follows your tslint standards, just run ng lint and Angular CLI will tell you where you failed to respect your coding style guide.

That way you can easily avoid these “you forgot a space/semicolon here” comments in your pull requests. 😁

Generate code

Save precious minutes of development by generating your components, services, routes, and pipes directly from the Terminal.

What if your project has special needs?

I mentioned in my previous article about upgrading from AngularJS to Angular 2+ that when we first tried Angular CLI, we had to dismiss it as it wouldn’t allow us to develop locally the way that we needed.

Then I took another look at the stories page of the Angular CLI documentation and realized everything I needed to do was possible (SCSS, global styles, proxies, autoprefixing, etc.). Check it out! You might be surprised of all the scenarios taken into account.

Stuck with Angular CLI?

Using the Angular CLI or migrating to it doesn’t mean that you’re stuck with it. At any time, if you want to go your way and customize your setup in ways that the CLI does not normally allow, just run ng eject and goodbye! A Webpack configuration file will appear and will allow you to do things your way.

Freedom is always a possibility!

Activate Ahead of Time compilation

When building normally, Angular uses Just in Time compilation. That means for every component used, the Angular compiler needs to process and convert your template and code. This is done by the browser and takes a lot of time.

When building with AoT, you let the Angular compiler process your templates and code in advance so that it doesn’t need to be done by the browser. You end up with a faster application! We went from 8 seconds booting time to a tiny 1 second (even on Internet Explorer 11).

There is a problem with the AoT build option though. On some projects, it will crash. It did with our application, but we managed to make it work. For us, the best way to make it succeed was to use NodeJS version 8.x and run the following:

node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --prod --aot --build-optimizer

The max_old_space_size option tells node to use more memory so it’s less likely to fail (see this GitHub issue for more details). I also used the build-optimizer option as well as the aot option to have the most optimized output.

Be patient as it takes a lot of time (up to 10 minutes for us).

What’s next

Angular CLI evolves with Angular. That means you can trust the CLI to always be on par with the current version of your favorite Javascript framework.

There’s also the ABC effort that aims at using Bazel and Closure Compiler to compile Angular and optimize the build result even more. For further details about the ABC effort you can read the official ABC document or this very interesting post by Alex Eagle.

Finally, if you ever wanted to make your Angular app into a real desktop app, that Angular CLI team wants to make it possible to choose your export target in its 2.0 version. That means you could more easily build your application as an Electron app (right now you have to ng eject away from the CLI).

Make the move

Wether you’re starting a project from scratch of are working on a mature Angular app, I recommend you give the Angular CLI a try. It’s just easier!

If you’re already using Angular CLI and want to give your fellow developers some pointers, leave a comment below! The more the merrier!

Keep coding!