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: "AIzaSyBh0YiQLpr9G0_UL7dyk-H2Wjr8sEP7MGI",
authDomain: "empleados-1b838.firebaseapp.com",
projectId: "empleados-1b838",
storageBucket: "empleados-1b838.appspot.com",
messagingSenderId: "921842385340",
appId: "1:921842385340: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