Index.html Loads First
Web apps need a starting point.
Index.html is usually the first page to load. Let us open the file and find out what it contains. You will find it under the
index.html. Neither you can see a stylesheet file. The body of the files has the following HTML tag.
How do Angular loads ?. To Find out, let us build our application
To run our application, we use the Angular CLI command
ng serve or NPM command
npm start (
npm start command actually translates into
ng serve does build our application but does not save the compiled application to the disk. It saves it in memory and starts the development server.
ng build to build our app. Open the command prompt and run the command. This will build and copy the output files to the
ng build --prod to build and distribute the app for production. For testing/debugging use
ng build. The production build optimizes, minimize and uglify the code.
Now open the
dist and open the
You can see that the compiler included five script files. They are
main. All these files have two versions one is
es5 & the other one
Since the Angular 7, we have new feature called conditional polyfill loading. Now Angular builds two script files, one for es2015 & another for es5. The es2015 (es6) is for modern browser and es5 is older browsers, which do not support the new features of es2015.
nomodule attribute, which tells the modern browser to ignore the script and do not load it. Hence
es5 scripts are not loaded in the modern browsers
runtime.js: Webpack runtime file
polyfills.js – Polyfill scripts for supporting the variety of the latest modern browsers
vendor.js – contains the scripts from the Angular core library and any other 3rd party library.
main.js – code of the application.
The Angular Version 2 generated only three script files ( inline.js, styles.bundle.js & main.bundle.js).
These files are added by the Webpack module loader.
What is Webpack?
The Angular CLI uses Webpack as a module bundler. Webpack needs a lot of configuration options to work correctly. The Angular CLI sets up all these configuration options behind the scene.
So when index.html is loaded, the Angular core libraries, third-party libraries are loaded. Now the angular needs to locate the entry point.
Application Entry point
The entry point of our application is
main.ts. You will find it under the
The Angular finds out the entry point from the configuration file
angular.json. This file is located in the root folder of the project. The relevant part of the
angular.json is shown below
angular-cli.json was the configuration file in Angular 5 and before. It is now
angular.json since the version Angular 6.
main entry under the node projects -> GettingStarted -> architect -> build -> options points towards the
src/main.ts. This file is the entry point of our application.
main.ts Application entry point
The main.ts file is as shown below.
Let us look at the relevant code in detail.
This line imports the module
platformBrowserDynamic from the library
What is platformBrowserDynamic
platformBrowserDynamic is the module, which is responsible for loading the Angular application in the desktop browser.
The Angular Applications can be bootstrapped in many ways and in many platforms. For example, we can load our application in a Desktop Browser or in a mobile device with Ionic or NativeScript.
If you are using the nativescript, then you will be using
nativescript-angular/platform library and will be calling
platformNativeScriptDynamic().bootstrapModule(AppModule). Read more about Angular Nativescript bootstrap process from here
The above line imports
AppModule is the Root Module of the app. The Angular applications are organized as modules. Every application built in Angular must have at least one module. The module, which is loaded first when the application is loaded is called a root module.
platformBrowserDynamic loads the root module by invoking the
bootstrapModule and giving it the reference to our Root module i.e
The angular bootstrapper loads our root module
AppModule is located under the folder
src/app. The code of our Root module is shown below
The root module must have at least one root component. The root component is loaded, when the module is loaded by the Angular.
In our example,
AppComponent is our root component. Hence we import it.
@NgModule class decorator to define a Module and provide metadata about the Modules.
The @NgModule has several metadata properties.
We need to list all the external modules required including other Angular modules, that is used by this Angular Module
The Declarations array contains the list of components, directives, pipes & Services that belong to this Angular Module. We have only one component in our application
The component that angular should load, when this Angular Module loads. The component must be part of this module. We want
AppComponent load when
AppModule loads, hence we list it here.
The Angular reads the bootstrap metadata and loads the
Finally, we arrive at
AppComponent, which is the root component of the
AppModule. The code of our
AppComponent is shown below
The Class AppComponent is decorated with
@Component Class Decorator.
@Component class decorator provides the metadata about the class to the Angular. It has 3 properties in the above code.
This property contains an HTML template, which is going to be displayed in the browser. The template file is
This property specifies the CSS Selector, where our template will be inserted into the HTML. The CSS Selector in our code is
AppComponent defines the template as
app.component.htmland the CSS Selector is
index.html already have the
app-root CSS selector defined
The Angular locates
app-root in our index.html and renders our template between those tags.