Serving AOT

Angular

Photo by cottonbro from Pexels

You might have run into another “obscure” Angular console error in the browser.

It might even be one of those fancy build errors that calls out something in the core.js file.

Try serving your application with the aot flag. Like so, ng serve --aot.

But wait…there’s more.

While this can help with pin-pointing the precise source of the error. For example, you might have a problem with a Component being referenced in a Template, but the browser error calls out an NgModule instead.

Oddly specific example…but I digress.

It also implies a couple of things about your application and its angular.json. In a nutshell, the angular.json might be missing an "aot": true in the build options.

This could be because:

1. It might be using a pre-Ivy Angular version.
2. It might have been quickly migrated to a post-Ivy Angular version — bypassing the migration guide.

Or, you could just be building or serving without a configuration, that has that nifty flag set, in your CLI command.

Why tho?

You are probably familiar with JIT and AOT compilation differences.

JIT compilation means compilation happens in the browser — after it downloads the code.

AOT means compilation happens before the browser downloads the code.

Browsers don’t directly understand the flavor of JavaScript and HTML — sometimes CSS — that is the stuff of Angular. A bit of translation needs to happen before your application can be rendered in the browser as expected. This is the basics of compilation.

Since Angular 9, AOT compilation has been the default for builds.

Huzzah, for application performance!

References & Further Reading:

Angular

Angular