Angular firebase 托管 AT(...)firestore 不是一个函数

Question

我为测试 firebase 功能创建了 angular 应用程序，并将此应用程序部署在 firebase 托管上。几乎所有工作都需要 Firestore 功能。 这是错误

main.8ae925009adf8b80e1bc.js:1 ERROR Error: Uncaught (in promise): TypeError: AT(...).firestore is not a function
TypeError: AT(...).firestore is not a function

我不知道为什么会出现这个错误。在我当地的环境中，一切正常。这是应用程序https://elevated-analog-119716.firebaseapp.com的链接

我用这个库

"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/cdk": "~7.3.7",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/fire": "^5.2.1",
"@angular/forms": "~7.2.0",
"@angular/http": "~7.2.0",
"@angular/material": "^7.3.7",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@ngxs/store": "^3.4.3",
"angularfire2": "^5.2.1",
"core-js": "^2.5.4",
"firebase": "^6.2.2",
"nativescript-angular": "~7.2.0",
"nativescript-theme-core": "~1.0.4",
"reflect-metadata": "~0.1.12",
"rxjs": "~6.3.3",
"tns-core-modules": "~5.2.0",
"zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "^7.2.0",
    "@angular/compiler-cli": "~7.2.0",
    "@angular-devkit/build-angular": "~0.11.4",
    "@nativescript/schematics": "~0.4.0",
    "@types/jasmine": "2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "nativescript-dev-typescript": "~0.8.0",
    "nativescript-dev-webpack": "^0.20.0",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~3.1.1"
  }

这是我的应用模块

    @NgModule({
  declarations: [
    AppComponent,
    MenuComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    BrowserAnimationsModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    HomeModule,
    PolicyListModule,
    MatTableModule,
    AddUserModule
  ],
  providers: [PolicyService, AngularFirestore],
  bootstrap: [AppComponent]
})

这是 usersService 我调用数据的地方

constructor(private firestore: AngularFirestore) {}
    getUsers(): Observable<any> {
        return this.firestore.collection('user', x => x.orderBy('jerk', 'asc')).snapshotChanges();
    }

这是来自组件的代码

  ngOnInit() {
    this.db.getUsers().subscribe(v => this.items = v.map(v =>{
      const data = v.payload.doc.data();
      data.id = v.payload.doc.id;
      return data;
    }));
  }

Answer 1

不需要提供者AngularFirestore 它已经在模块AngularFirestoreModule 中声明，记住现在你正在导入错误的模块。 PolicyService 可能相同，但我不确定不知道这个模块。

通过导入AngularFireDatabaseModule，您可以编写查询，如this.db.list 或this.db.object，当您导入AngularFirestoreModule 时，您可以编写查询，如this.db.collection，或者如果您需要一份文档this.db.doc

粘贴到服务文件中：

  addKeyToObject = _ => {
    const object = _.payload.val()
    object.key = _.payload.key;
    return object;
  }

  constructor(private firestore: AngularFirestore) { }

  getUsers(): Observable<any[]> {
    return this.firestore.collection('user', x => x.orderBy('jerk', 'asc')).snapshotChanges()
      .pipe(map(actions => actions.map(this.addKeyToObject)))
  }

如果这是一个服务文件，你可能想在 providers: [UsersService] 的 app.module.ts 中声明它

在component.ts中：

  users$: Observable<any[]>

  constructor(private db: AngularFirestore) { }

  ngOnInit() {
    this.users$ = this.db.getUsers()
  }

在这个组件的模板中：

<div *ngFor="let user of users$ | async">
  <p>User id: {{user.id}}</p>
</div>

| async 是一个管道，它将阻止您订阅 Observable。 如果你真的想订阅，你需要取消订阅。

版主删除了我上一个答案，所以我发布了新答案。 ;] 糟糕的是我无法在帖子中发表评论。 ;/