Angularfire：如何动态初始化配置？

Question

app.config.ts

文件：

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getAnalytics, provideAnalytics } from '@angular/fire/analytics';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() =>
      initializeApp({
        apiKey: 'xxx',
        authDomain: 'xxx.firebaseapp.com',
        databaseURL: 'https://xxx.firebaseio.com',
        projectId: 'xxx',
        storageBucket: 'xxx',
        messagingSenderId: '123',
        appId: 'xxx',
        measurementId: 'xxx',
      }),
    ),
    provideAnalytics(() => getAnalytics()),
    ...
  ],
  ...
})

我不喜欢在一开始就提供 Firebase 配置...我喜欢在

initializeApp

中或通过

app.component.ts

动态地提供

APP_INITIALIZER

。任何帮助表示赞赏。谢谢。

Answer 1

不要寻找资源，尝试使用 Angular 的

environments

，您可以在文件内添加环境变量，然后将

environments

路径添加到

.gitignore

，这样就不用将其提交到 github。

ng generate environments

使用上述命令在您的 Angular 项目中安装环境。

然后将配置添加到该文件中。

export const environment = {
  production: true,
  apiUrl: 'http://my-prod-url',
  firebaseConfig: {
        apiKey: 'xxx',
        authDomain: 'xxx.firebaseapp.com',
        databaseURL: 'https://xxx.firebaseio.com',
        projectId: 'xxx',
        storageBucket: 'xxx',
        messagingSenderId: '123',
        appId: 'xxx',
        measurementId: 'xxx',
  },
};

最后访问它并初始化 firebase。

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getAnalytics, provideAnalytics } from '@angular/fire/analytics';
import { environment } from './../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() =>
      initializeApp(environment.firebaseConfig),
    ),
    provideAnalytics(() => getAnalytics()),
    ...
  ],
  ...
})