如何修复："@angular/fire"'没有导出成员'AngularFireModule'.ts(2305)离子，火基，角

Question

我正在尝试将我的应用程序与firebase数据库连接，但我在app.module.ts上收到4个错误消息:

'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305),
'"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305)
'"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305)
'"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)

这是我的包裹。json文件:

{
"name": "gescable",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-devkit/architect": "^0.1202.5",
"@angular-devkit/architect-cli": "^0.1202.5",
"@angular/common": "~12.1.1",
"@angular/core": "~12.1.1",
"@angular/fire": "^7.0.4",
"@angular/forms": "~12.1.1",
"@angular/platform-browser": "~12.1.1",
"@angular/platform-browser-dynamic": "~12.1.1",
"@angular/router": "~12.1.1",
"@ionic/angular": "^5.5.2",
"ajv": "^8.6.2",
"angularfire2": "^5.4.2",
"firebase": "^7.24.0",
"rxfire": "^6.0.0",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.1.1",
"@angular-eslint/builder": "~12.0.0",
"@angular-eslint/eslint-plugin": "~12.0.0",
"@angular-eslint/eslint-plugin-template": "~12.0.0",
"@angular-eslint/template-parser": "~12.0.0",
"@angular/cli": "~12.1.1",
"@angular/compiler": "~12.1.1",
"@angular/compiler-cli": "~12.1.1",
"@angular/language-service": "~12.0.1",
"@ionic/angular-toolkit": "^4.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "4.16.1",
"@typescript-eslint/parser": "4.16.1",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.2.4",
"@angular-devkit/architect": "^0.1200.0",
"firebase-tools": "^9.0.0",
"fuzzy": "^0.1.3",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1",
"open": "^7.0.3",
"jsonc-parser": "^3.0.0"
},
"description": "An Ionic project"
}

这里是app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ClientPageModule } from './client/client.module';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireDatabaseModule } from '@angular/fire/database';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
ClientPageModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
AngularFireStorageModule,
AngularFireDatabaseModule
],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}

这是我的配置。ts文件

"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": ["es2018", "dom"]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true,
"skipLibCheck": true 
}
}

Answer 1

你需要加上"这样的

import { AngularFireModule } from "@angular/fire/compat";
import { AngularFireAuthModule } from "@angular/fire/compat/auth";
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';

Answer 2

首先，通过添加compact

更改导入

import { AngularFireAuthModule } from "@angular/fire/compat/auth";
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';

如果这不能解决问题，请键入ctrl+Z检查兼容性Angular Firebase和AngularFire
13 9 ^7.2
12 9 ^7.0
12 7,8 ^6.1.5

Answer 3

非常感谢@AchrafBj和@martin-Zeitler。一切正常:

1. 我升级到"firebase"; "~9.0.2;with npm i firebase@9.0.2
2. 我在app.module.ts文件中做了一些更正:

import { AngularFireAuthModule } from "@angular/fire/compat/auth";
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';````
here is the link https://firebase.google.com/docs/web/modular-upgrade
Enjoy!!!!

Answer 4

@angular/fire^7.0.4不匹配此依赖项:firebase^7.24.0.

您可以依赖firebase9.0.2-或降级到@angular/fire^6.1.5。

请看我所链接的文档，它清楚地说明了。

"@angular/fire": "~7.0.4",
"firebase": "~9.0.2",

---

@ionic已被@capacitor取代，devkit进入devDependencies。

Answer 5

别人也犯了同样的错误?你可以通过angular模块上的这些导入来解决这个问题:

import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireStorageModule, BUCKET } from '@angular/fire/compat/storage';
import { AngularFireModule } from "@angular/fire/compat";

对于@angular/fire V ^9.15.0

问候!