1

I am currently upgrading our application from Angular v15 to v18. Also, our application is in transition to become a fully standalone application.

I have switched from ngModule to bootstrapApplication.

Here's the error when using APP_INITIALIZER with HTTP_CLIENT:

core.mjs:6467 ERROR Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at https://angular.dev/errors/NG0203 at injectInjectorOnly2 (core.mjs:1091:11) at ɵɵinject2 (core.mjs:1101:40) at Object.HttpClient_Factory [as factory] (http.mjs:1459:39) at core.mjs:3132:35 at runInInjectorProfilerContext (core.mjs:866:5) at R3Injector.hydrate (core.mjs:3131:11) at R3Injector.get (core.mjs:3005:23) at injectInjectorOnly (core.mjs:1095:36) at ɵɵinject (core.mjs:1101:40) at injectArgs (core.mjs:1226:17)

This error arise when importing code from our library with regards to HTTP_CLIENT:

export function provideCommonLib(): EnvironmentProviders { return makeEnvironmentProviders([ provideHttpClient(), { provide: APP_INITIALIZER, useFactory: () => { console.log('APP_INITIALIZER LIB'); return () => true; }, deps: [HttpClient], multi: true } ]); } bootstrapApplication(AppComponent, { providers: [ provideHttpClient(), { provide: APP_INITIALIZER, useFactory: () => { console.log('APP_INITIALIZER APP'); return () => true; }, deps: [HttpClient], multi: true }, provideCommonLib() ] }).then();

I have added the same code in our application and the factory method for APP_INITIALIZER is being called without throwing any error. But the code in the library throws an error. When I remove the deps: [HttpClient], the code is executed. HttpClient is needed to load some code on application launch.

Any ideas what is missing? The added code is following the example from Angular doc directly: https://angular.dev/api/core/APP_INITIALIZER?tab=usage-notes.

Note: the code is obviously stripped down to understand where the issue arise.

Improve this question
6
  • To clarify, you want to have two initializers, one in the library and one in the application? And the one in the application works, while the one from the library throws an error? Commented Aug 6, 2024 at 14:40
  • The application itself does not use APP_INITIALIZER. I added it temporarily while troubleshooting and it shows that it works in the application while throwing an exception in the library. Having two should not be an issue since I added multi: true. Correct, only the one from the library is throwing an exception. Commented Aug 6, 2024 at 14:46
  • Do you perhaps have an HttpInterceptor that is interfering? Commented Aug 6, 2024 at 15:59
  • We do but they are deactivated (not provided). I start to think it might be related to this issue: stackoverflow.com/questions/51485868/…. Commented Aug 7, 2024 at 14:12
  • Possibly. It's hard to say without looking at more code. I hope you find the issue. Commented Aug 7, 2024 at 14:32

1 Answer 1

Reset to default
0

Try using ENVIRONMENT_INITIALIZER and inject() instead:

export function provideCommonLib(): EnvironmentProviders { return makeEnvironmentProviders([ provideHttpClient(), { provide: ENVIRONMENT_INITIALIZER, useValue: () => { const httpClient = inject(HttpClient); // other logic }, multi: true } ]); }

However I am not sure if with this approach it would be possible to delay initialization of the application, if this is important to you.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the proposed solution, I also tried it and the service injected does not throw an exception. That said, correct, the use of APP_INITIALIZER is to delay the application and get some data prior loading the DOM. From the angular web site, ENVIRONMENT_INITIALIZER does not seem to do the same thing.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.