i am follwing this document to rtrieve data in firestore https://www.bezkoder.com/angular-17-firestore-crud/ but I am unable to retrieve it except the type error
export interface FireHerosectionsInterface
{
key?: string | null,
brand?: string | null,
text_1?: string | null,
text_2?: string | null,
text_3?: string | null,
text_4?: string | null,
// text_5?: string | null,
path?: string | null,
}
.........
export default class HerosectionsComponent implements OnInit {
[x: string]: any;
httpClient = inject(HttpClient);
firestore = inject(Firestore);
iFireHerosections?: FireHerosectionsInterface[];
cFireHerosections?: FireHerosectionsInterface
currentIndex = -1;
title = '';
items$!: Observable<any[]>;
constructor(private primengConfig: PrimeNGConfig, private CadenticHerosectionDataService: CadenticHerosectionDataService) { }
ngOnInit() {
this.primengConfig.ripple = true;
this.primengConfig.zIndex = {
modal: 1100, // dialog, sidebar
overlay: 1000, // dropdown, overlaypanel
menu: 1000, // overlay menus
tooltip: 1100 // tooltip
};
this.retrieveCadenticHerosectionData();
}
ngOnChanges(): void {
}
refreshList(): void {
this.cFireHerosections = undefined;
this.currentIndex = -1;
this.retrieveCadenticHerosectionData();
}
retrieveCadenticHerosectionData(): void {
this.CadenticHerosectionDataService.getAllCadenticHerosectionData().snapshotChanges().pipe(
map(changes =>
changes.map(c =>
({ id: c.payload.doc.id, ...c.payload.doc.data() })
)
)
).subscribe(data => {
this.iFireHerosections = data;
console.log(this.iFireHerosections)
console.log(data)
});
console.log(this.iFireHerosections)
}
}`
and the service that i have planted
`import { Injectable } from '@angular/core';
import { AngularFireDatabaseModule, AngularFireDatabase, AngularFireList} from '@angular/fire/compat/database';
import {AngularFirestore,AngularFirestoreCollection, QuerySnapshot } from '@angular/fire/compat/firestore';
//import { AngularFirestore } from '@angular/fire/firestore';
import { FireHerosectionsInterface } from '../models/cadentic-herosection-datamodel/cadentic-herosection-data.model';
import { HttpClient } from '@angular/common/http';
import { map, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class CadenticHerosectionDataService {
private dbPath= '/FireHerosections';
// messages: AngularFireList<any> | undefined
// FireHerosectionsRef!: AngularFireList<FireHerosectionsInterface>;
FireHerosectionsInterfaceRef: AngularFirestoreCollection<FireHerosectionsInterface> ;
constructor(private http: HttpClient,private db: AngularFireDatabase, private afs:AngularFirestore ) {
this.FireHerosectionsInterfaceRef = afs.collection(this.dbPath);
}
getAllCadenticHerosectionData(): AngularFirestoreCollection<FireHerosectionsInterface> {
return this.FireHerosectionsInterfaceRef;
}
}
pckage.json
{
"name": "wired testing hereo",
"version": "9.5.0 - Alpha",
"Author": "testing more and more no outcome"
"Description": "Static Home Page",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"serve:ssr:cadentic_dot_net_in": "node dist/cadentic_dot_net_in/server/server.mjs"
},
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "^17.3.4",
"@angular-eslint/eslint-plugin": "17.4.0",
"@angular-eslint/eslint-plugin-template": "17.4.0",
"@angular-eslint/schematics": "17.4.0",
"@angular-eslint/template-parser": "17.4.0",
"@angular/animations": "^17.3.4",
"@angular/cdk": "^17.3.4",
"@angular/common": "^17.3.4",
"@angular/compiler": "^17.3.4",
"@angular/core": "^17.3.4",
"@angular/fire": "^17.1.0",
"@angular/forms": "^17.3.0",
"@angular/material": "^17.3.4",
"@angular/platform-browser": "^17.3.4",
"@angular/platform-browser-dynamic": "^17.3.4",
"@angular/platform-server": "^17.3.4",
"@angular/router": "^17.3.4",
"@angular/ssr": "^17.3.4",
"@ibm/plex": "^6.4.0",
"@igniteui/material-icons-extended": "^3.0.0",
"@material-tailwind/html": "^2.2.2",
"@ngrx/operators": "^17.2.0",
"@ngrx/signals": "^17.2.0",
"@ngx-prism/core": "^2.0.1",
"@types/marked": "^6.0.0",
"@types/quill": "^2.0.14",
"angular-google-tag-manager": "^1.9.0",
"chart.js": "3.3.2",
"clipboard": "^2.0.11",
"codelyzer": "^0.0.28",
"del": "^7.1.0",
"domino": "^2.1.6",
"emoji-toolkit": "^8.0.0",
"esbuild": "^0.21.3",
"express": "^4.18.2",
"fflate": "^0.8.1",
"firebase": "^10.12.1",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-flatten": "^0.4.0",
"gulp-rename": "^2.0.0",
"gulp-uglify": "^3.0.2",
"gulp-uglifycss": "^1.1.0",
"hammerjs": "^2.0.8",
"igniteui-angular": "^17.2.4",
"katex": "^0.16.10",
"marked": "^12.0.2",
"mermaid": "^10.9.0",
"minireset.css": "~0.0.4",
"ng-katex": "^2.0.3",
"ng-recaptcha": "^13.2.1",
"ngx-markdown": "^17.2.1",
"ngx-prism": "^0.0.1",
"ngx-store": "^3.1.1",
"ngx-toastr": "^18.0.0",
"primeflex": "^3.3.1",
"primeicons": "^7.0.0",
"primeng": "^17.17.0",
"prismjs": "^1.29.0",
"protobufjs": "^7.3.0",
"quill": "^2.0.1",
"rxjs": "^7.8.1",
"rxjs-compat": "^6.6.7",
"tslib": "^2.3.0",
"zone.js": "~0.14.3",
"@cloudflare/workers-types": "^4.20240423.0",
"wrangler": "^3.50.2",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.13",
"@types/express": "^4.17.17",
"@types/hammerjs": "^2.0.40"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.4",
"@angular/cli": "^17.3.4",
"@angular/compiler-cli": "^17.3.4",
"@cloudflare/workers-types": "^4.20240423.0",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.13",
"@types/express": "^4.17.17",
"@types/hammerjs": "^2.0.40",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"autoprefixer": "^10.4.19",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"postcss": "^8.4.38",
"postcss-import": "^16.1.0",
"postcss-nesting": "^12.1.3",
"tailwindcss": "^3.4.3",
"typescript": "~5.4.2",
"wrangler": "^3.50.2"
}
}
`
is there any clue that would help me to complete the test ?
i was expecting data to be displayed in console so that I can render it into the web-pages howerever I recived an error
core.mjs:6531
ERROR
TypeError: input2.replace is not a function
at stripNewlines (core.mjs:13775:18)
at shorten (core.mjs:13788:13)
at stringifyTNodeAttrs (core.mjs:13593:42)
at describeTNode (core.mjs:13633:27)
at describeExpectedDom (core.mjs:13692:29)
at validateMatchingNode (core.mjs:13461:29)
at locateOrCreateElementNodeImpl (core.mjs:23095:18)
at ɵɵelementStart (core.mjs:22993:20)
at Module.ɵɵelement (core.mjs:23072:5)
at CadenticFooterComponent_Template (cadentic-footer.component.html:3:11)
at executeTemplate (core.mjs:11268:9)
at renderView (core.mjs:12470:13)
at renderComponent (core.mjs:12416:5)
at renderChildComponents (core.mjs:12518:9)
at renderView (core.mjs:12498:13)
at renderComponent (core.mjs:12416:5)
at renderChildComponents (core.mjs:12518:9)
at renderView (core.mjs:12498:13)
at ComponentFactory.create (core.mjs:15859:17)
at ViewContainerRef2.createComponent (core.mjs:16265:47)
at _RouterOutlet.activateWith (router.mjs:2466:31)
at ActivateRoutes.activateRoutes (router.mjs:3080:28)
at router.mjs:3034:12
at Array.forEach ()
at ActivateRoutes.activateChildRoutes (router.mjs:3033:25)
at ActivateRoutes.activate (router.mjs:2944:10)
at router.mjs:2928:120
at map.js:7:37
at OperatorSubscriber2._this._next (OperatorSubscriber.js:15:21)
at Subscriber2.next (Subscriber.js:34:18)
at tap.js:18:28
at OperatorSubscriber2._this._next (OperatorSubscriber.js:15:21)
at Subscriber2.next (Subscriber.js:34:18)
at map.js:7:24
at OperatorSubscriber2._this._next (OperatorSubscriber.js:15:21)
at Subscriber2.next (Subscriber.js:34:18)
at switchMap.js:14:159
at OperatorSubscriber2._this._next (OperatorSubscriber.js:15:21)
at Subscriber2.next (Subscriber.js:34:18)
at map.js:7:24
at OperatorSubscriber2._this._next (OperatorSubscriber.js:15:21)
at Subscriber2.next (Subscriber.js:34:18)
at innerFrom.js:61:28
at _ZoneDelegate.invoke (zone.js:368:26)
at Object.onInvoke (core.mjs:14882:33)
at _ZoneDelegate.invoke (zone.js:367:52)
at _Zone.run (zone.js:130:43)
at zone.js:1260:36
at _ZoneDelegate.invokeTask (zone.js:403:31)
at core.mjs:14556:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:14556:36)
at _ZoneDelegate.invokeTask (zone.js:402:36)
at Object.onInvokeTask (core.mjs:14869:33)
at _ZoneDelegate.invokeTask (zone.js:402:36)
at _Zone.runTask (zone.js:174:47)
at drainMicroTaskQueue (zone.js:582:35)
handleError @ core.mjs:6531
Show less
Sayantan Chakraborty is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.