没有AngularFireDatabase的提供者

时间：2018-01-20 06:26:16

标签： angular angularfire2

我跟随此tutorial在Angular中设置聊天室应用程序，我在设置AngularFire2时遇到问题。

我注意到在package.json file他正在使用4.0.0-rc.1，因此我将我的版本从"angularfire2": "^5.0.0-rc.4"更改为"angularfire2": "^4.0.0-rc.1"

现在我的chat.service.ts导入看起来像这样

    import { Injectable } from '@angular/core';

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

    import { Observable } from 'rxjs/Observable';
    import { AuthService } from '../services/auth.service';
    import * as firebase from 'firebase/app';

    import { ChatMessage } from '../models/chat.message.model';

但是我在FirebaseListObservable导入

上收到以下错误

chat.service.ts

当我搜索此错误时，我遇到了this post on github，建议使用angularfire2/database-deprecated。我做了这个，我的项目现在编译没有任何错误。但是，当我现在导航到localhost:4200/chat时，它会将我的应用重定向到http://localhost:4200/，并且在我的控制台中出现以下错误

console error

当我谷歌这个错误时，最高的结果是this SO post，它告诉我AngularDatabase已经被分成了自己的模块。但我对如何解决我的问题感到困惑。我是否将他的整个示例复制到我的app.module.ts文件中？我从哪里获取这个AngularFireModule api密钥？

我希望尽可能密切关注本教程，我的app.module.ts完全匹配github tutorial has以及完全相同的chat.service.ts file，但我的Read here for more information on it除外equations 1}}而不是'angularfire2/database-deprecated'。我从哪里开始？这是我的完整app.module.ts文件

'angularfire2/database'

和我的聊天服务文件

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

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

import { AppComponent } from './app.component';
import { ChatFormComponent } from './chat-form/chat-form.component';
import { ChatRoomComponent } from './chat-room/chat-room.component';
import { MessagesFeedComponent } from './messages-feed/messages-feed.component';
import { MessageComponent } from './message/message.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { NavigationComponent } from './navigation/navigation.component';
import { UserListComponent } from './user-list/user-list.component';
import { UserItemComponent } from './user-item/user-item.component';
import { ChatService } from './services/chat.service';
import { AuthService } from './services/auth.service';
import { appRoutes } from '../routes';
import { environment } from '../environments/environment';


@NgModule({
  declarations: [
    AppComponent,
    ChatFormComponent,
    ChatRoomComponent,
    MessagesFeedComponent,
    MessageComponent,
    LoginComponent,
    SignupComponent,
    NavigationComponent,
    UserListComponent,
    UserItemComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    FormsModule,
    AngularFireModule,
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    AngularFireModule.initializeApp(environment.firebase)
  ],
  providers: [AuthService, ChatService],
  bootstrap: [AppComponent]
})
export class AppModule { }

2 个答案:

答案 0 :(得分：3)

明确导入。使用相同的包导入相同的模块。 根据您的代码：

import { AngularFireDatabaseModule } from 'angularfire2/database';

在服务中你做：

import { AngularFireDatabaseModule } from 'angularfire2/database-deprecated';

从其他两个软件包＆＃39;数据库＆＃39;导入的AngularFireDatabaseModule和＆＃39;数据库已弃用＆＃39;分别

答案 1 :(得分：0)

坚持您进口的内容以及您使用的内容

确保您在所有位置导入相同的Angularfire2和Firebase程序包。在提供的快照中，您可以在NgModule中执行

import { AngularFireDatabaseModule } from 'angularfire2/database';

但是在你做的服务中

import { AngularFireDatabaseModule } from 'angularfire2/database-deprecated';

使用最新的工作依赖

你的GitHub仓库上的package.json看起来像使用旧包，请更新。

考虑其他选项 此外，您可以考虑使用Firestore而不是旧的实时数据库，但请注意，这些是两个不同的东西，它们需要不同的实现。

<强> IDEA

尝试使用package.json

中的以下依赖项更新项目

＆＃13;
＆＃13; 
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "angularfire2": "^5.0.0-rc.5-next",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.3",
    "firebase": "4.8.0",
    "intl": "^1.2.5",
    "rxjs": "^5.5.6",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.4",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "^2.8.4",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^9.3.0",
    "codelyzer": "^4.0.2",
    "jasmine-core": "^2.8.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.3",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.2.2",
    "ts-node": "^4.1.0",
    "tslint": "^5.9.1",
    "typescript": "^2.6.2"
  }
＆＃13;
＆＃13;
＆＃13;

真的，＆＃34; firebase＆＃34;：＆＃34; 4.8.0＆＃34;很重要我添加的其余部分是polyfill和一般软件包的更新（如果你不熟悉最新的不稳定版本，你不必使用它们）。你可以覆盖你的package.json并运行npm install。

然后只需将Firebase导入您的主AppModule，如下所示：

＆＃13;
＆＃13; 
// General
import { BrowserModule           } from '@angular/platform-browser';
import { NgModule                } from '@angular/core';
import { AppComponent            } from './app.component';

// Firebase
import { AngularFireModule       } from 'angularfire2';
import { AngularFireAuthModule   } from 'angularfire2/auth';
import { AngularFirestoreModule  } from 'angularfire2/firestore';
import { environment             } from '../environments/environment';

@NgModule({
  declarations : [
               AppComponent,
               ...
             ],
  imports      : [
               BrowserModule,
               ...,
               AngularFireModule.initializeApp(environment.firebase),
               AngularFireAuthModule,
               AngularFirestoreModule,
               ...
             ],
  providers    : [ ... ],
  bootstrap    : [ AppComponent  ]
})
export class AppModule { }
＆＃13;
＆＃13;
＆＃13;

如果需要，可以从Firebase添加所有相关模块（我只是将Auth和Firestore放到示例中）。

您应该可以在这样的服务中使用它：

＆＃13;
＆＃13; 
import { Injectable                    } from '@angular/core';
import { AngularFirestore,
         AngularFirestoreCollection,
         AngularFirestoreDocument      } from 'angularfire2/firestore';
import * as firebase from 'firebase';

@Injectable()
export class SomeService {

  constructor( private _fireStore: AngularFirestore ) { }
               
               ... some code ...
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题