Workflow of Angular

This blog explains the flow that happens to display the angular application in the browser which cannot be seen but can be aware of, in order to get a better understanding of the angular application and to improve debugging.

Hi Partner ! Yeah ! i need you as my partner for a while . Don’t worry ! you don’t want to invest money because we are not going to do any business . But , you will get treasure . Confusing right ?

Let me explain …

No one beleived me when i said it . But i hope you will . I have got a treasure in my Home

{ An Angular Application running in browser }

with the help of my friend who shared me his blog to get it . You can also get it of your own by visiting this blog below :

Angular project setup

I think you have also got your own treasure . right ?

oh Sorry ! I haven’t revealed that why i needed a partner . That’s a different story .

One Fine day , When i was thinking about from where the trasure come from ? ,

{ Consider, how an angular application starts running and is visible in the browser. },

One magical voice said “Wanna know ? Let’s play Treasure Hunt . You will find your answer at the end of the game . ”

{ Consider, that we can get a better understanding of angular application flow to work with ease }.

Believe me it happened . That’s why i need a help from a genius as you . Don’t get shy . I can see the blushes on your cheeks from here . Ha … Ha… Ha…

Let’s trace the clues one by one before your blush goes away .

The first clue that the voice said is ,

“ 1 . angular.json — main ”

So , our first clue is angular.json -main :

1.angular.json -main :

Hey, I have found it. It is the file that consists of all the configurations and references of the application. The build sections denote that the builder should start its execution from here. According to the build section and our clue, the main is referred to main.ts file which is under src.

So , our next clue is main.ts .

2 . main.ts :

We can partition the main.ts file into two sections as below :

#1 environment section :

In this environment section, we only have a simple if condition which executes one method called enableProdMode(). The condition statement is the environment. production where an environment is an object which has production as a property that should have a boolean value ( true or false ) to decide whether to execute the enableProdMode() or not ? To find the value (true or false), we need to refer environment.ts file from the environments folder because the environment is imported from there only.

Here, the production value is false. So, enableProdMode() is not get executed as the condition failed. To verify that, I have given a console message in the else block as below :

Result :

Promisingly , enableProdMode() is not working . Usually, we will throw out anything which is not working from our house. is it? ( Skipping now but we will discuss it in another blog ) .

#2 Platformbrowser section :

b

## platformBrowserDynamic() :

In platformbrowser section , platformBrowserDynamic() is a method that returns a platformRef imported form platformBrowserDynamic folder’s index.d.ts file .

The angular team has described the platform as below :

So, platformbrowserDynamic() is responsible for creating a platform (place)to render our application in the browser.

## bootstrapModule(AppModule) :

The bootstrap module usually generates a module decorator which has browserModule as imports and we can pass our own module as an argument . Then our Module will get loaded and executed.

 ### Simple Example
 ```typescript
 @NgModule({
   imports: [BrowserModule]
 })
 class MyModule {}
 let moduleRef = platformBrowser().bootstrapModule(MyModule);

In our bootstrapModule in main.ts file, we have provided AppModule as an argument that is imported from app.module.ts . Then we have got our next clue.

So , our next clue is App.module.ts :

3. App.module.ts :

The AppModule is bootstrapping the AppComponent which is imported from app.component.ts file. So the AppComponent gets loaded next. We can modify the project’s bootstrap component according to our needs.

So , our next clue is app.component.ts .

4. app.component.ts :

In app.component.ts file , the Component decorator has three important properties with values :

• selector → It has a file as the value that is responsible to utilize this component in another template file as an element.
• templaturl → It has an HTML file as a value that displays the screen.
• styleUrls → It has a CSS file as a value that is used to style the component’s HTML.

So , our next clue is app.component.html .

5. app.component.html :

As we found that app.component.html is responsible for the screen we see in our browser.

In our HTML, we do not use proper standard code like the below which is very basic to obtain a webpage in a browser.

<html>
...
</html>

Where have they gone? So if we inspect the page, we should see the exact HTML code we provided in app.component.html. Am I right? Let’s check.

Now, we can get clarification because Here we got the proper structure of HTML and the <app-root></app-root> selector is used as an element to get the app component.

The javascript files available below the root element {runtime.js, polyfile.js, … etc } are responsible to make our application a single page and they are handled by the browser itself. But, the Html code should be available in our application itself.

Hey partner i heared your voice . you are saying

“ index.html ” right ? Let’s hope for the best .

So , Our next clue is index.html .

6. index.html :

Yeah! it is available in our src folder. This is the main placeholder of our whole application. But we access dynamic modules and components by attaching them with our AppModule. But, however, the browser only knows the single index.html other modules are handled by scripts that are available in browser.

Finally , we have won the game . As the mysterious voice said , i have found my answer .

{ consider understanding on application flow happens behind the scenes}

Partner , thank you for helping me in this game . Without you it is not possible . You have proved that you are a genius . I just wanna offer you my treasure too .

……………. Always imagine yourself wearing this crown! ………………