1

Cordial saludo estimados.

Solo llevo unas cuantas horas aprendiendo Angular, estoy siguiendo un video-tutorial de iniciación. Presento un error: Property 'collection' does not exist on type 'AngularFirestoreModule' cuando inicializo la variable que contendrá la colección desde firebase

Dejo los codigos para su revisión, quedo atento a sus comentarios

Codigo del compoente con el error:

   import { AngularFirestoreModule } from '@angular/fire/firestore';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-list-empleados',
  templateUrl: './list-empleados.component.html',
  styleUrls: ['./list-empleados.component.css']
})
export class ListEmpleadosComponent implements OnInit {
  // posible fix: https://stackoverflow.com/questions/59322583/cannot-find-angular-fire-firestore-module-error-in-vscode
  // variable de tipo obervable: configuración de firebase, se debe inicializar en el constructor
  items: Observable<any[]>;
  constructor( db: AngularFirestoreModule ) {
    this.items = db.collection('items').valueChanges();
   }

  ngOnInit(): void {
  }

}

Aqui la configuración del app modul ts:

    import { environment } from './../environments/environment';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// modulos
import { AppRoutingModule } from './app-routing.module';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/database';

// componentes
import { AppComponent } from './app.component';
import { ListEmpleadosComponent } from './components/list-empleados/list-empleados.component';
import { CreateEmpleadoComponent } from './components/create-empleado/create-empleado.component';
import { NavbarComponent } from './components/navbar/navbar.component';

@NgModule({
  declarations: [
    AppComponent,
    ListEmpleadosComponent,
    CreateEmpleadoComponent,
    NavbarComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

La configuración del entorno:

 // This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false,
  firebase: {
    apiKey: "fsdfdfds-fsdfsd-fdsfdsfdsf",
    authDomain: "dfsd-fdfdsfds.firebaseapp.com",
    projectId: "ffrgre-gregergr",
    storageBucket: "gdfgdfgd-gggfd.appspot.com",
    messagingSenderId: "dfsf4",
    appId: "1:gdrdrd4444:web:6c099d16cb56de4534abb9"
  }
};

/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

Y package.json

 {
  "name": "empleados",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.5",
    "@angular/common": "~10.0.5",
    "@angular/compiler": "~10.0.5",
    "@angular/core": "~10.0.5",
    "@angular/fire": "^6.1.4",
    "@angular/forms": "~10.0.5",
    "@angular/platform-browser": "~10.0.5",
    "@angular/platform-browser-dynamic": "~10.0.5",
    "@angular/router": "~10.0.5",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3",
    "firebase": "^7.0 || ^8.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.4",
    "@angular/cli": "~10.0.4",
    "@angular/compiler-cli": "~10.0.5",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5",
    "@angular-devkit/architect": ">= 0.900 < 0.1200",
    "firebase-tools": "^8.0.0",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1",
    "open": "^7.0.3"
  }
}

Agradecería mucho de su asesoría o solución, muchas gracias

2
  • Hola, te recomiendo de forma urgente que no publiques las API keys de tu proyecto de firebase, ya que es información sensible. Cámbialas por datos de prueba como "asdasdasd" Commented el 11 dic. 2020 a las 19:10
  • 1
    Y si es posible vuelve a generar las credenciales del proyecto, asi te aseguras que nadie que haya entrado aquí utilice las credenciales publicadas. Commented el 12 dic. 2020 a las 0:37

1 respuesta 1

1

En vez de usar AngularFirestoreModule en el constructor:

  constructor( db: AngularFirestoreModule ) {
    this.items = db.collection('items').valueChanges();
   }

Debes utilizar AngularFirestore:

  constructor( db: AngularFirestore ) {
    this.items = db.collection('items').valueChanges();
   }

Ya que AngularFirestoreModule solo lo debes usar en el import del modulo padre donde declares tu componente.

Puedes consultar más aquí

2
  • 1
    Cordial saludo Andres, muchas gracias por tu efectiva solución Commented el 11 dic. 2020 a las 20:07
  • Me alegra haberte ayudado Commented el 11 dic. 2020 a las 20:09

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.