Angular JIT: Runtime Template Compilation
Angular JIT ships the compiler to the browser and builds components on the fly. It speeds up development rebuilds but pushes compilation cost to runtime. The footgun is deploying it to production, bloating bundles and hiding template errors until runtime.
WHY IT EXISTS: Angular components are written with templates that contain custom syntax such as structural directives and property bindings. These templates are not valid JavaScript and cannot execute directly in a browser. Before the browser can render a component, something must transform that template into executable instructions. JIT compilation exists to perform this transformation inside the browser rather than on the build machine.
THE MENTAL MODEL: Think of JIT as bringing a furniture factory to the customer's house instead of delivering assembled chairs. The browser receives raw blueprints, the Angular compiler, and a set of instructions. On every application bootstrap, the factory runs and assembles the components from those blueprints. This means the browser does the work that a build server could have done earlier.
HOW IT WORKS: When you build an Angular application with JIT enabled, the build process skips template compilation. The emitted bundle contains the uncompiled component templates along with the Angular compiler itself. At runtime, the browser loads this compiler, which parses each template string, checks bindings against component classes, and generates executable render functions. These functions are then used by Angular's change detection to update the DOM. Because compilation happens on the client, template errors such as misspelled variables or invalid bindings are only caught when the code executes in the browser.
WHEN TO USE IT: JIT is useful during local development when fast incremental rebuilds matter more than bundle size. Since the build step does not compile templates, changed files rebuild quickly. It is also necessary for dynamic component scenarios where templates are constructed from runtime data and are therefore unknown at build time, such as rendering user-provided forms or CMS-driven layouts.
WHEN NOT TO USE IT: Do not use JIT for production deployments. Shipping the compiler to users adds significant overhead to the initial bundle and increases startup time. It also defers error detection from the build pipeline to the user's session, meaning template mistakes become runtime exceptions rather than build failures. Modern Angular tooling defaults to Ahead-of-Time compilation for production builds precisely to avoid these problems.
ONE CANONICAL EXAMPLE: Running ng serve in older Angular versions or with AOT explicitly disabled uses JIT. The browser downloads the compiler and your raw component metadata. When the application bootstraps, the JIT compiler processes AppComponent's template and produces the factory required to render it. If a template references a property that does not exist on the component class, the build succeeds but the browser throws a runtime error the moment that component initializes.
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.