Error while using APP_INITIALIZER function

huangapple go评论85阅读模式
英文:

Errore while using APP_INITIALIZER function

问题

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:

Error while using APP_INITIALIZER function

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?

英文:

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:

Error while using APP_INITIALIZER function

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?

答案1

得分: 3

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

英文:

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

huangapple
  • 本文由 发表于 2023年3月12日 18:56:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/75712625.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定