angularangular-aotangular-jit

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:

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?


Solution

  • 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)

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

    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.