1

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 introducir la descripción de la imagen aquí

Cuando le quito ese provider me sale introducir la descripción de la imagen aquí

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

1
  • Prueba usando firestore: Firestore = inject(Firestore); en lugar de llamarlo en el constructor, bien reinstalando con npm 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.
    – René
    Commented el 31 mar. a las 8:26

1 respuesta 1

0

Use la función inject:

export class AppComponent {
  title = 'venezuela-libre.com';
  firestore = inject(Firestore);
  auth = inject(AngularFireAuth);
  firebaseService = inject(FirebaseService);
1
  • ¡El lenguaje del sitio es el español! Traduce tu respuesta.
    – padaleiana
    Commented el 31 jul. a las 19:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.