SD Tidbits
Published in

SD Tidbits

Serving AOT

Angular

Intertwined red and blue smoke
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!

--

--

--

Brief writings on some nifty Software Development practices, how-tos, and tools. (Background: Photo by Nothing Ahead from Pexels)

Recommended from Medium

https://pin.it/5WlSCDu

Component Composition in React

All About Javascript Array Methods

GraphQL, Apollo Studio, and Cookies

That pesky Safari, fixed-Animation issue

How to launch an Activity from AAR files in Android?

Angular 12 warning about IE11 after update, but why?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
B. Chepkorir

B. Chepkorir

Software Engineer | Software Development Enthusiast

More from Medium

What’s new in ngspot/ngx-errors 3.1.3?

DEPLOY AN ANGULAR UNIVERSAL PROJECT TO AWS ELASTIC BEANSTALK

Understanding Dragula.js (Drag-n-Drop library) events