DEV Community

Anubhab Mukherjee for This is Angular

Posted on • Updated on

How Angular Application Starts - Behind The $cene story!

Today we will learn the application flow in Angular.
What happens when the application starts.

It would be a theory but again an important one if you want to master Angular.

1️⃣ angular.json

When you open up your angular project you might have noticed a file sitting at the project root - angular.json
Image description
It is a very important file and contains several important configuration information to run the angular application.
A detailed overview I will provide on this very soon.

When the application first starts Angular looks for this file.

So now if you open the file you will find a node called main under
architect -> build -> options , you would see a main node
Image description
Once Angular found the file it starts looking for the main node.
The value of the main node is a file path that Angular is looking for - the main.ts under src folder.

2️⃣ main.ts
This is the main entry point. As an analogy if you have a prior knowledge of C/ C++/ Java you must have seen there also that main is the starting point.
The main.ts file is present under the src folder.
Image description



import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from 
'@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));


Enter fullscreen mode Exit fullscreen mode

platformBrowserDynamic creates the platform. This function is also used to bootstrap the Angular Application. Here we specify the first module that should be loaded when the application starts for the first time - the root module. In other words the bootstrapping module.

3️⃣ app.module.ts
Once angular finds the starting module the app.module.ts (where all the components/ directives/ pipes associated to this module is present and dependency to other module is also present) it looks for the bootstrap option -
Image description
Where the starting component name has been specified - in this case the AppComponent.

By now Angular compiler has all the required information it needs to work.

4️⃣ index.html
Now the index.html is loaded and starts parsing. Once it finds the selector it exactly knows which component to load and the AppComponent is displayed in the screen.

And that's it. This is how the application starts.

Hope you enjoyed reading the post

If you liked it please like ❤️ share 💞 comment 🧡.

Coming up more topics on Angular.
So stay tuned.

I will be tweeting more on Angular JavaScript TypeScript CSS tips and tricks.

So hope to see you there too 😃

Cheers 🍻
Happy Coding

Top comments (11)

Collapse
 
hansschenker profile image
Hans Schenker • Edited

After starting up Angular: What would be the most minimal Module Loading to have the absolute minimal Angular app loaded:

  • no forms module
  • no http module
  • no directives

Would you publish an blog article on that?

Collapse
 
anubhab5 profile image
Anubhab Mukherjee

Hello Hans,
Sure I have added your point in my list. Would definitely write on it!

Thanks
Anubhab

Collapse
 
oliverdjbrown profile image
Oliver Brown

Excellent articule thanks

Collapse
 
anubhab5 profile image
Anubhab Mukherjee

Glad to know you liked the article!

Collapse
 
oumaymasghayer profile image
Oumayma JavaScript Developer

Very well explained, Thank you.

Collapse
 
anubhab5 profile image
Anubhab Mukherjee

I am very happy to know you liked it.

I also tweet on various technical topics. Hopefully it would be a great asset too.
twitter.com/Anubhab_0905

Collapse
 
shyam1319 profile image
Shyam Lal

Realy help full to beginners thank you very much ...🙏

Collapse
 
anubhab5 profile image
Anubhab Mukherjee

Thank you Shyam. Glad that it was helpful!!!

Collapse
 
hamzalahlou profile image
Hamza Lahlou

The start up process start when deploying the application or when the application get the first request? In what context Angular start looking for the angular.json?

Collapse
 
poddarkhushbu07 profile image
khush

I have a query here.
Is this the process when angular server is started locally or this process happens when a page is requested on a live server?

Collapse
 
anubhab5 profile image
Anubhab Mukherjee

hello khush,
When an angular app is deployed only HTML, CSS and JS files are pushed to the server for deployment (few others too like images)
dev-to-uploads.s3.amazonaws.com/up...
So this is more of a dev side process.
Please let me know if this clarifies, would be happy to help!