Posted on Sep 23 Angular 14 introduced ENVIRONMENT_INITIALIZER token that enables developers to run long operations during Angular Application Startup. For standalone component, I inject the new token in the providers array and pass the provider to bootstrapApplication() function. Moreover, I found a use case of hierarchical dependency (explained here) where inject() ensures this provider is called exactly once.In this blog post, I describe how to use ENVIRONMENT_INITIALIZER in Angular application startup and apply inject(provider token, injection options) to avoid repeated injections of ENVIRONMENT_INITIALIZER token.In this demo, I want to inject ENVIRONMENT_INITIALIZER and provide a function that loads user preferences from a remote data source. After retrieving the remote data, Angular component uses the preferences to update CSS styles. Moreover, inject() function guards the provider by passing { skipSelf: true, optional: true } option. If this provider is lazy loaded, inject() returns a non-null value and throws an error.The above JSON is a dummy user preferences that I created in my Github gist. I am going to use HttpClient to retrieve the data when application is loading.The core logic lies in providerCore() that includes initialization of application and URL, and guards against lazy loaded injection.I am going to create a core folder, and put injection tokens, providers and service there. First, I define two injection tokens, CORE_GUARD and PREFERENCE_URL.CORE_GUARD is a guard token to prevent ENVIRONMENT_INITIALIZER from injecting two or more times.PREFERENCE_URL injects the URL to retrieve the user preferencesBefore passing providers to initialize the application, I add a service to retrieve the user preferences and store the results in a Subject. I would love to use Signal but I cannot think of a reasonable initial value.The load$ Observable returns the CSS styles of font, label, top row and content. Moreover, load() updates stylesSub subject that emits the object to styles$ Observable. Our component makes use of styles$ to update the CSS styles of the HTML elements.providerCore is a function that returns an array of Providers. The interesting ones are the providers that inject CORE_GUARD and ENVIRONMENT_INITIALIZER respectively.CORE_GUARD is injected and then used in the provider of ENVIRONMENT_INITIALIZERWhen bootstrapApplication invokes providerCore(), coreGuard is null and error does not occur. When LazyLoadedComponent provides providerCore(), coreGuard equals to CORE_GUARD and throws TypeError.calls SettingsService to store CSS styles in the subjectI use toSignal to convert styles$ Observable to stylesSignal, and compute new signals from it. Then, these signals can bind to styles to change the appearances of the Div, Span and Label elements respectively.For example, [style]=topSignal() alters the appearance of the Div element to add black border and yellow background, centre text and enlarge the font size to 36px.What happens when I create lazy injector to provide providerCore?In UserProfileComponent, I put a RouteLink to lazy load LazyLoadedComponent. This component is a bare bone component except I provide providerCore() in Injector.create.lazyLoadedInjector inherits from its parent injector, parentInjector, and throws error because the value of CORE_GUARD injection token is CORE_GUARD.In the console of Chrome DevTool, TypeError is logged.The following Stackblitz repo shows the final results:This is the end of the blog post and I hope you like the content and continue to follow my learning experience in Angular and other technologies.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse chintanonweb - Sep 20 SmartMen Zambia - Sep 15 Odumosu Matthew - Sep 19 François Roget - Sep 15 Once suspended, railsstudent will not be able to comment or publish posts until their suspension is removed. Once unsuspended, railsstudent will be able to comment and publish posts again. Once unpublished, all posts by railsstudent will become hidden and only accessible to themselves. If railsstudent is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Connie Leung. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag railsstudent: railsstudent consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging railsstudent will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.