An essential step in the Angular framework build process is Angular compilation, which converts the TypeScript and HTML code in your application into browser-friendly JavaScript code.
The compiler in Angular acts as a link between runtime performance and developer experience: An ergonomic, decorator-based API is used by Angular users to author apps, and ngc converts this code into more effective runtime instructions.
Here’s a simplified overview of how Angular compilation works:
TypeScript Compilation:
Angular applications are typically developed using TypeScript, a superset of JavaScript. TypeScript code is transpiled into standard JavaScript using the TypeScript compiler (tsc).
A ts.Program instance represents a program that has to be compiled in the TypeScript compiler. This instance combines the dependencies’ type information, the specific set of compiler parameters to be utilized, and the set of files to be built. It is not easy to identify the set of files and dependencies. Usually, the user designates a single “entrypoint” file (main.ts, for instance), and TypeScript has to search through the imports in that file to find further files that require compilation. These files have more imports, which enlarge to include yet more files, and so forth. A portion of these imports correspond to dependencies, which are references to code that TypeScript’s type system needs to be aware of even though it isn’t being compiled.
Template Compilation:
Template compilation in Angular is a crucial process in which Angular converts your component templates, written in HTML with Angular-specific syntax, such as {{ }} for data binding and *ngFor for loops into executable JavaScript code that can be rendered in the browser. This compilation step is essential to make Angular applications work efficiently.
Metadata Generation:
Decorators such as @Component, @Directive, and @NgModule are used to adorn angular components with metadata. For these components, the Angular compiler generates information that is utilized for a number of things, including dependency injection and component startup.
Tree Shaking:
Tree shaking is a process in which the Angular compiler eliminates unused code and dependencies from your application. This helps reduce the size of the final JavaScript bundles, improving performance.
Ahead-of-Time (AOT) Compilation (Optional):
Angular allows you to perform AOT compilation, which compiles templates and components during the build process rather than at runtime in the browser. This reduces the size of the application and improves load times.
AOT compilation is an alternative to Just-in-Time (JIT) compilation, which is the default compilation method in Angular. AOT compilation involves translating Angular templates and components into highly optimized JavaScript code during the build process, before the application is deployed to the client’s browser.
Bundling and Minification:
Bundling and minification are important optimization techniques in Angular and other web development projects. They help reduce the size of the JavaScript and CSS files used in your application, improving loading times and overall performance.
Bundling: Bundling involves combining multiple JavaScript or CSS files into a single file. This reduces the number of HTTP requests the browser needs to make when loading a web page. In Angular, tools like Webpack and the Angular CLI are commonly used for bundling. You can configure these tools to bundle your application’s JavaScript and CSS files, creating bundles that can be loaded more efficiently.
Minification: Minification is the process of removing unnecessary characters (like whitespace and comments) from JavaScript and CSS files to make them smaller in size. Smaller files are faster to download and execute. Angular CLI provides built-in support for minification during the build process.
Loading in the Browser:
The final bundled and minified code is loaded by the browser, and the Angular application is executed. Angular’s runtime handles component rendering, data binding, and other features.
By following these steps, Angular achieves efficient compilation, making applications smaller, faster, and easier to maintain. This process helps in delivering high-performance web applications.