Errore while using APP_INITIALIZER function

Question

I'm trying to load Firebase Remote Config using "APP_INITIALIZER" token.
That's my code in app.module.ts:

...
export function initSynchronousFactory(environmentService: EnvironmentService) {
  return () => {
    console.log('initSynchronousFactory');
    return environmentService.init();
  };
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, 
    ...
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideAuth(() => initializeAuth(getApp(), { persistence: indexedDBLocalPersistence })),
    // provideAuth(() => getAuth()),
    provideDatabase(() => getDatabase()),
    provideStorage(() => getStorage()),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()),
    provideRemoteConfig(() => {
      const remoteConfig = getRemoteConfig(getApp());
      remoteConfig.settings.minimumFetchIntervalMillis = isDevMode() ? 10000 : 43200000;
      fetchAndActivate(remoteConfig);
      return remoteConfig;
    }),

  ],
  providers: [
    { provide: APP_INITIALIZER, useFactory: initSynchronousFactory, deps:[EnvironmentService], multi: true },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

And this is my environment.service.ts:

import { Injectable, Injector, isDevMode } from '@angular/core';
import { fetchAndActivate, getString, RemoteConfig } from '@angular/fire/remote-config';

@Injectable({
  providedIn: 'root'
})
export class EnvironmentService {


  constructor(private remoteConfig: RemoteConfig) {
    console.log('EnvironmentService constructor')
  }

  init() {
    console.log('EnvironmentService init')    
  }

}

I got this error and the app doesn't start:

ERROR Error: The APP_INITIALIZER that is "making" isSupported() sync for the sake of convenient DI has not resolved in this
context. Rather than injecting RemoteConfig in the constructor, first ensure that RemoteConfig is supported by calling
`await isSupported()`, then retrieve the instance from the injector manually `injector.get(RemoteConfig)`.

I can't see the "initSynchronousFactory" log.
This is the complete log:

If I remove RemoteConfig It work, but I have need to import data from Firebase.
I can't understand where the problem is. Maybe the Remote module hasn't been imported yet?
Can I use module in "import" directive in APP_INITIALIZER function?

Julian Hansby · Answer 1 · 2023-03-27T11:22:49.333

I had the EXACT same issue ever since upgrading to the brand new Fire Analytics library "@angular/fire": "^7.5.0" & "firebase": "^9.18.0", (as at 27 March 2023).

The following three things helped me solve the issue:

Using the Ang Injector class from angular/core
then doing constructor(private injector: Injector)
then INSIDE of the isSupported method (imported via @angular/fire/analytics) solved it for me

Like so (from the context of a Service file....inside the constructor):

    private _analytics: Analytics;
    constructor(private injector: Injector) {
        isSupported().then((r) => {
            if (r) {
                this._analytics = this.injector.get(Analytics);
                console.log('test from INSIDE FB analytics service: ', this._analytics);
            }
        });
    }

then outside of constructor (but still inside the service file) just do a getter to get this._analytics and then inside any other component or service file you can do:

import { testService } from 'blah';

constructor(private testS: testService){}

from there onwards this.testS.analytics (assuming your getter method is called that), should work pretty fine

Errore while using APP_INITIALIZER function

1 Answers1