article This originally appeared on dormoshe.io 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 token. APP_INITIALIZER Live example In this article, we will understand what is an Injection Token, what is the 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. APP_INITIALIZER Let’s start… Injection Token InjectionToken is an improved version of Angular v2 OpaqueToken ( ). It allows us to create string-based tokens without running into any collisions in the dependency injection mechanism. . one of the changes in v4 Creating an InjectionToken is easy APP_INITIALIZER Token APP_INITIALIZER is one of the injection tokens of Angular. This token is still experimental. When you are using 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 initialized without quite so much latency and you can also use the existing services and framework features. APP_INITIALIZER, An Example This example was written based on Tour of Heroes project. The definition of the array looks like: NgModule.providers APP_INITIALIZER module providers So there are two functions called in the initialization process — . Here are the functions’ implementations: onAppInit1, onAppInit2 APP_INITIALIZER providers factory functions As you can see, each of the functions returns a promise. The Angular initialization process will continue until all the initialization promises will be resolved. Here is the video of the run as part of the Tour of Heroes project: Tour of heroes — run The initializers ran by Angular concurrently and the loading has been delayed until the last resolving. So you can put your business logic in the providers. It can be some configurations or loading of remote resource and set of the response in an angular service. Internals Angular declares the token and runs the provided functions in a service — ApplicationInitStatus. Here is part of the code: APP_INITIALIZER App-initializer file source code 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. Application-init-status service — part I Then angular runs all the promises concurrently by . The property will stay until all the promises resolved. Promise.all _done false Application-init-status service — part II The source code can be found . here How Angular uses the APP_INITIALIZER? Angular uses the token to initialize some of its implementations on the application initialization time. Here are 3 of the usages. APP_INITIALIZER ng.probe Having the reference of a DOM element, you have the ability to inspect the state of the component it is located in. You can do this by using and put the DOM element as an argument like . ng.probe ng.probe($0) Angular uses the token to configure and initialize the ng.prob before the app initializes, so the will be available on demand. APP_INITIALIZER ng.prob The source code can be found . here Web Workers 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 in order to set up 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 object. Other methods — of browser DOM API — all throw exception as the DOM is not accessible directly in web worker context. APP_INITIALIZER console The source code can be found . here Routing To initialize the router properly, Angular needs to do two major steps: Starts the navigation in the to block the bootstrap if a resolver or a guard is executed asynchronously. APP_INITIALIZER Runs activation in the . To do that, Angular utilizes the hook that provided by the router. BOOTSTRAP_LISTENER afterPreactivation The router navigation starts reach 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 Conclusion Tokens are widely-used in Angular for injecting values. You can use them for your needs like configurations. Angular supplies convenient way to hook into the application initialization process. When you choose to fit in this process, do it after consideration because it suspends the application from being loaded. You can follow me on dormoshe.io or Twitter to read more about Angular, JavaScript and web development.

Initialized

Twitter

Too Long; Didn't Read

CodeRabbit: AI Code Review, Smart Chat, Free Trial

Hook into Angular’s Initialization Process

Too Long; Didn't Read

Companies Mentioned

@dormoshe

RELATED STORIES