时间戳

首页 > 解决方案 > Angular firebase 托管 AT(...)firestore 不是一个函数

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

问题描述

我为测试 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;
    }));
  }

标签： angulartypescriptfirebasegoogle-cloud-firestoreangularfire2

解决方案

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

通过导入AngularFireDatabaseModule像this.db.listor这样的查询this.db.object，当你导入AngularFirestoreModule像this.db.collectionor 如果你需要一个文档这样的查询时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)))
  }

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

在 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。如果你真的想订阅，你需要取消订阅。

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

推荐阅读