Angular 消防进口 angular 13

Question

我尝试导入 AngularFireModule 和 AngularFirestoreModule，但它说

Module '"@angular/fire/firestore"' has no exported member 'AngularFirestoreModule'.
Module '"@angular/fire"' has no exported member 'AngularFireModule'.

这是我 app.module.ts 中的内容：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TaskComponent } from './components/task/task.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { environment } from 'src/environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';

@NgModule({
  declarations: [
    AppComponent,
    TaskComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFirestoreModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule
  ], 
  providers: [DatePipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

这些是我的版本：

Angular CLI: 13.3.7
"@angular/fire": "^7.2.0",
"firebase": "^9.8.2",

这是版本兼容性的 table compatibility

Answer 1

根据您使用 AngularFire 应用程序的方式，事物的位置发生了变化。使用较新的版本，AngularFire 库可以是 tree-shaken。但是，要使用旧方法，有一个兼容层。

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';

变为：

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';

AngularFire

Angular 消防进口 angular 13

Angular Fire Imports angular 13

firebase

angularfire

package.json

angular