Optimisation Of Build Size And Fast Indexing Of WEB APP using AOT
Posted By : Rohit Goyal | 27-Dec-2017
INTRODUTION:-
AOT Stands for ahead of time compilation. It is used for reduce bundle size and fast indexing of web app. In angular 4 if you are using webpack then vendor.bundle.js & main.bundle.js size comes too large.Which is the major issue in upcoming angular version build.But by using AOT we can optimize build size and indexing which overall increase the site performance in angular 4.
Also AOT will follow proper standards of code. It gives error if proper code standard is not followed. I used AOT to improve code standards and performance in my project. There are several issues will come as we are going through AOT process. You can resolve these issues step by step.I am explaining you AOT step by step process. By following below mention steps you can implement AOT in your app.
At first when i have used AOT for my app it will 1 take almost one day. But if are following below mention steps then you can implement AOT in your in 3-4 hrs. Let's get started :-
Step: 1 :- start or build project with aot
start -
ng-serve --aot
build -
ng-build --aot
Step: 2 :- Keep all your css inside an array.
When you run or build your app using aot. The first error it will give you , that place your all css inside an array.you have to place all your css files path inside an array.It gives the error in specific files and specific lines.You have to do the same in all files.
@Component({ selector: 'user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.css'], // all css inside an array
providers: [AlertService,UserServiceDetails]
})
Step: 3 :- Keep html file path inside template url , otherwise it template will not detected.
Don't use require for templates.otherwise it will not find template path. use only templateUrl to specify the html file path.
@Component({
selector: 'user-profile',
templateUrl: './user-profile.component.html', // give html file path inside templateUrl
styleUrls: ['./user-profile.component.css'],
providers: [AlertService,UserServiceDetails]
})
Step: 4 :- Make all the private variable public.
You can't use private variable if using aot. all the variable should be public.
directorObj:any={};
directorArray:any=[];
directorList:any=[];
directorData:any={};
directorResult:any;
shareholderObj:any={};
shareholderArray:any=[];
shareholderList:any=[];
Don't prefix private keyword, all the variables becomes public.
Step: 5:- Model used in HTML is not declared in a component.
Then the error comes in those files in which model is not declared inside the component.you have to fix by declaring inside the component.
Step: 6:- parameters don't match with a signature call of a target.
Then error will come in those function calls in which the number of parameters not matched at sending & receiving end.Your parameters will be matched at sending & receiving end.
That's it. These are the issue I have faced during the AOT process.I found this very good optimization of an angular build.
Then the error comes in those files in which model is not declared inside the component.you have to fix by declaring inside the component.
Step: 6:- parameters don't match with a signature call of a target.
Then error will come in those function calls in which the number of parameters not matched at sending & receiving end.Your parameters will be matched at sending & receiving end.
That's it. These are the issue I have faced during the AOT process.I found this very good optimization of an angular build.
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rohit Goyal
Rohit is an experienced Frontend Developer, having good experience in HTML5, CSS3, Bootstrap, Jquery, AngularJS, Angular4/5, Restful API Integration, ES6 . His hobbies are playing cards and cricket.