如何修复：“@angular/fire”'没有导出成员 'AngularFireModule'.ts(2305) ionic、firebase、angular

Posted 2023-03-13

【中文标题】如何修复：“@angular/fire”\'没有导出成员 \'AngularFireModule\'.ts(2305) ionic、firebase、angular

【英文标题】：How to fix: "@angular/fire"' has no exported member 'AngularFireModule'.ts(2305) ionic, firebase, angular如何修复：“@angular/fire”'没有导出成员 'AngularFireModule'.ts(2305) ionic、firebase、angular

【发布时间】：2021-11-06 17:38:29

【问题描述】：

我正在尝试将我的应用与 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)

这是我的 package.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 

这是我的 tsonfig.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 
  

【参考方案1】：

你需要像这样添加“compat”

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';

【讨论】：

tks @AchrafBj 。这是错误消息： moduleIdentifier: 'c:\dev\gescable\gescable\node_modules\@angular-dev...ular\fire\fesm2015\angular-fire-compat-storage.js', moduleName: './node_modules/ @angular/fire/fesm2015/angular-fire-compat-storage.js', loc: '10:0-43', message: "Module not found: Error: Can't resolve 'firebase/c...ble\gescable\ node_modules\@angular\fire\fesm2015'"

这是我使用@ionic/angular 6.0.3、Angular 13.2.2 和@angular/fire 7.2.1 时的解决方案

【参考方案2】：

@angular/fire^7.0.4 不匹配这个依赖：firebase^7.24.0。

您要么依赖firebase 9.0.2 - 要么降级到@angular/fire ^6.1.5。

只需查看我链接的文档，它清楚地说明了这一点。

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

---

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

【参考方案3】：

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

我使用 npm i firebase@9.0.2 升级到“firebase”：“~9.0.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!!!!

【参考方案4】：

首先，通过添加 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

【讨论】：

我有任何可用的更改文件。

在这个链接上你可以看到兼容性npmjs.com/package/@angular/fire

在这里你可以看到兼容性和关于@angular/fire/compat github.com/angular/angularfire

这里到这里我们谈论关于添加紧凑的升级firebase.google.com/docs/web/modular-upgrade