Angular firebase hosting AT(...)firestore is not a function

Question

I created angular application for test firebase functions and I deployed this app on firebase hosting. Almost everything working expect firestore function. This is the error

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

I don't know why this error occurse. On my local enviroment everything work poperly. This is link for app https://elevated-analog-119716.firebaseapp.com

I use this library

"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"
  }

This is my app module

    @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]
})

And this is usersService where I call for data

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

And this is code from component

  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

No need provider AngularFirestore it is already declared in module AngularFirestoreModule remember right now you are importing wrong module. could be same about PolicyService but i'm not sure about that don't know this module.

By importing AngularFireDatabaseModule u wrighting querys like this.db.list or this.db.object and when u importing AngularFirestoreModule u wrighting querys like this.db.collection or if u need one document this.db.doc

Paste in service file:

  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)))
  }

if this is an service file u may want to declare it in app.module.ts in providers: [UsersService]

in component.ts:

  users$: Observable<any[]>

  constructor(private db: AngularFirestore) { }

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

in template of this component:

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

| async is a pipe it will prevent you from subscribing to an Observable. If you really want to subscribe you need to unsubscribe to.