如何在通过 http 调用获取配置后在 angular 7 中动态初始化 Firebase

Question

在使用 @angular/fire 通过 http 调用获取配置文件后，我正在尝试动态初始化 Firebase。 但是所有文档和搜索都指向我在app.module.ts中初始化它，如下所示。

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
IonicModule.forRoot(),
AppRoutingModule,
],
providers: [
StatusBar,
SplashScreen,
{provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
],
bootstrap: [AppComponent]
})
export class AppModule {
} 

是否可以在如下所示的任何服务中调用初始化应用程序

@Injectable({
providedIn: 'root'
})
export class FirebaseSyncService {
constructor(private httpClient: HttpClient) {}
initializeFirebase() {
const url = 'http://localhost:3000/get-config?db=12345';
this.httpClient.get<any>(url).subscribe(response => {
AngularFireModule.initializeApp(response.config);
});
}
}

Answer 1

经过多次拔头发后找到了一个简单的技巧。

我的环境.ts 文件

export const environment = {
production: false,
firebase: getConfig()
};
function getConfig() {
let config;
let request = new XMLHttpRequest();
try {
request.open('GET', 'http://localhost:3000/index/get-config', false);  // `false` makes the request synchronous
request.send(null);
if (request.status === 200) {
console.log(request.responseText);
config = request.responseText;
}
return JSON.parse(config);
} catch (e) {
console.error('environment:getConfig: unable to get api key : ', e);
}
return config;
}

我的延迟加载模块导入：

@NgModule({
entryComponents: [],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
IonicModule.forRoot(),
AppRoutingModule,
],
})

接下来在服务或任何组件中，注入并正常使用

constructor(private afs: AngularFirestore) {}

希望这对将来的任何人都有帮助。

Answer 2

我不认为AngularFire有任何自己的配置，所以你可以使用这里显示的常规JavaScrip初始化代码： https://firebase.google.com/docs/web/setup(选择"从CDN"选项卡(：

// TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
// ...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

您需要确保在使用任何其他 Firebase 服务之前初始化DEFAULT应用。

Answer 3

对于那些在生产模式(ng build --prod(下构建项目时遇到问题的人，您需要在提供程序中初始化Firebase，而不是直接在导入数组中执行此操作。

app.module(或您初始化 Firebase 的模块(

@NgModule({
...
imports: [
...
AngularFireModule, // do NOT initialize firebase here
...
],
providers:[
{
provide: FirebaseOptionsToken, 
useValue: environment.firebase  //initialize firebase from env here
} 
]
...
})

environment.ts(保留与接受者答案相同的代码(

export const environment = {
production: false,
firebase: getConfig()
};
function getConfig() {
let config;
let request = new XMLHttpRequest();
try {
request.open('GET', 'http://localhost:3000/index/get-config', false);  // `false` makes the request synchronous
request.send(null);
if (request.status === 200) {
console.log(request.responseText);
config = request.responseText;
}
return JSON.parse(config);
} catch (e) {
console.error('environment:getConfig: unable to get api key : ', e);
}
return config;
}