web-dev-qa-db-ja.com

AngularFireDatabase、AngularFireAuthのプロバイダーはありません

すべての情報を含めるより良い方法を考えられないのでおologiesびします...これを実行すると、次のようなエラーが表示されます。 TのIonic Docsをフォローしましたが、何が間違っているのかわかりません。

エラー：

AngularFireDatabaseのプロバイダーはありません！

Error

Package.json Package

App.module.ts App.Module

Home.html Home HTML

Home.ts Home TS

angulartypescriptfirebaseionic2angularfire2
25
Slabach

AngularDatabase（AngularAuthと同じ）は、バージョン[email protected]から独自のモジュールAngularFireDatabaseModule（AngularAuthのためのAngularFireAuthModule）に分離されています。 0 、ドキュメントを参照 ここ。

AngularFireDatabaseModuleにRootModule（AngularFireAuthModule for Authentication）をインポートする必要があります。

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

@NgModule({
  imports: [
    AngularFireModule.initializeApp({         <---- main module
      apiKey: ...,
      authDomain: '...',
      databaseURL: '...',
      storageBucket: '...',
      messagingSenderId: '...'
    }),                                       
    AngularFireDatabaseModule,                <---- for database 
    AngularFireAuthModule                     <---- for auth
  ]
})
62
Pengyy

内部app.module.ts以下を追加：

import { AngularFireModule } from 'angularfire2';

import { AngularFireDatabaseModule } from 'angularfire2/database';

次に、以下のようにインポートします。

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ],

内部home.ts以下のように使用します。

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

items: FirebaseListObservable<any[]>;

  constructor(public navCtrl: NavController, db: AngularFireDatabase) {
        this.items = db.list('/items');
  }

私のIonic情報：

Ionic Framework: 3.1.1
Ionic App Scripts: 1.3.7
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 6.10.1
OS Platform: macOS Sierra
15
Sunil Kumar

Angularfire2/database-deprecatedのFireBaseDatabaseを使用している場合は、FireBaseDatabaseModuleがanglefire2/database-deprecatedからインポートされていることを確認してください

およびその逆。唯一の問題は、インポート文が同じパッケージに属する必要があるため、インポート文の不一致です

angularfire2/databaseまたはangularfire2/database-deprecated

最初からデータベースをインポートし、2番目のパッケージからモジュールをインポートしようとした場合、またはその逆の場合。 DatabaseModuleまたはデータベースとして認識しません。

------------ルートモジュール-------------

    import { AngularFireDatabaseModule } from "angularfire2/database-deprecated"
    imports: [
        BrowserModule,
        RouterModule.forRoot(appRoutes),
        FormsModule,
        AngularFireModule,
        AngularFireDatabaseModule,
        AngularFireAuthModule,
        AngularFireModule.initializeApp(environment.firebase)    
]

-------サービスクラス------------

import { AngularFireDatabase, FirebaseListObservable } from "angularfire2/database-deprecated";
6
Amrit Pal Singh

App.module.tsのプロバイダー配列に追加します-

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  providers: [AuthService,**AngularFireAuth, AngularFireDatabase**, AuthGuard, InventoryService]
5
Pari

Angularアプリケーションでこのエラーが発生しました。 'angularfire2/database-deprecated'からインポートされたAngularFirebaseの自動インポートが判明しました。 -deprecatedをクリアすると、問題が解決しました。インポートを確認することもできます。

0
Alf Moh