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

我尝试在使用@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 {
} 

是否可以在以下任何服务中调用initializeApp

@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);
        });
    }
}

---

我认为AngularFire没有任何自己的配置，所以您可以使用这里显示的常规JavaScrip初始化代码：从CDN选项卡中选择：

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

---

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

在多次尝试后发现了一个简单的漏洞

my 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;
}

我的延迟加载模块导入：

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

接下来在服务或任何组件中，按正常方式注入和使用

 constructor(private afs: AngularFirestore) {}

---

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

为什么您有一个API可以返回配置，而您可以在您的环境中硬编码它。ts文件？@Edric我有多个应用程序在单个项目上运行，这是一个增强代码可重用性的平台。因此，我希望每个应用程序都有自己的firebase db，出于安全目的，我们正在调用本地db并获取配置。我不知道这是不是正确的方法。请检查答案您应该使用@angular/common/http中的HttpClient API，而不是浏览器XMLHttpRequest API:@Edric您如何将HttpClient注入environmet.ts文件？还有来自Chrome的消息[Deprecation]主线程上的同步XMLHttpRequest已被弃用，因为它会对最终用户的体验产生有害影响