Hooking into the Angular bootstrap process – Angular In Depth

March 23, 2018 0 Comments

Hooking into the Angular bootstrap process – Angular In Depth

 

 


“Hooking into the #Angular Bootstrap Process” #angular2 #javascript #webdev #programming

  • const listeners = – listeners.forEach((listener) = listener(componentRef)); – }This is the function that Angular calls when instantiating the application.
  • It means that we can use such hooks to subscribe to the application bootstrap process and perform our initialization logic.
  • Since Angular passes initialized component into the callback, we can get hold of root ComponentRef of the application like this: – import {APP_BOOTSTRAP_LISTENER, …} from ‘@angular/core’;@NgModule({ – imports: [BrowserModule, ReactiveFormsModule, TasksModule], – declarations: [AppComponent, BComponent, AComponent, SComponent, LiteralsComponent], – providers: [{ – provide: APP_BOOTSTRAP_LISTENER, multi: true, useFactory: () = {…
  • Signature of the callback:(componentRef: ComponentRef) = voidAPP_INITIALIZERAngular also provides a mechanism to perform some initialization logic before it declares the application as initialized and continues with change detection and template rendering.
  • The following example delays Angular initialization for 5 seconds: – { – provide: APP_INITIALIZER, – useFactory: () = { – return () = { – return new Promise((resolve, reject) = { – setTimeout(() = { – resolve(); – }, 5000); – }); – } – }, – multi: true -…

Angular provides several mechanisms to hook into initialization process. This article explores them and shows how they can be used. It is possible to register listeners for the Angular bootstrap…

Angular provides several mechanisms to hook into initialization process. This article explores them and shows how they can be used.

APP_BOOTSTRAP_LISTENERIt is possible to register listeners for the Angular bootstrap process. Here is the code where they are called:

private _loadComponent(componentRef: ComponentRefany): void {

this.tick();

// Get the listeners lazily to prevent DI cycles.

const listeners =

listeners.forEach((listener) = listener(componentRef));

}This is the function that Angular calls when instantiating the application. Besides giving insights into how a component is added into the application, it also suggests that for each bootstrapped component Angular calls listeners registered under APP_BOOTSTRAP_LISTENER token and passes bootstrapped component to them.

It means that we can use such hooks to subscribe to the application bootstrap process and perform our initialization logic. For example, here is how Router hooks into to the process and executes some initialization.

Since Angular passes initialized component into the callback, we can get hold of root ComponentRef of the application like this:

import {APP_BOOTSTRAP_LISTENER, …} from ‘@angular/core’;@NgModule({

imports: [BrowserModule, ReactiveFormsModule, TasksModule],

declarations: [AppComponent, BComponent, AComponent, SComponent, LiteralsComponent],

providers: [{

provide: APP_BOOTSTRAP_LISTENER, multi: true, useFactory: () = {

return (component: ComponentRefany) = {

}

}

}],

bootstrap: [AppComponent]

})

export class AppModule {

}After running into such functionality in the…

Hooking into the Angular bootstrap process – Angular In Depth

Comments are closed, but trackbacks and pingbacks are open.


Tag cloud