Back to: Angular Tutorials For Beginners and Professionals
Angular applications do not start magically when you open the browser. A well-defined, carefully designed startup process runs in the background before anything appears on the screen. Understanding this startup flow is crucial for every Angular developer because it explains how Angular loads, configures, and displays your application. In This Chapter, You Will Learn the following pointers:
- How an Angular application starts in the browser.
- Role of index.html as the single host page.
- Why is main.ts the real entry point of Angular?
- Understanding the Angular bootstrapping process.
- Purpose of app.config.ts and global configuration.
- How Angular sets up dependency injection (Root Injector).
- What the Root Component is and why it matters.
- How Angular renders UI inside <app-root>.
- How routing is initialized and works internally.
- Role of <router-outlet> in loading page content.
How does an Angular application start?
An Angular application does not start all at once. It starts in Clearly Defined Phases, where responsibility moves from the browser to compiled JavaScript, to the Angular framework, and finally to our Components. Each step exists for a specific reason, and Angular does not skip or merge these steps. Let us proceed to understand the Angular Application execution process step by step. Think of Angular startup like a handover: Browser → JavaScript → Angular → UI. For a better understanding, please have a look at the following image:
Step 1: Browser Loads index.html
The very first thing that happens is handled entirely by the Browser, not Angular. When the user opens your application URL, the browser requests and loads the index.html file. At this point, Angular has Not Started Yet. The browser simply parses the HTML, builds the initial DOM, and prepares to load JavaScript files from the server.
Key Points
- Controlled entirely by the browser
- Angular is not running yet
- No application logic is executed
- <app-root> is just an empty HTML element
Layman Example: Entering the Mall Building
- When you go to a shopping mall, the first thing you do is enter the building. At this moment, you haven’t visited any shop yet, you are just inside the mall structure.
- Similarly, when a user opens an Angular application, the browser loads index.html. This file is just the building structure. Angular is not active yet.
Use in this Step
- Provides a place where the application will live
- Contains <app-root> like an empty hall
- No business logic runs here
The index.html is just the entry gate, not the mall experience.
What Exists at This Moment
- Static HTML
- Empty <app-root>
- JavaScript files are referenced, but Angular code has not yet started executing.
Default index.html file Code:
The following is the default code of the index.html file.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MyFirstAngularApp</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>
What is <app-root></app-root>?
The <app-root></app-root> is not HTML, not JavaScript, and not executed by the browser. It is simply a placeholder for a custom HTML element where Angular will later render our application’s UI. At the time the browser loads index.html:
- The browser does not know what <app-root> is
- The browser does nothing with it
- It remains an empty element in the DOM
Why Does Angular Need <app-root>?
Angular needs one fixed DOM location where it can:
- Attach the root component
- Render the application UI
- Control all further UI updates
That location is <app-root>. Angular will later say: Find <app-root> and replace it with my application UI.
Step 2: Browser Executes Compiled JavaScript (Angular Starts from main.ts)
After the browser finishes loading JavaScript bundles referenced in index.html, it begins executing them. One of those bundles contains the compiled version of main.ts. This is the moment Angular officially starts. From here onward, Angular, not the browser, controls the application startup process. This file tells Angular how to start and which component represents the application. In our application, this happens through the bootstrapApplication(App, appConfig) call.
Key Points
- First Angular-controlled file.
- Initializes Angular runtime.
- Starts the bootstrapping process.
- No UI is rendered yet.
Layman Example: Mall Management Switches On Power
- Once inside the mall, the management turns on electricity, elevators, and security systems. Now the mall is operational.
- In Angular, this happens when the browser executes compiled JavaScript and starts from main.ts. This is where Angular wakes up.
Use in this Step
- Starts the Angular framework.
- Decides which component is the main one.
- Connects Angular to the page.
The main.ts is like switching on the mall’s systems.
Default main.ts file Code:
The following is the default code of the main.ts file. Please read the comment lines for a better understanding.
// bootstrapApplication is the function that starts the Angular framework.
// It creates the Angular runtime, sets up Dependency Injection (DI), and creates the root component
import { bootstrapApplication } from '@angular/platform-browser';
// appConfig contains global application configuration (providers like Router, HttpClient, etc.).
// Angular reads this configuration during startup BEFORE creating the first component.
import { appConfig } from './app/app.config';
// App is the Root Component of the application.
// This component represents the entire Angular application UI.
// It is the first component Angular creates and it remains alive for the full app lifecycle.
// Angular will attach this component to <app-root> in index.html.
import { App } from './app/app';
// This is the most important line in the application.
// It tells Angular to:
// 1) Starts the Angular runtime (framework + rendering engine)
// 2) Reads appConfig and registers all global providers (Router, HttpClient, error handlers, etc.)
// 3) Creates the Root Injector (top-level Dependency Injection container)
// 4) Creates (instantiates) the App component (your Root Component)
// 5) Finds the matching host element in index.html: <app-root></app-root>
// 6) Renders App's template (app.html) + applies styles (app.css) inside <app-root>
bootstrapApplication(App, appConfig)
// If any error occurs during the bootstrap process
// (for example, invalid configuration, missing providers, missing imports, etc.),
// this catch block logs the error to the console.
.catch((err) => console.error(err));
Step 3: Angular Bootstraps the Root Application
Bootstrapping is the process by which Angular prepares the Application Environment, not the UI. During this phase, Angular reads the Global Configuration (app.config.ts), then Registers Providers and initializes the Router based on the configuration defined in app.config.ts, while the Root Injector is created by Angular. This step ensures that all required services and features are ready before any component is created. This step is about preparation, not rendering.
Layman Example: Mall Rules & Facilities Setup
Before opening shops, the mall sets up:
- Security rules
- Information desk
- Navigation boards
- Emergency handling
Similarly, Angular bootstraps the application by reading app.config.ts.
Use in this Step
- Registers routing.
- Sets up global services.
- Creates a dependency injection system.
This step prepares the environment but shows nothing to users.
Default app.config.ts file Code:
The following is the default code of the app.config.ts file. I have provided inline comments to improve understanding. Please read the comments.
// ApplicationConfig is used to define global application-level configuration.
// provideBrowserGlobalErrorListeners sets up global error handling
// before any component or UI is created.
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
// provideRouter() registers Angular Router services at the root level (so routing works app-wide).
import { provideRouter } from '@angular/router';
// Routes array that contains path → component mapping rules.
// Example: { path: 'products', component: ProductsComponent }
import { routes } from './app.routes';
// appConfig represents the complete global configuration of the Angular application.
// Angular reads this object during bootstrap (in main.ts).
export const appConfig: ApplicationConfig = {
// providers = "global registrations" for the application.
// Anything registered here becomes available through Angular Dependency Injection (DI)
// across the entire application.
providers: [
// Registers global browser-level error listeners.
// This allows Angular to catch and handle uncaught runtime errors.
// These listeners are registered once and live for the entire app lifetime.
provideBrowserGlobalErrorListeners(),
// Initializes Angular Router and registers navigation rules.
// Angular will use the "routes" configuration to decide which component to display for each URL.
// Without this line, routerLink/router-outlet will not work.
provideRouter(routes)
]
};
Step 4: Root Component Is Created
Once bootstrapping is complete (application environment is set up), Angular finally creates the Root Component (app.ts). This component represents the Entire Application and acts as the Starting Point of the component tree. Angular instantiates this component Exactly Once and links it to the <app-root> element found in index.html.
Key Points
- Root component instance is created.
- Linked to <app-root>.
- Component lifecycle begins.
- Application UI ownership starts here.
Layman Example: Opening the Main Reception Area
- Now the mall opens its Main Reception Area, which stays open all day and controls where people go.
- In Angular, this is the Root Component (App). Angular creates it once and attaches it to <app-root>.
Use in this Step
- Acts as the main controller of the UI.
- Holds the layout (header, navigation, footer).
- Never destroyed while the app runs.
The Root Component is the mall’s central control area.
Default app.ts file Code:
The following is the default code of the app.ts file. I have provided inline comments to improve understanding. Please read the comments.
// Component is used to create an Angular Component.
// signal is Angular’s reactive state API used to manage data changes.
// A signal holds a value and automatically notifies Angular when it changes.
import { Component, signal } from '@angular/core';
// RouterOutlet is a directive provided by Angular Router.
// It acts as a placeholder where routed components will be displayed.
// Example: when URL is /products, ProductsComponent will be rendered inside <router-outlet>.
import { RouterOutlet, RouterLink } from '@angular/router';
// @Component decorator tells Angular that this class is a Component
// and provides metadata required to create and render it.
@Component({
// selector defines the custom HTML tag for this component.
// Angular looks for <app-root></app-root> in index.html and attaches this component there.
selector: 'app-root',
// Any directives/components/pipes you want to use must be imported here.
// We import RouterOutlet because app.html contains <router-outlet>.
imports: [
RouterOutlet, // needed for <router-outlet>
RouterLink // needed for routerLink directive
],
// templateUrl points to the HTML file that defines the UI of this Root Component.
templateUrl: './app.html',
// styleUrl points to the CSS file that contains styles scoped only to this component.
styleUrl: './app.css'
})
export class App {
// title is a reactive state variable created using signal().
// Angular automatically tracks changes to this value.
// Whenever this value changes, the UI updates automatically.
// protected means it can be accessed inside the class and template,
// but not from outside the component.
protected readonly title = signal('my-first-angular-app-started');
}
Step 5: UI Is Rendered Inside <app-root>
Angular applications can have many templates, but each component has exactly one template. After creating the Root Component (app.ts), Angular loads its template (app.html), applies styles (app.css), evaluates bindings, and generates real HTML. This rendered HTML replaces the empty <app-root> element in index.html. This is the first moment the user actually sees the application UI.
Key Points
- Templates are parsed and rendered
- Data bindings are evaluated
- Styles are applied
- Change detection starts running
Layman Example: Visible Mall Layout
Now visitors can see:
- Mall name
- Directions
- Floors
- Common areas
This is when Angular loads app.html.
Use in this Step
- Displays static layout
- Shows navigation menu
- Prepares space for dynamic content
This is the app’s visible structure.
Modify app.html file:
Please modify the app.html file as follows. I have provided inline comments to improve understanding. Please read the comments. This is the main app template, and all other templates will be rendered within it.
<!-- Static HTML heading.
This is rendered exactly as written and does not change dynamically. -->
<h1>Welcome</h1>
<!-- Angular interpolation syntax.
title() is a signal defined in the Root Component (app.ts).
Angular reads the current value of the signal and displays it here.
If the signal value changes, Angular automatically updates this text
without reloading the page. -->
<p>{{ title() }}</p>
<!--
<router-outlet> is NOT a normal HTML tag.
It is an Angular Router directive that acts like a placeholder.
Meaning:
- When the URL matches a route (e.g., /products), Angular creates that route’s component
and renders its template INSIDE this router-outlet area.
- If no route matches (or routes are empty), this area stays empty.
- The App component remains on the page; only the content inside router-outlet changes.
-->
<router-outlet></router-outlet>
Example to Understand Angular Routing
Let us understand Angular Routing using a simple real-world example with three pages:
- Home
- Product
- About
Angular will not load multiple HTML pages. Instead, it will load different component templates inside <router-outlet> based on the URL.
Step 1: Root Template (app.html)
This file defines the application’s fixed layout. It contains navigation links and a <router-outlet> where routed content appears.
<h1>My Angular App</h1> <nav> <a routerLink="/">Home</a> | <a routerLink="/product">Product</a> | <a routerLink="/about">About</a> </nav> <hr> <!-- Routed component templates will appear here --> <router-outlet></router-outlet>
What This Means
- Header and navigation are always visible.
- <router-outlet> is the dynamic area.
- Clicking links changes the URL, not the page.
Understand Where Components Live
Inside your project, you will see:
All application components live inside src/app/. Each component gets its own folder.
How to create a Component in Angular?
In order to create a component using Angular CLI, you need to use the following command in the terminal.
- ng g c Name
- ng generate component Name
Here,
- Here, ng stands for Angular, and it will call the Angular CLI.
- Here, g is the abbreviation of generating (you can also use the whole word generate).
- Here, c is the abbreviation of component (you can also use the whole word component).
- Here, the Name is the name of the component
Step 2: Create Components (One Component = One Template)
Each route points to one component, and each component has its own HTML template. We need to create the component file first; the corresponding HTML file will be generated automatically.
Home Component
In the terminal, please execute the following command:
- ng g c Home
You will get the following response:
home.ts
Then, please modify the home.ts file as follows:
import { Component } from '@angular/core';
@Component({
templateUrl: './home.html',
})
export class Home {
}
home.html
<h2>Home</h2> <p>Welcome to the Home page</p>
Product Component
In the terminal, please execute the following command:
- ng g c Product
You will get the following response
product.ts
import { Component } from '@angular/core';
@Component({
templateUrl: './product.html',
})
export class Product {
}
product.html
<h2>Product</h2> <p>Here are our products</p>
About Component
In the terminal, please execute the following command:
- ng g c About
You will get the following response:
about.ts
import { Component } from '@angular/core';
@Component({
templateUrl: './about.html',
})
export class About {
}
about.html
<h2>About</h2> <p>About our company</p>
Step 3: Define Routes (app.routes.ts)
Routing in Angular is the mechanism that allows an application to display different views or pages without reloading the browser. Instead of loading multiple HTML pages, Angular uses a single HTML page and dynamically swaps component templates based on the current URL. The Angular Router listens to URL changes, matches them against predefined route rules, and decides which component should be displayed inside the <router-outlet>. This approach enables smooth navigation, faster user experience, and a true Single Page Application (SPA) behaviour.
Key Points
- Angular routing works without page reloads
- URLs are mapped to components, not HTML files
- <router-outlet> acts as a placeholder for routed components
- Only one routed component is displayed at a time
- Router controls navigation, not the browser
- Routing keeps the application fast and dynamic
Layman Example: Direction Boards in the Mall)
The mall has boards like:
- Food Court → 2nd Floor
- Electronics → Ground Floor
Angular routing does the same.
Use in this Step
- Maps URLs to components.
- Decides what to show when the URL changes.
- Does not render the UI itself.
Routes are directions, not shops. Please modify the app.routes.ts file as follows. This file tells Angular which component template should appear for which URL.
// Routes is a TypeScript type provided by Angular Router.
// It represents an array of route definitions (URL → Component mapping).
import { Routes } from '@angular/router';
// Import the components that should be displayed for specific URLs.
// These components will be created and rendered by the router
// inside the <router-outlet>.
import { Home } from './home/home';
import { Product } from './product/product';
import { About } from './about/about';
// routes defines all navigation rules for the application.
// Angular reads this configuration once during application startup.
export const routes: Routes = [
// Default route:
// When the browser URL is exactly '/', Angular loads the Home component.
// This is usually the landing or home page of the application.
{ path: '', component: Home },
// Product route:
// When the URL is '/product', Angular loads the Product component
// and renders its template inside <router-outlet>.
{ path: 'product', component: Product },
// About route:
// When the URL is '/about', Angular loads the About component
// and renders its template inside <router-outlet>.
{ path: 'about', component: About }
];
In this chapter, you learned how an Angular application starts and what happens behind the scenes before anything appears in the browser. You understood the complete startup flow, from the browser loading index.html, to Angular executing main.ts, bootstrapping the application, creating the root component, and finally rendering the UI inside <app-root>.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.
Registration Open – Angular Online Training
Session Time: 8:30 PM – 10:00 PM IST
Advance your career with our expert-led, hands-on live training program. Get complete course details, the syllabus, and Zoom credentials for demo sessions via the links below.
Fantastic, Thanks.
Very very good. Its like you are sitting next to us and explaining