angular-17-crud-example
angular-17-crud-example copied to clipboard
this method doesn't work properly while we will be rendering it to HTML. with curent angular fire version 17.1.0
this method doesn't work properly while we will be rendering it to HTML.
thisSomeDataService.getAllFireHerosections().snapshotChanges().pipe(
map(changes =>
changes.map(c =>
({ key: c.payload.key, ...c.payload.val() })
)
)
).subscribe(data => {
this.iFireHerosections = data;
//console.log(data);
// console.log(this.iFireHerosections );
});
}
setActiveTutorial(tutorial: FireHerosectionsInterface, index: number): void {
this.currentTutorial = tutorial;
this.currentIndex = index;
}
I get an error on browser console
chunk-4OBTQA5K.js:7 ERROR TypeError: t.hasAttribute is not a function
at $f (chunk-4OBTQA5K.js:7:28170)
at lI (chunk-4OBTQA5K.js:7:92011)
at hp (chunk-4OBTQA5K.js:7:91299)
at uI (chunk-4OBTQA5K.js:7:91785)
at template (main-K7LMQDDE.js:208:20)
at Ch (chunk-4OBTQA5K.js:7:46335)
at Au (chunk-4OBTQA5K.js:7:54319)
at iE (chunk-4OBTQA5K.js:7:54127)
at aE (chunk-4OBTQA5K.js:7:54665)
at Au (chunk-4OBTQA5K.js:7:54506)
at iE (chunk-4OBTQA5K.js:7:54127)
at aE (chunk-4OBTQA5K.js:7:54665)
at Au (chunk-4OBTQA5K.js:7:54506)
at xn.create (chunk-4OBTQA5K.js:7:69957)
at Uh.createComponent (chunk-4OBTQA5K.js:7:73089)
at t.activateWith (main-K7LMQDDE.js:2:60320)
at vg.activateRoutes (main-K7LMQDDE.js:2:66621)
at main-K7LMQDDE.js:2:65772
at Array.forEach (<anonymous>)
at vg.activateChildRoutes (main-K7LMQDDE.js:2:65755)
at vg.activate (main-K7LMQDDE.js:2:64431)
at main-K7LMQDDE.js:2:64125
at chunk-4OBTQA5K.js:3:16333
at qn._next (chunk-4OBTQA5K.js:3:5415)
at qn.next (chunk-4OBTQA5K.js:3:2517)
at o.subscribe.a (chunk-4OBTQA5K.js:3:22495)
at qn._next (chunk-4OBTQA5K.js:3:5415)
at qn.next (chunk-4OBTQA5K.js:3:2517)
at chunk-4OBTQA5K.js:3:16326
at qn._next (chunk-4OBTQA5K.js:3:5415)
at qn.next (chunk-4OBTQA5K.js:3:2517)
at V.subscribe.o (chunk-4OBTQA5K.js:3:22064)
at qn._next (chunk-4OBTQA5K.js:3:5415)
at qn.next (chunk-4OBTQA5K.js:3:2517)
at chunk-4OBTQA5K.js:3:16326
at qn._next (chunk-4OBTQA5K.js:3:5415)
at qn.next (chunk-4OBTQA5K.js:3:2517)
at chunk-4OBTQA5K.js:3:14115
at k.invoke (polyfills-RT5I6R6G.js:1:6434)
at Object.onInvoke (chunk-4OBTQA5K.js:7:65054)
at k.invoke (polyfills-RT5I6R6G.js:1:6374)
at se.run (polyfills-RT5I6R6G.js:1:1811)
at polyfills-RT5I6R6G.js:2:556
at k.invokeTask (polyfills-RT5I6R6G.js:1:7059)
at Object.onInvokeTask (chunk-4OBTQA5K.js:7:64870)
at k.invokeTask (polyfills-RT5I6R6G.js:1:6980)
at se.runTask (polyfills-RT5I6R6G.js:1:2424)
at E (polyfills-RT5I6R6G.js:1:9091)
handleError @ chunk-4OBTQA5K.js:7
chunk-K7F2AA7Z.js:1 [2024-05-24T09:27:01.202Z] @firebase/analytics: TypeError: e is not a function
at chunk-K7F2AA7Z.js:1:20317
at Generator.next (<anonymous>)
at n (chunk-FO65GQC2.js:1:765)
at k.invoke (polyfills-RT5I6R6G.js:1:6434)
at Object.onInvoke (chunk-4OBTQA5K.js:7:65054)
at k.invoke (polyfills-RT5I6R6G.js:1:6374)
at se.run (polyfills-RT5I6R6G.js:1:1811)
at polyfills-RT5I6R6G.js:2:556
at k.invokeTask (polyfills-RT5I6R6G.js:1:7059)
at Object.onInvokeTask (chunk-4OBTQA5K.js:7:64870)
at k.invokeTask (polyfills-RT5I6R6G.js:1:6980)
at se.runTask (polyfills-RT5I6R6G.js:1:2424)
at E (polyfills-RT5I6R6G.js:1:9091)
package.json
{
"name": "some sumo",
"version": "9.5.0 - Alpha",
"Author": "leaving my coding hobby ",
"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",
"@firebase/app": "^0.10.3",
"@firebase/auth": "^1.7.3",
"@firebase/database": "^1.0.5",
"@firebase/util": "^1.9.6",
"@ibm/plex": "^6.4.0",
"@material-tailwind/html": "^2.2.2",
"@ngrx/component-store": "^17.2.0",
"@ngrx/effects": "^17.2.0",
"@ngrx/entity": "^17.2.0",
"@ngrx/operators": "^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",
"firebase": "^7.14.2",
"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",
"katex": "^0.16.10",
"marked": "^12.0.2",
"mermaid": "^10.9.0",
"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"
},
"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/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"
}
}
this actually pull the data but same doesn't pass the data back to the HTML template. apart from that the interface must be with all optional field.