Types of Compilation in Angular

 Angular has two types of compilation.

1. AoT ------ compiles app at build time on the server

2. JIT ------- compiles app in browser at runtime


How can you achieve this in build?


ng build // build only ( JIT compiler is executed default with ng build )

***                    ng build // automatically run JIT compilation for build only

***               ng serve  // automatically run JIT compilation for build and serve locally.


*** ng serve --prod  // automatically run AoT compilation

                                *** Production mode has configured within angular.json file with Ahead of Time compilation.


                 ***************   Forcefully AoT Compilation ***************************

we need to include the --aot option with the ng build or ng serve command.

                  ng build --aot      // develop build with ahead of time compilation forcefully

                 ng serve --aot  // develop build and serve locally with ahead of time compilation forcefully


************************   AoT  Benefits *****************************************

            AoT helpful to reduce bundle size for faster rendering.


ByDefault Angular used Client Side Rendering, 

                         We can use Server Side Rendering by using Angular Universal. 


ng add @nguniversal/express-engine

npm run dev:ssr



Comments

Post a Comment

Popular posts from this blog

Become a Expert + Secret of Success -- ii

Image
 Do you want to become success? Excuses  takes you towards opposite direction of success. Don't Delay, Note down in your diary, what's your Aim,Vision & Mission Aim : ------------      I want to become a full stack developer.  (  after achieving, your can think about new aim)  Vision :------------ My Vision  is to become a leading performer, in providing quality Web and Software Development solutions in the competitive global marketplace.  Mission :------   To develop the solution for real life and business problems. ( as a software Developer this is your Mission ) Learn Java
Read more

Change Detection

Change Detection is the mechanism by which the Angular framework synchronizes the state of an application's UI with the state of the data.     The change detector checks the current state of the data model whenever it runs. then change detector   maintains the  current state of the data model  as the previous state to compare on the next iteration. Thank you ! next we will discuss the Implementation of Change Detection
Read more

without writing media queries How to make responsive component

  Follow these steps to implement a responsive design with Angular: go to main refrence use the Angular BreakpointObserver to detect the size of the current device set member variables in your component that allow you to show or hide certain elements depending on the screen size Set responsive CSS classes in your component like  is-phone-portrait  depending on the screen size Use these special classes to make the CSS of your component responsive without writing media queries In this post, we will cover the following topics: The BreakpointObserver Service Using layout-related flags to show or hide responsive elements Writing CSS that only applies to certain screen sizes (without media queries) Summary  let's get started learning everything that we need to know for making your Angular application responsive! The BreakpointObserver Service @ Component ( ) export class ResponsiveComponent implements OnInit { constructor ( private responsive : BreakpointObser...
Read more