Se esta haciendo el proceso de actualizacion de toda una aplicacion. Se realizo la configuracion de firebase indicada en la pagina (GitHub - angular/angularfire: The official Angular library for Firebase.), se realiza el login con exito. pero al intentar leer la informacion de una coleccion utilizndo (doc, collection) desde un servicio se retorna un error:
FirebaseError: [code=invalid-argument]: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
Informacion de Ionic:
Ionic:
Ionic CLI : 7.1.1 (C:\Users\admin\AppData\Roaming\nvm\v18.17.1\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 7.3.1
@angular-devkit/build-angular : 16.2.0
@angular-devkit/schematics : 16.2.0
@angular/cli : 16.2.0
@ionic/angular-toolkit : 9.0.0
Capacitor:
Capacitor CLI : 5.3.0
@capacitor/android : 5.3.0
@capacitor/core : 5.3.0
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 1.7.2
System:
NodeJS : v18.17.1 (C:\Program Files\nodejs\node.exe)
npm : 9.6.7
OS : Windows 10
informacion Angular
Angular CLI: 16.2.0
Node: 18.17.1
Package Manager: npm 9.6.7
OS: win32 x64
Informacion packaje.json
{
“name”: “AppName”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “https://ionicframework.com/”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“watch”: “ng build --watch --configuration development”,
“test”: “ng test”,
“lint”: “ng lint”
},
“private”: true,
“dependencies”: {
“@angular/animations”: “^16.0.0”,
“@angular/common”: “^16.0.0”,
“@angular/compiler”: “^16.0.0”,
“@angular/core”: “^16.0.0”,
“@angular/fire”: “^7.6.1”,
“@angular/forms”: “^16.0.0”,
“@angular/platform-browser”: “^16.0.0”,
“@angular/platform-browser-dynamic”: “^16.0.0”,
“@angular/router”: “^16.0.0”,
“@capacitor/android”: “^5.3.0”,
“@capacitor/app”: “^5.0.6”,
“@capacitor/core”: “5.3.0”,
“@capacitor/haptics”: “5.0.6”,
“@capacitor/keyboard”: “5.0.6”,
“@capacitor/status-bar”: “5.0.6”,
“@fortawesome/angular-fontawesome”: “^0.13.0”,
“@fortawesome/fontawesome-svg-core”: “^6.4.2”,
“@fortawesome/free-brands-svg-icons”: “^6.4.2”,
“@fortawesome/free-regular-svg-icons”: “^6.4.2”,
“@fortawesome/free-solid-svg-icons”: “^6.4.2”,
“@ionic/angular”: “^7.0.0”,
“firebase”: “^10.4.0”,
“ionicons”: “^7.0.0”,
“rxjs”: “~7.8.0”,
“tslib”: “^2.3.0”,
“zone.js”: “~0.13.0”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “^16.0.0”,
“@angular-eslint/builder”: “^16.0.0”,
“@angular-eslint/eslint-plugin”: “^16.0.0”,
“@angular-eslint/eslint-plugin-template”: “^16.0.0”,
“@angular-eslint/schematics”: “^16.0.0”,
“@angular-eslint/template-parser”: “^16.0.0”,
“@angular/cli”: “^16.0.0”,
“@angular/compiler”: “^16.0.0”,
“@angular/compiler-cli”: “^16.0.0”,
“@angular/language-service”: “^16.0.0”,
“@capacitor/cli”: “5.3.0”,
“@ionic/angular-toolkit”: “^9.0.0”,
“@types/jasmine”: “~4.3.0”,
“@types/node”: “^12.11.1”,
“@typescript-eslint/eslint-plugin”: “5.3.0”,
“@typescript-eslint/parser”: “5.3.0”,
“eslint”: “^7.26.0”,
“eslint-plugin-import”: “2.22.1”,
“eslint-plugin-jsdoc”: “30.7.6”,
“eslint-plugin-prefer-arrow”: “1.2.2”,
“jasmine-core”: “~4.6.0”,
“jasmine-spec-reporter”: “~5.0.0”,
“karma”: “~6.4.0”,
“karma-chrome-launcher”: “~3.2.0”,
“karma-coverage”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “~3.0.2”,
“karma-jasmine”: “~5.1.0”,
“karma-jasmine-html-reporter”: “~2.0.0”,
“ts-node”: “^8.3.0”,
“typescript”: “~5.0.2”
},
“description”: “An Ionic project”
}
App.module
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { RouteReuseStrategy } from ‘@angular/router’;
import { IonicModule, IonicRouteStrategy } from ‘@ionic/angular’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
//TODO:Icons
import { FontAwesomeModule, FaIconLibrary } from ‘@fortawesome/angular-fontawesome’;
import { fas } from ‘@fortawesome/free-solid-svg-icons’;
import { far } from ‘@fortawesome/free-regular-svg-icons’;
import { fab } from ‘@fortawesome/free-brands-svg-icons’;
//TODO: Servicios
import { AuthenticationService } from ‘./services/authentication.service’;
import { CoreService } from ‘./services/core.service’;
import { EventsService } from ‘./services/events.service’;
import { FireBaseService } from ‘./services/fire-base.service’;
import { LocationTrackerService } from ‘./services/location-tracker.service’;
import { ManagementReportErrorsService } from ‘./services/management-report-errors.service’;
import { MsgService } from ‘./services/msg.service’;
import { NetworkService } from ‘./services/network.service’;
import { NotificationsService } from ‘./services/notifications.service’;
import { initializeApp,provideFirebaseApp } from ‘@angular/fire/app’;
import { environment } from ‘…/environments/environment’;
//Angular-Firebase
import { provideAuth,getAuth } from ‘@angular/fire/auth’;
import { provideDatabase,getDatabase } from ‘@angular/fire/database’;
import { provideFirestore,getFirestore } from ‘@angular/fire/firestore’;
import { provideFunctions,getFunctions } from ‘@angular/fire/functions’;
import { provideMessaging,getMessaging } from ‘@angular/fire/messaging’;
import { provideRemoteConfig,getRemoteConfig } from ‘@angular/fire/remote-config’;
import { provideStorage,getStorage } from ‘@angular/fire/storage’;
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
FontAwesomeModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => getAuth()),
provideDatabase(() => getDatabase()),
provideFirestore(() => getFirestore()),
provideFunctions(() => getFunctions()),
provideMessaging(() => getMessaging()),
provideRemoteConfig(() => getRemoteConfig()),
provideStorage(() => getStorage())
],
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
AuthenticationService,
CoreService,
EventsService,
FireBaseService,
LocationTrackerService,
ManagementReportErrorsService,
MsgService,
NetworkService,
NotificationsService
],
bootstrap: [AppComponent],
})
export class AppModule {
constructor(library: FaIconLibrary) {
library.addIconPacks(fas, fab, far);
}
}
serices Auth
import { Injectable, inject } from ‘@angular/core’;
import { Auth, signInWithEmailAndPassword, signOut } from ‘@angular/fire/auth’;
import { Firestore, doc, docData } from ‘@angular/fire/firestore’;
@Injectable({
providedIn: ‘root’
})
export class AuthenticationService {
authenticatedUser:any;
firestore: Firestore = inject(Firestore);
constructor(
private auth:Auth
) { }
async login(email:string, password:string){
try {
const user = await signInWithEmailAndPassword(this.auth, email, password);
this.authenticatedUser = {user: user.user.providerData[0], key: user.user.uid}
return user.operationType;
} catch (err:any) {
return err.code;
}
}
loadProfileData(){
const user = this.auth.currentUser;
const userDocRef = doc(this.firestore, ${user?.uid});
return docData(userDocRef);
}
logout(){
return signOut(this.auth)
}
}
tambien se valido de la forma
import { Injectable, inject } from ‘@angular/core’;
import { Auth, signInWithEmailAndPassword, signOut } from ‘@angular/fire/auth’;
import { Firestore, doc, docData } from ‘@angular/fire/firestore’;
@Injectable({
providedIn: ‘root’
})
export class AuthenticationService {
authenticatedUser:any;
constructor(
private auth:Auth,
private firestore:Firestore
) { }
async login(email:string, password:string){
try {
const user = await signInWithEmailAndPassword(this.auth, email, password);
this.authenticatedUser = {user: user.user.providerData[0], key: user.user.uid}
return user.operationType;
} catch (err:any) {
return err.code;
}
}
loadProfileData(){
const user = this.auth.currentUser;
const userDocRef = doc(this.firestore, ${user?.uid});
return docData(userDocRef);
}
logout(){
return signOut(this.auth)
}
}
que solucion se puede realizar para este problema.
