AngularFire2

Question

我已经为项目安装和使用了很多次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 时，我在 webpackMissingModule (http://localhost:8100/build/vendor.js:119190:82)

处收到错误消息 "Cannot find module "@firebase/database"

检查 node_modules 文件夹时，@firebase 没有数据库子文件夹，但 firebase 文件夹确实有数据库文件夹。

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

Answer 1

你可以试试：

$ rm -rf node_modules/
$ npm install
$ npm install angularfire2@latest --save

或将 AngularFireDatabaseModule 更改为 AngularFireDatabase。

Answer 2

我未能成功重现您的问题。如果这对您来说仍然是个问题，我会建议您尝试以下操作：

检查下面我的配置与您的配置之间的差异
查看配置ionic3的注意事项here
重新安装 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();
  }

}

Answer 3

我认为这与 npm 的问题有关。使用 yarn 安装模块时，一切正常。

yarn add angularfire2 firebase

tldr: Node: 8.4.0/npm: 5.2.0 有问题，yarn 有效

Answer 4

1.Inside package.json，从 "firebase" 中删除 ^：“^4.8.1”

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

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

运行项目根目录中的 npm 更新。 NPM 将为你降级 Firebase
运行 ng serve --open 检查编译错误。不应该有的。原因：

Firebase 引入了 AngularFire2 尚未处理的一些重大更改。在 AngularFire2 团队解决之前，这就是解决方案。

添加一个竖起大拇指的表情符号，把遇到同样问题的人带到这里！会节省他们很多时间！

Answer 5

安装最新的angularfire2和firebase@4.8.2

npm install firebase@4.8.2
npm install angularfire2@latest

不再需要“--save”，它仍然是隐含的

Answer 6

首先你将执行 npm install firebase @angular/fire

然后 npm install angularfire2@latest

Answer 7

以下代码对我有用

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

AngularFire2 - 找不到模块@firebase/database

AngularFire2 - Cannot find module @firebase/database

firebase

ionic-framework

ionic2

npm 配置

配置步骤

package.json

app.module.ts

home.ts