How does an Angular App works in a web browser?
In this post we are going to see how an angular app works in a web browser. For the most part of my career i have worked on dotnet mvc applications where all the heavy lifting of generating UI components is done on the web server and we have web.config file as the starting point of the application. The config file is read by the server and relevant modules are loaded and the pages are served based on the requests made at the client side while the app is running on the server. But Angular is a front end framework where all the heavy lifting of presenting the data is done in the browser. An angular application has just one index.html that gets loaded into the browser initally and all other rendering is done within the index.html file. When i created my first angular app using ng new sample-app and noticed a bunch of files getting generated by the angular cli and the default Angular Page getting opened after hitting http://localhost:4200/ in the web browser, I was curious to know about the entry point of the application and after looking into the documentation and I got an understanding of how the bootstrapping works behind the scenes.
Structure of the angular application
Let us first understand the structure of the application and the files present in our default app created by the angular CLI.
As you can see that there is a src folder and few files outside of the src folder. The src folder contains the source code of our application and we will be looking into it later in this post. The main files outside the src folder are -
- angular.json
- package.json
- tsconfig.json
- tsconfig.app.json
These files are called the workspace configuration files. These files contains the details of the projects in the workspace and all the configuration details of each the project. A project in a workspace can either be an application or a library.
The package.json file contains the details of the project name , version , scripts , dependencies etc...
The tsconfig.json contains the generic typescript configuration for compilation of the typescript to javascript since browser only understands JavaScript and all the typescript files has to be transpiled to JavaScript.
The tsconfig.app.json also contains the compilation options for typescript to JavaScript but this file is an extension to the main tsconfig.json and contains the app level configuration.
Now comes the most important file which is angular.json. This is the file that contains configurations for all the projects in a workspace i.e all the application and libraries in the workspace.
The Angular CLI uses the configuration specified in this file for building and serving the project. This file can be used to
configure the different CLI commands like ng build, ng serve, ng test etc...
The build object in the angular.json file contains the options and configuration for production and development build and we can add more configurations to it.
The build option object as per the above screenshot contains details about the output directory of the compiled files, the index html file and the main entry point of the application. As we can see that the path of the index is mentioned as that of the index.html which means when the baseurl of the application is invoked index.html would be loaded first. The angular CLI also generates the minified version of the main.ts and polyfills.ts when the application is built using the ng build command.
The src folder contains all the application level source code file as mentioned below. This folder contains the main app module
and the app component related files.
Building the angular application
An angular app is build using the ng build command and as we have seen above that all the configuration related to the build
process is mentioned in the angular.json file under architects/build in the options and configuration section.
Once the command is executed successfully the dist folder is created in the root directory of the project that contains the AOT compiled
files that would be used to contruct the UI in the browser.
Notice that the main.ts is converted to main.21ba5e7fd0324c1c.js, polyfills.ts is converted to polyfills.2c45437652ec4fc0.js,
styles.css is converted to styles.ef46db3751d8e999.css.
The files names consists the js equivalent of the .ts files appended with a hashcode because of the "outputHashing": "all"
in the angular.json. Anything that happens in the build process is all linked to the configuration specified by angular.json
or the default configurations in angular.
The main.js files is the entry point of the application and if you search index.html inside main.js you will find the reference of index.html in it which indicates that the index.html is the only single page that gets loaded in the application. This script files contains the code for all the modules,components,directive,pipe etc... used in our application. This is the reason why the size of this file keeps on increasing as we keep adding new modules,component etc... to our application. For optimization purpose we use lazy loading to split the code of different modules that created chunks of the javascript file which gets loaded based on the module invoked by a particular rounting. This feature is called lazy loading and it reduces the initial load time of the script while bootstrapping the application.
The polyfill.js contains the code for browser compatibility since angular uses the new features which may not be supported by all browser. Basically it is doing the job of filling the functionalities not supported. If you want to know about polyfill you can go through the following article Pollyfills.
The runtime.js is the file that contains webpack utilites to load other files.
The styles.css files contains all the styles that we have declared in the styles array of our angular.json file.
These core javascript files that are there are all referenced in the index.html generated in the build process.
This build process which we just saw is called the AOT (Ahead of Time Compilation) process since all the scripts files are generated and referenced in the index.html file even before the application is loaded. However if you try viewing the source code of the index.html in the src folder it does not contain any script references but when the app is run by using ng serve the scripts are injected at runtime by the angular framework which can be seen in the view source of the developer console of the browser. This process is called the JIT (Just In Time) compilation process.
I hope I am able to explain you the basic idea of how an angular application works in the web browser. If you want to go deeper you can go through the offical angular docs that contains the complete documentation of the angular framework. Angular Framework
If you are interested to know the working of a React App in a browser you can refer to my post -
