在 angular 6 中初始化 firebase 而没有 angularfire

Question

我想要一个 initialize firebase by using AngularFire 的项目。然而，在整个开发过程中，我并没有使用 AngularFire 的太多功能。我总是在每个服务中导入 firebase/app 并使用相应的功能，如 firebase.auth() 或 firebase.database().

有了那个经验，我想在没有 AngularFire 的情况下初始化 firebase，因为我没有使用 AngularFire 方法。

现在我的问题是我找不到任何资源来教我如何初始化 firebase，当然我在 app.module.ts.

导入 firebase 时看到错误

下面是我的代码：

使用以下命令安装 firebase：npm i firebase

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import * as firebase from 'firebase';
import { environment } from '../environments/environment'; //API key is imported



@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    firebase.initializeApp(environment.firebase) //here shows the error
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在firebase.initializeApp(environment.firebase)行显示错误：

Type 'App' is not assignable to type 'any[] | Type<any> | 
ModuleWithProviders<any>'.
Type 'App' is not assignable to type 'ModuleWithProviders<any>'.
Property 'ngModule' is missing in type 'App'.

提前致谢。

Answer 1

我会说你遇到这个错误是因为 firebase.initializeApp(environment.firebase) 不是 Angular 模块。

我建议您在您的一项服务中执行此初始化或为此创建一个服务。

@Injectable({
    providedIn: 'root'
})
export class FirebaseService {
    constructor() {
        firebase.initializeApp(environment.firebase)
    }
}

Answer 2

嗯，您不能导入不是 Angular 模块的对象，因此会出现该错误。

您可以：
1. 在 AppModule 构造函数中使用它，例如：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(){         
    firebase.initializeApp(environment.firebase);
  }
}

2。为 Firebase 创建一个专用服务，您将在其中导入 'firebase' lib（这是一个很好的整体解决方案，可能会在您的应用程序中全局使用）。

@Injectable({
        providedIn: 'root' // <-- If you are on Angular 6
    })
    export class FbService {
        constructor() {
            firebase.initializeApp(environment.firebase);
        }
    }

Answer 3

只需在模块外添加 firebase.initializeApp(environment.firebase); 和 class，即：

import { environment } from '../environments/environment';
import * as firebase from 'firebase';

firebase.initializeApp(environment.firebase);

@NgModule({....

如果您想在服务中使用它，请导入 firebase import * as firebase from 'firebase'; 并照常使用。

在 angular 6 中初始化 firebase 而没有 angularfire

initialize firebase in angular 6 without angularfire

javascript

firebase

angularfire

angular