Sharing Top Content from the Angular-sphere.

Hook into Angular Initialization Process – Hacker Noon

  • How Angular uses the APP_INITIALIZER?
  • Angular uses the APP_INITIALIZER token to initialize some of its implementations on the application initialization time.
  • Angular uses the APP_INITIALIZER token to configure and initialize the ng.prob before the app initializes, so the ng.prob will be available on demand.The source code can be found here.Web WorkersWeb Workers provide a simple means for web content to run scripts in background threads.
  • Angular is decoupled from the DOM via a higher level API so we can use web worker concept.Angular uses the APP_INITIALIZER in order to setup the DOM adapter before using it, so the DOM API calls will not be done on the real browser DOM.
  • Other methods — of browser DOM API — all throw exception as the DOM is not accessible directly in web worker context.The source code can be found here.RoutingTo initialize the router properly, Angular needs to do two major steps:Starts the navigation in the APP_INITIALIZER to block the bootstrap if a resolver or guards executes asynchronously.Runs activation in the BOOTSTRAP_LISTENER.

Sometimes you need to hook into internal processes. Sometimes you need to run your code before the application is being loaded. Sometimes you need to configure parts of the application before the…

@makesideproject: “Hook into Angular Initialization Process” /by @DorMoshe #Angular #Angularjs #WebDevelopment #FrontEndDevelopment

Sometimes you need to hook into internal processes. Sometimes you need to run your code before the application is being loaded. Sometimes you need to configure parts of the application before the page is being rendered. Sometimes you want to suspend the initialization until some restriction is being done. In Angular v4 you can do this with the APP_INITIALIZER token.

In this article we will understand what is an Injection Token, what is the APP_INITIALIZER and how to use it to hook into the initialization process. In addition, we will see a source code of the core module that runs this functionality and we will cover three of the Angular usages of this feature.

InjectionToken is an improved version of Angular v2 OpaqueToken (one of the changes in v4). It allows us to create string-based tokens without running into any collisions in the dependency injection mechanism. Creating an InjectionToken is easy.

APP_INITIALIZER is one of the injection tokens of Angular. This token is still experimental. When you are using APP_INITIALIZER, Angular will execute the provided function when the app is initialized. Angular will delay the initialization if the function returns a promise until the promise resolution. This means the application can be initializing without quite so much latency and you can also use the existing services and framework features.

So there are two functions called in the initialization process — onAppInit1, onAppInit2. Here are the functions implementation:

As you can see, each of the functions return a promise. The Angular initialization process will be continue until all the initializer promises resolved. Here is the video of the run as part of Tour of Heroes project:

In the first line, the token is declared. The service constructor takes the functions that provided, if there are, runs them and pushes the returned promises to an array.

Angular uses the APP_INITIALIZER token to initialize some of its implementations on the application initialization time. Here are 3 of the usages.

will be available on demand.

The source code can be found here.

Web Workers provide a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. Angular is decoupled from the DOM via a higher level API so we can use web worker concept.

Angular uses the APP_INITIALIZER in order to setup the DOM adapter before using it, so the DOM API calls will not be done on the real browser DOM. This adapter is required to log error messages using the traditional js console object. Other methods — of browser DOM API — all throw exception as the DOM is not accessible directly in web worker context.

The source code can be found here.

To initialize the router properly, Angular needs to do two major steps:

The router navigation starts, reaches to the point when the preactivation is done, and then it pauses. It waits for the hook to be resolved. And then resolves it in a bootstrap listener.

The source code can be found here.

Hook into Angular Initialization Process – Hacker Noon

Comments are closed, but trackbacks and pingbacks are open.