Great question! Let's break this down clearly for you:

Does Angular 5 use Babel as its compiler (for AOT or JIT)? #

Short answer: No, Angular 5 does not use Babel as its core compiler for either AOT (Ahead-of-Time) or JIT (Just-in-Time) modes. Angular has its own dedicated compiler ecosystem that handles both template and code compilation entirely separate from Babel.

Do you need Babel in an Angular 5 app? #

In most cases, you don't need Babel at all for a standard Angular 5 application. Here's why:

• Angular's default tooling (like Angular CLI) relies on the TypeScript compiler (tsc) to transpile TypeScript code to JavaScript. tsc can handle all necessary ES6+/ES5 transpilation out of the box, covering the common use cases that developers might turn to Babel for.
• Angular's own compilation pipeline (for templates and component logic) already handles all the necessary processing to make your app run in target browsers, without needing Babel's help.

That said, there might be edge cases where you'd want to add Babel—for example, if you need to use experimental JavaScript syntax that tsc doesn't support, or if you want to leverage specific Babel plugins. But these scenarios are rare in standard Angular 5 projects.

How Angular 5 handles AOT and JIT compilation internally? #

Let's break down each mode:

JIT Compilation #

• JIT happens at runtime, in the browser. When you run an Angular 5 app in JIT mode (the default for development builds), the @angular/compiler library is included in your app bundle.
• This compiler dynamically parses your component templates, resolves bindings, and compiles both the template and your TypeScript-transpiled JavaScript code into executable instructions that the browser can run. The compilation process happens after the app is loaded, which is why development builds can feel slower to start.

AOT Compilation #

• AOT happens during the build phase, before deployment. For AOT builds, you use Angular's @angular/compiler-cli (often referred to as ngc) tool alongside the TypeScript compiler.
• ngc pre-compiles all your component templates and component logic into static JavaScript files during the build. This means when users load your app, the browser doesn't have to do any compilation work—it just runs the pre-built, optimized code. AOT builds result in faster load times, smaller bundle sizes (since you don't need to include the @angular/compiler in the bundle), and better performance overall.

内容的提问来源于stack exchange，提问作者RK6