How an Angular App Work Behind The Scenes — The Angular Flow

Angular is one of the most popular and widely used single page application development platform backed by none other than Google. Among the many available front-end frameworks and libraries, I believe that Angular is much more systematic when it comes to project structure, separation of business logic from the view etc. and this makes it very convenient to work when the project size is very large.

But with this great framework and great project structure, there’s a complex flow going behind the scenes. To understand the working in a better way and making the debugging of it easier, it is necessary to understand the flow of the angular app when it is in the development mode.

By flow, I mean how the files are called and in which sequence of files the app gets executed when we are developing it. This one question really bothered me a lot but no source provided a clear and complete answer to what I was looking for, and this became a driving factor for me to write at a single place, what all I found. So without any delay, let’s start!

1. ANGULAR.JSON File

ANGULAR.JSON is the file which has various properties and configuration of your Angular project. This is the file which is first referred by the builder to look for all the paths and configurations and to check which is the main file. I have generated an angular hello-world app by the CLI. Inside the angular.json file of this project, under the build section, you can see the options object as follows

"options":{  
    "outputPath":"dist/hello-world",
    "index":"src/index.html",
    "main":"src/main.ts",  // THIS LINE
    "polyfills":"src/polyfills.ts",
    "tsConfig":"src/tsconfig.app.json",
    "assets":[  
       "src/favicon.ico",
       "src/assets"
     ],
    "styles":[  
       "node_modules/bootstrap/dist/css/bootstrap.min.css",
       "src/styles.css"
     ],
    "scripts":[],
    "es5BrowserSupport":true
}

It has a reference to the main.ts file which tells the builder to start the app from there.

2. MAIN.TS

This file acts as the entry point of the application. This entry point is defined in the internals of webpack that is used by Angular to support the modular functionality. The path/name of the main file can be changed but it should also be changed in angular.json file. Main.ts helps in creating the browser environment for the application to run. This is done by:

import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

After this, main.ts file calls the function bootstrapModule(AppModule) which tells the builder to bootstrap the app.

platformBrowserDynamic().bootstrapModule(AppModule)

3. APP.MODULE.TS

From the main.ts file, it is very clear that we are bootstrapping the app with AppModule. This AppModule is defined in APP.MODULE.TS file which is found in

<project_directory>/src/app/app.module.ts

This is the module, created with the @NgModule decorator, which has declarations of all the components we are creating within the app module so that angular is aware of them. Here, we also have imports array where we can import other modules and use in our app. Below is an example of app.module.ts file with a test component declared and two modules imported.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserModule,
      FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

4. APP.COMPONENT.TS

From the app.module.ts file above, we can clearly see that the module asks to bootstrap the app component. This app component is in app.component.ts file. This is the file which interacts with the html of the webpage and serves it with the data. The component is made by using @Component decorator which is imported from @angular/core. The component has a selector, which is like a custom html tag which we can use to call that component. It then has template or templateUrl which contains the html of the page to be displayed. It also has the styleUrls array where component specific style sheets can be placed. This is how a component file looks

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'hello-world';
}

See as I told, things are very systematic and properly structured in angular and this is why I love Angular.

By this time, compiler has all the details about the components of the app and now they are ready to be used.

5. INDEX.HTML

Now, since angular is well aware of the modules, components, styles, scripts etc. which are required to display the page, it’s show time!

Here, the index.html file is called. It is found in the src folder of the app. Compiler dynamically adds all the javascript files at the end of this file. Since all the components are now known, the html file calls the root component that is app-root. The root component is defined in app.components.ts which targets app.component.html. This is how index.html file looks like in the coding environment:

<!doctype html>
 <html lang="en">
    <head>
       <meta charset="utf-8">
       <title>My Hello World App!</title>
       <base href="/">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
       <app-root></app-root>
    </body>
 </html>

When this angular app is served and opened in the browser, the scripts injection is done by the compiler and this is how the file looks like to the browser:

<!doctype html>
 <html lang="en">
    <head>
       <meta charset="utf-8">
       <title>My Hello World App!</title>
       <base href="/">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
       <app-root></app-root>
       <script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="es2015-polyfills.js" nomodule></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script>
    </body>
 </html>

In the body tag, you can see that a html like element <app-root></app-root> is present. Well, this is our component selector for the AppComponent which is defined in app.component.ts file. It asks angular to load that component.

6. APP.COMPONENT.HTML

This is the file which contains all the html elements and their binding which are to be displayed when the app loads. Contents of this file are the first things to be displayed.

Conclusion — we are now in the end game

I’m pretty sure that you have now gotten the idea how the app-flow works in angular. This article is based on the research I have done from various sources and there might be a possibility that I may have missed some points and in such a case, it would be great if you can add those in the comments to give an even better understanding for everyone. Thanks!