英文:
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:
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:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论