How an Angular App gets Loaded and Started

Last updated on April 1st, 2024

Have you ever pondered the process by which an Angular App is loaded and initiated? This step-by-step tutorial offers comprehensive insights into crucial Angular components such as the App Component and the bootstrapping procedure.

You need IDE or editor to write and edit angular code. Great IDE to work with angular for mac and windows is visual studio code.
Visit Visual Studio Code – Code Editing. Redefined to download Visual Studio code for free.

In our previous article you have successfully set up your first angular project. If you are new to angular refer Angular project Setup Step by Step Practical Tutorial – Full Stack Tutorials Hub.

This is the page we have developed on our previous article. It is accessible at http://localhost:4200/. This is where our development server spun up by the CLI will host the application.

Open a new folder and navigate to the one you created. This action will load all the files within that folder. These are the folders and files that the Angular CLI has generated.

This is your angular project.

How ANGULAR Trigger index.html 

The content we see on home page can be modified by accessing the App Component.

Under src –> app –> app.component.html make desired changes to html.

These changes are reflected instantly and verified by visiting http://localhost:4200/ .

It’s intriguing how the browser or the server hosting our app knows to load the content of AppComponent ?

This is not the file server by server. Instead index.html file is server by server.

Angular is called a Single Page Application (SPA) framework because it enables the development of web applications that load a single HTML page and dynamically update that page as the user interacts with the app.

Index.html is the single page served by Server.

Navigate to Index.html and the content of the page is shown below. There are no scripts imports in index.html file.

ng serve command rebuilds projects and create scripts bundles and imports in final file.

Index.html is normal html page and body is pretty interesting.

<app-root> </app-root> is not default html element. It is our own component. This is the root component of our application.

This component will tie together our whole application in the end.

Angular CLI created root component.

App Component in Angular

The “AppComponent” in Angular is a core part of any Angular application. It serves as the root component of what Angular refers to as a component tree. Angular applications are essentially a hierarchy of components, with AppComponent sitting at the root. Here’s a closer look at its role, structure, and how it fits into an Angular application:

Role of AppComponent

• Root Component: It is the top-level component from which all other components in the application inherit. It acts as the application’s main container.
• Bootstrap Mechanism: Angular includes it automatically as part of the bootstrapping process in the main.ts file. The bootstrapping process is what starts the application.
• Layout and Routing:It often contains the layout (header, footer, etc.) common to various parts of the application and placeholders (<router-outlet></router-outlet>) for routing content to appear.

Structure of AppComponent

Component Class (app.component.ts): The Component decorator is imported from the @angular/core package. This decorator is essential for defining a class as a component in Angular.The selector is used in HTML to denote where the component should be instantiated. For the root component of an Angular application, this is typically done in the index.html file, which acts as the entry point for the application’s UI. The index.html file contains a tag that matches the selector of the root component.

The selector value for AppComponent is ‘approot’. This is exactly same value used in Index.html file.

the <app-root></app-root> tag in index.html matches the selector defined for AppComponent. When Angular starts, it looks for this tag in index.html and replaces it with the actual content of the AppComponent, defined in its template file (app.component.html).

Template (app.component.html): This HTML file defines the view for the component. It can include static HTML, Angular directives, and bindings that interact with the component class.

Styles (app.component.css): This CSS file defines the styles for the component’s template.

Role of app.module.ts in Angular App gets Loaded and Started

In the app.module.ts file, AppComponent is declared as part of the declarations array and also specified in the bootstrap array to indicate it as the entry component for the application.

This file is the root module of an Angular application. It provides the mechanism to “bootstrap” the application. The root module serves several critical roles, including:

• Declaring components:It declares which components are part of the Angular application.
• Importing modules:It imports other modules from Angular or third-party libraries that the application will use.
• Providers: It provides services to the rest of the application, defining any application-wide singleton services.
• Bootstrapping:It identifies the root component that Angular should bootstrap to start the application.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Role of main.ts in Angular App gets Loaded and Started

In Angular, main.ts is a crucial starting point for your application. This is the first code that gets executed.

Importing Modules:It starts with importing necessary Angular modules. The most important are platformBrowserDynamic from @angular/platform-browser-dynamic and the AppModule from ./app/app.module.

Here’s a simple example of what main.ts might look like in a basic Angular application:

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

import { AppModule } from './app/app.module';


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

• platformBrowserDynamic(): This function creates a platform. Angular applications are platform-independent. This means the same application can run in a browser or on a server. This line specifies that your app should run in a browser.
• bootstrapModule(AppModule): This line bootstraps the root module (AppModule) to start the application. The AppModule is the entry module that Angular uses to bootstrap your application.

It’s a critical file that wires everything together but, in many applications, you won’t need to modify it after initial setup unless your bootstrapping process changes, or you need to adjust how you’re setting up the environment.

FAQ: Angular getting Started