Bootstrapping in Angular
In Angular, bootstrapping refers to the process of initializing and running an Angular application. It involves loading the root module of the application which mostly is app.module.ts and then compiling and launching the component tree.
In other words when an Angular application is started, the Angular framework reads the main.ts file, which contains the bootstrap code, and it loads the specified module (AppModule). The framework then processes the metadata defined in AppModule and initializes the application accordingly. The main file responsible for bootstrapping an Angular application is typically named main.ts or main.js.
When you build an Angular application, the Angular CLI (Command Line Interface) or other build tools generate several files that are included in the index.html file during runtime. Let's go through the files you mentioned:
runtime.js: This file contains the code necessary for bootstrapping and running the Angular application at runtime. It includes the runtime environment and Angular's runtime compiler.polyfills.js: This file contains polyfills, which are code snippets that provide modern functionality on older browsers that may not support certain features. Angular applications often include polyfills to ensure compatibility with a wide range of browsers.styles.js: This file typically includes the styles (CSS) of your Angular application. It contains the compiled styles from your components and global styles.vendor.js: This file contains the code from third-party libraries and dependencies used by your Angular application. It includes the Angular framework itself and any other external modules or libraries.main.js: This is the main entry point of your Angular application. It usually includes the code responsible for bootstrapping the Angular module, setting up the application environment, and initializing the component tree.
In the index.html file, these files are usually included in the following order:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your Angular App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Other head elements and stylesheets -->
</head>
<body>
<!-- The Angular app will be rendered here -->
<app-root></app-root>
<!-- Angular runtime and polyfills -->
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<!-- Styles -->
<script src="styles.js" defer></script>
<script src="scripts.js" defer></script>
<!-- Vendor scripts -->
<script src="vendor.js" type="module"></script>
<!-- Main Angular application -->
<script src="main.js" type="module"></script>
</body>
</html>These files are loaded in a specific order to ensure that the Angular application initializes correctly and has access to all the required dependencies and resources. The defer attribute is often used to make sure the scripts are executed in order after the HTML parsing is complete.
