Estoy haciendo mi primer proyecto en angular con firebase, estoy metiendo un servicio para meter documentos a mi base de datos
firestore.service.ts
import { Firestore, collection, collectionData } from '@angular/fire/firestore';
import { UserI } from '../models/users.model';
import { addDoc, deleteDoc, doc } from 'firebase/firestore';
@Injectable({
providedIn: 'root'
})
export class FirestoreService {
constructor(private firestore: Firestore) { }
async crearUsuario(user : UserI){
let col = collection(this.firestore,'Usuarios');
const docRef = await addDoc(col, user);
return docRef.id;
}
obtenerDocumentos(path: string){
let col = collection(this.firestore, path);
return collectionData(col,{idField:'id'});
}
borrarDoc(id: string, path: string){
let docRef = doc(this.firestore, path +'/'+id)
return deleteDoc(docRef);
}
}
y le puse en los providers en el app.component.ts debido a que no tengo el app.module, saben que le podria hacer para resolverlo
import { Component, OnInit } from "@angular/core";
import { RouterLink, RouterOutlet } from "@angular/router";
import { HttpClientModule } from "@angular/common/http";
import { CommonModule } from '@angular/common';
import { RegisterComponent } from "./pages/register/register.component";
import firebase from 'firebase/compat/app'
import { FirestoreService } from "./services/firestore.service";
import { Firestore, FirestoreModule, getFirestore } from "@angular/fire/firestore";
@Component({
selector: "app-root",
standalone: true,
imports: [
RegisterComponent,
],
providers: [Firestore],
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"], // Corregido a 'styleUrls' y debe ser un array.
})
export class AppComponent implements OnInit {
title = "develaware.com";
constructor(){}
ngOnInit(): void {
firebase.initializeApp({
apiKey: "AIzaSyCzi_PropLAWTowzhfmRrpbI1B-Lc0l-Rs",
authDomain: "develaware-228cc.firebaseapp.com",
databaseURL: "https://develaware-228cc-default-rtdb.firebaseio.com",
})
}
}
Pero cuando lo corro me sale este error
Cuando le quito ese provider me sale
este error me sale cuando entro al register component, el primer error sale cuando quiero correr el proyecto,adjunto tambien el registercomponent para mas info
import { NgFor } from '@angular/common';
import { Component, Injectable } from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';
import { UserI } from '../../models/users.model';
import { LoginService } from '../login/login.service';
import { FirestoreService } from '../../services/firestore.service';
@Component({
selector: 'app-register',
standalone: true,
imports: [
FormsModule,
NgFor,
],
templateUrl: './register.component.html',
styleUrl: './register.component.css'
})
@Injectable({
providedIn: 'root'
})
export class RegisterComponent {
datos: UserI = {
uid: '',
nombre: '',
correo: '',
password: '',
perfil: 'visitante'
}
constructor(private loginService:LoginService, private firestore: FirestoreService){}
async registrar(form: NgForm){
this.datos.correo = form.value.email
this.datos.nombre = form.value.name
const password = form.value.password
this.datos.password = null
// console.log(email, nombre, password)
const res = await this.loginService.registerUser(this.datos.correo, password)
.catch(
error=>{
console.log('error' + error)
})
if(res){
console.log(res)
await this.firestore.crearUsuario(this.datos)
.catch(
error=>{
console.log('error' + error)
})
}
// this.loginService.login(email, password);
}
}
firestore: Firestore = inject(Firestore);
en lugar de llamarlo en el constructor, bien reinstalando connpm i @angular/[email protected]
ya que AngularFire todavía no sale para Angular 17 (si checas en npm desde Angular 14 están en la versión 7.4) o creando un archivo de configuración para eso como indican en esta pregunta firebase - Installing Angular/Fire into Angular 17 - Stack Overflow.