AngularFire2 - 找不到模块 @firebase/database。

10

我曾经多次安装和使用AngularFire2完成项目,但自从v5发布以来,我就无法正确设置它。

以下是我遵循的步骤,导致了这个问题。

$ ionic start angularfire2test tabs
$ npm install angularfire2 firebase --save

包描述文件(package.json)

"angularfire2": "^5.0.0-rc.3",
"firebase": "^4.5.2",

将 Firebase 凭据添加到 app.module.ts + 导入默认模块和数据库模块。这是最重要的部分。

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
...
@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseCredentials),
    AngularFireDatabaseModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
   ....

当我执行$ ionic serve时,出现错误信息“Cannot find module "@firebase/database" at webpackMissingModule (http://localhost:8100/build/vendor.js:119190:82)”。

检查node_modules文件夹时,@firebase没有一个名为database的子文件夹,但firebase文件夹确实有一个名为database的文件夹。

我做错了什么还是这是AngularFire2的普遍问题?


使用完全相同的版本和代码,在我的电脑上可以工作,非常奇怪。可能是与 node/npm 有关?我正在使用 node v.6.11.3 和 npm 3.10.10但是我的 @firebase 确实有 database 子文件夹。请参阅此图像: https://snag.gy/3dDiAK.jpg - Juxture
节点:8.4.0 / npm:5.2.0。@firebase文件夹包含4个文件夹:app,polyfill,util和webchannel-wrapper。 - Matt
{btsdaf} - Krsna Kishore
7个回答

10

我认为这与npm存在问题有关。 当使用yarn安装模块时,一切都非常顺利。

yarn add angularfire2 firebase

简而言之:Node 8.4.0/npm 5.2.0存在问题,但yarn可以正常工作。


使用npm add angularfire2 firebase对我有用。 - Ramsha Khalid

3
您可以尝试以下操作:
$ rm -rf node_modules/
$ npm install
$ npm install angularfire2@latest --save

或者将 AngularFireDatabaseModule 更改为 AngularFireDatabase

很遗憾,这两种解决方案都不起作用。我仍然遇到相同的问题。 - Matt

3
我很抱歉,我尝试复制您的问题时没有成功。如果您仍然遇到这个问题,我建议您尝试以下操作:
  1. 检查我的配置与您的配置之间的差异
  2. 查看配置ionic3的注释在这里
  3. 重新安装npm(听起来很疯狂,但有时这样做可以让问题消失,而且我的版本比您的更新一些)

npm配置

$npm ls -g --depth=0
/Users/pbrack/.nvm/versions/node/v8.5.0/lib
├── cordova@7.1.0
├── cordova-check-plugins@3.0.1
├── ionic@3.13.2
├── ios-deploy@1.9.2
└── npm@5.4.2

配置步骤

$ ionic start angularfire2test blank
$ npm install angularfire2 firebase --save

package.json

{
  "name": "angularfire-test",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.4.3",
    "@angular/compiler": "4.4.3",
    "@angular/compiler-cli": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/forms": "4.4.3",
    "@angular/http": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/platform-browser-dynamic": "4.4.3",
    "@ionic-native/core": "4.3.0",
    "@ionic-native/splash-screen": "4.3.0",
    "@ionic-native/status-bar": "4.3.0",
    "@ionic/storage": "2.0.1",
    "angularfire2": "^5.0.0-rc.3",
    "firebase": "^4.6.0",
    "ionic-angular": "3.7.1",
    "ionicons": "3.0.0",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.0.0",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project"
}

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {ErrorHandler, NgModule} from '@angular/core';
import {IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';
import {SplashScreen} from '@ionic-native/splash-screen';
import {StatusBar} from '@ionic-native/status-bar';

import {MyApp} from './app.component';
import {HomePage} from '../pages/home/home';


import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule, AngularFireDatabase} from 'angularfire2/database';
import {AngularFireAuthModule} from 'angularfire2/auth';


export const firebaseConfig = {
  apiKey: "xxxxxxxxxx",
  authDomain: "your-domain-name.firebaseapp.com",
  databaseURL: "https://your-domain-name.firebaseio.com",
  storageBucket: "your-domain-name.appspot.com",
  messagingSenderId: '<your-messaging-sender-id>'
};

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AngularFireDatabase,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {
}

home.ts

import {Component} from '@angular/core';
import {AngularFireDatabase} from 'angularfire2/database';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  items: Observable<any[]>;

  constructor(afDB: AngularFireDatabase) {
    this.items = afDB.list('cuisines').valueChanges();
  }

}

2

安装最新版本的angularfire2和firebase@4.8.2

npm install firebase@4.8.2
npm install angularfire2@latest

现在不再需要使用"--save",它已经默认包含在内。

1

1.在package.json中,从"firebase": "^4.8.1"中删除^

1.1 通过将4.8.1更改为4.8.0将Firebase降级到4.8.0

1.2 最终结果应如下所示:"firebase": "4.8.0"

  1. 在项目根目录中运行npm update。NPM会为您降级Firebase

  2. 运行ng serve --open检查是否有编译错误。不应该有任何错误。 原因:

Firebase引入了一些破坏性更改,AngularFire2还没有跟上。在AngularFire2团队解决这个问题之前,这将是解决方案。

添加一个点赞表情符号并直接将遇到相同问题的人带到这里!会节省他们很多时间!


0

首先您需要运行npm install firebase @angular/fire

接着运行npm install angularfire2@latest


0
下面的代码对我有效:

npm install --save firebase @angular/fire -f


(注:这是与编程有关的内容)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接