web-dev-qa-db-ja.com

AngularFire2-モジュール@ firebase / databaseが見つかりません

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でモジュール「@ firebase/database」が見つかりませんというエラーメッセージが表示されます。 119190：82 ）

Node_modulesフォルダーを確認するとき、@ firebaseにはデータベースサブフォルダーはありませんが、firebase-folderにはデータベースフォルダーがあります。

私は何か間違ったことをしましたか、それはAngularFire2の一般的な問題ですか？

firebaseionic-frameworkionic2angularfire2
9
Matt

Npmの問題と関係があると思います。糸を使用してモジュールをインストールすると、すべてが完璧に機能します。

yarn add angularfire2 firebase

tldr：ノード：8.4.0/npm：5.2.0に問題があり、糸が機能する

10
Matt

試すことができます：

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

またはAngularFireDatabaseModuleでAngularFireDatabaseを変更します。

3
CSantos

私はあなたの問題を再現しようとして運がなかった。これがまだ次のことを試みるあなたのための問題である場合私は提案する：

  1. 以下の私の設定とあなたの設定の違いを確認してください
  2. Ionic3の構成に関する注意事項を表示 here
  3. Npmの再インストール（狂ったように聞こえますが、時々これを行うと問題が消え、私のものがあなたのものより少し新しいことがわかります）

npmの構成

$npm ls -g --depth=0
/Users/pbrack/.nvm/versions/node/v8.5.0/lib
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

設定手順

$ 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();
  }

}
3
Philip Brack

1. 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"

  1. プロジェクトルートでnpm updateを実行します。 NPMはyaのFirebaseをダウングレードします

  2. Ng serve --openを実行して、コンパイルエラーを確認します。あるべきではありません。理由：

Firebaseは、AngularFire2がまだ対処していないいくつかの重大な変更を導入しました。 AngularFire2チームが解決するまで、これが解決策となります。

いい絵文字を追加して、同じ問題を抱えている人をここに誘導してください！多くの時間を節約できます！

2
Ashraf Alngar

最新のanglefire2と[email protected]をインストールします

npm install [email protected]
npm install angularfire2@latest

「--save」は不要になり、暗黙的に残ります

1
brianbha