What Is the Angular Compiler?
The Angular
compiler converts our applications code (HTML
and TypeScript)
into JavaScript code before browser
downloads and runs that code.
The @NgModule
metadata plays an important role in guiding the compilation process and also tells
the compiler what components to compile for this module and how to link this
module with other modules.
The Angular offers two ways to compile our
application code-
1. Just-in-Time
(JIT) - JIT compiles our app in the
browser at runtime (compiles before running).
2. Ahead-of-Time
(AOT) - AOT compiles our app at
build-time (compiles while running).
The JIT
compilation is the default when we run the build
or serve CLI commands -
ng build
ng serve
The AOT
compilation, we append the --aot flags
to build or serve CLI commands -
ng build --aot
ng serve --aot
Why we need Compilation in Angular?
We need compilation for achieving a higher level of
efficiency, performance improvements, faster rendering and also sometimes detect
template errors earlier in our Angular applications.
Why Compile with AOT?
1. Faster
Rendering
2. Asynchronous
Requests
3. Detect
template errors earlier
4. Smaller
Angular frameworks download size
5. Better
Security
What Is the difference between JIT compiler and AOT compiler?
JIT
(Just-in-Time) -
1. JIT
compiles our app in the browser at runtime.
2. Compiles
before running
3. Each
file compiled separately
4. No
need to build after changing our app code and it automatically reflects the
changes in your browser page
5. Highly
secure
6. Very
suitable for local development
AOT
(Ahead-of-Time) -
1. AOT
compiles our app code at build time.
2. Compiles
while running
3. Compiled
by the machine itself, via the command line (Faster)
4. All
code compiled together, inlining HTML/CSS in the scripts
5. Highly
secure
6. Very
suitable for production builds
Angular Compiler Class –
class Compiler {
// Compiles the given NgModule and
all of its components
compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T>
//Compiles the given NgModule and all
of its components
compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>>
//creates ComponentFactories for all
components
compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T>
////creates ComponentFactories for
all components
compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>): Promise<ModuleWithComponentFactories<T>>
//Clears all caches.
clearCache(): void
//Clears the cache for the given
component/ngModule.
clearCacheFor(type: Type<any>)
}
I hope you are enjoying with this post! Please
share with you friends. Thank you!!