Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there any advantage of using JIT compilation in Angular in favor of using AOT?

The Angular docs specify several reasons for using AOT compilation in favor of JIT:

  • Faster rendering
  • Fewer asynchronous requests
  • Smaller Angular framework download size
  • Detect template errors earlier
  • Better security

However, when looking for arguments to use JIT I found none. Moreover, after upgrading from Angular 5.2 to Angular 8 I suddenly get a strange error when running a dev build (using JIT). The error is:

ERROR in ./src/app/shared/app-configuration/shared/app-configuration.model.ts 22:16-35
"export 'IMyComponents' was not found in '@mycompany/mypackage'

When running a prod build (using AOT) everything was fine. This surprised me as I never ran into an Angular compilation problem in which the prod build succeeded and the dev build failed.

So my assumption is that JIT is only suitable for development builds (i.e. speed). And adding the --aot flag can be done safely without any problem. Or am I missing something?

like image 407
Wouter van Koppen Avatar asked Mar 03 '23 19:03

Wouter van Koppen


1 Answers

You're right, Angular offers 2 ways to bind your application:

Just-in-Time (JIT), which compiles your app in the browser at runtime. (when you run ng serve)

  • Compiled in the browser
  • Each files compiled separately
  • No need to build after changing your code and before reloading the browser page
  • Suitable for local development

Ahead-of-Time (AOT), which compiles your app at build time. (when you run ng serve --aot=true)

  • Compiled by the machine itself, via the command line (Faster)
  • All code compiled together, inlining HTML/CSS in the scripts
  • No need to deploy the compiler
  • Suitable for production builds

The ng build command with the --prod meta-flag (ng build --prod) compiles with AOT by default.

The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.

As JIT compiles your app at runtime, it can optimize the compilation and only build necessary code. So in development mode, it's common to use JIT to save the time of a full build. The compilation time will be faster using JIT.

AOT optimizes the running speed but the compilation time is longer, thats why it's common to use it in production. AOT will also optimize the size of your application as all files will be compiled before running it.

like image 78
youri Avatar answered May 05 '23 19:05

youri