How is an Angular App loaded by browser?

Step 1: Browser Loads index.html

• The browser requests index.html, which contains a script tag that loads the Angular bundle.

      <script src="main.js"></script>  <!-- Compiled Angular app -->
  

---

Step 2: main.ts Bootstraps the Application

• Angular execution starts in main.ts, where the root module (AppModule) is bootstrapped.

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

• platformBrowserDynamic() creates an Angular injector (DI container).

• bootstrapModule(AppModule) initializes the root module (AppModule), making it the starting point of the app.

---

Step 3: AppModule is Initialized and Injector is Created

• Inside app.module.ts, the root injector is created and configured with providers. Angular’s Dependency Injection (DI) system works, starting from when the browser loads the Angular app to when dependencies are injected into components and services.

@NgModule({
  declarations: [AppComponent],  // Declares components
  imports: [BrowserModule],      // Imports necessary modules
  providers: [SomeService],      // Registers services at the root level
  bootstrap: [AppComponent]      // Bootstraps the root component
})
export class AppModule { }

• Key action:

  • The providers array registers dependencies in Angular's DI system.

  • The bootstrap array tells Angular to start with AppComponent.

---

Step 4: AppComponent is Instantiated with Injected Dependencies

• Angular initializes AppComponent and injects services that it depends on.

typescriptCopyEdit@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private someService: SomeService) { }
}

• How injection happens:

  • When AppComponent is created, Angular sees private someService: SomeService in the constructor.

  • It looks up SomeService in the injector tree and provides an instance.

---

Step 5: Injector Tree Handles DI Across the App

• Root Injector (created in AppModule) serves dependencies to all components and services.

• Hierarchical Injectors exist at different module or component levels, allowing scoped dependency injection.

Diagram Representation:

 Loads index.html
         ↓
Executes main.ts
         ↓
Bootstraps AppModule (Root Module)
         ↓
Creates Root Injector
         ↓
Registers Dependencies from @NgModule.providers
         ↓
Creates & Injects Dependencies into Components & Services