Angular Firebase Hosting AT(...)firestore Is Not A Function
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
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.
Moderator Deleted my last answer so i posted new one. ;] Bad that i can't comment in posts. ;/
Related Questions
- → Make a Laravel collection into angular array (octobercms)
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → Angularjs not working inside laravel form
- → Analysis of Flux implementations
- → how to write react component to construct HTML DOM
- → angular ng-repeat and images in a row
- → Conditional BG Color on AngularJS
- → Should I 'use strict' for every single javascript function I write?
- → getting the correct record in Angular with a json feed and passed data
- → "Undefined is not a function" at .toBe fucntion
- → angularjs data binding issue
- → Angular / JavaScript auto hydrate an instance
- → Convert generic text string in json object into valid url using Angular