Angular 11 firebase site not launching - angularfire

Question

I've been working on an Angular11 firebase website, and I have managed to break something that has completely lost me. I did an npm audit that managed to break everything
I've tried removing and reinstalling everything I can, as well as starting a new project and readding
The Error:
TypeError: Cannot read property 'toString' of undefined
at new AngularFireModule (c:\nodejs\pt-web\node_modules\#angular\fire\__ivy_ngcc__\fesm2015\angular-fire.js:481:17)
at Object.factory (c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:11332:1)
at R3Injector.hydrate (c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:11385:1)
at R3Injector.get (c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:11205:1)
at c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:11242:1
at Set.forEach (<anonymous>)
at R3Injector._resolveInjectorDefTypes (c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:11242:1)
at new NgModuleRef$1 (c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:25228:1)
at NgModuleFactory$1.create (c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:25282:1)
at http://localhost:4200/vendor.js:114008:45 {stack: 'TypeError: Cannot read property 'toString' of… at http://localhost:4200/vendor.js:114008:45', message: 'Cannot read property 'toString' of undefined'}
arg0: TypeError: Cannot read property 'toString' of undefined
at new AngularFireModule (http://localhost:4200/vendor.js:138898:118)
at Object.factory (http://localhost:4200/vendor.js:96231:58)
at R3Injector.hydrate (http://localhost:4200/vendor.js:96284:35)
at R3Injector.get (http://localhost:4200/vendor.js:96104:33)
at http://localhost:4200/vendor.js:96141:55
at Set.forEach (<anonymous>)
at R3Injector._resolveInjectorDefTypes (http://localhost:4200/vendor.js:96141:31)
at new NgModuleRef$1 (http://localhost:4200/vendor.js:110127:26)
at NgModuleFactory$1.create (http://localhost:4200/vendor.js:110181:16)
at http://localhost:4200/vendor.js:114008:45 {stack: 'TypeError: Cannot read property 'toString' of… at http://localhost:4200/vendor.js:114008:45', message: 'Cannot read property 'toString' of undefined'}
message: 'Cannot read property 'toString' of undefined'
stack: 'TypeError: Cannot read property 'toString' of undefined\n at new AngularFireModule (http://localhost:4200/vendor.js:138898:118)\n at Object.factory (http://localhost:4200/vendor.js:96231:58)\n at R3Injector.hydrate (http://localhost:4200/vendor.js:96284:35)\n at R3Injector.get (http://localhost:4200/vendor.js:96104:33)\n at http://localhost:4200/vendor.js:96141:55\n at Set.forEach (<anonymous>)\n at R3Injector._resolveInjectorDefTypes (http://localhost:4200/vendor.js:96141:31)\n at new NgModuleRef$1 (http://localhost:4200/vendor.js:110127:26)\n at NgModuleFactory$1.create (http://localhost:4200/vendor.js:110181:16)\n at http://localhost:4200/vendor.js:114008:45'
__proto__: Error
<anonymous> # c:\nodejs\pt-web\src\main.ts:12:25
invoke # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:364
run # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:123
<anonymous> # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:857
invokeTask # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:399
runTask # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:167
drainMicroTaskQueue # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:569
◀ Promise.then ▶
scheduleMicroTask # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:552
scheduleTask # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:388
scheduleTask # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:210
scheduleMicroTask # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:230
scheduleResolveOrReject # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:847
then # c:\nodejs\pt-web\node_modules\zone.js\dist\zone-evergreen.js:979
bootstrapModule # c:\nodejs\pt-web\node_modules\#angular\core\__ivy_ngcc__\fesm2015\core.js:29159
zUnb # c:\nodejs\pt-web\src\main.ts:11:26
__webpack_require__ # c:\nodejs\pt-web\webpack\bootstrap:84
0 # localhost꞉4200/main.js:11:18
__webpack_require__ # c:\nodejs\pt-web\webpack\bootstrap:84
checkDeferredModules # c:\nodejs\pt-web\webpack\bootstrap:45
webpackJsonpCallback # c:\nodejs\pt-web\webpack\bootstrap:32
<anonymous> # localhost꞉4200/main.js:1:57
[WDS] Live Reloading enabled.
package.json
{
"name": "mega-able",
"version": "1.3.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.1.0",
"#angular/animations": "^11.1.2",
"#angular/common": "^11.1.2",
"#angular/compiler": "^11.1.2",
"#angular/core": "^11.2.7",
"#angular/fire": "^6.1.4",
"#angular/forms": "^11.1.2",
"#angular/localize": "^11.2.7",
"#angular/platform-browser": "^11.1.2",
"#angular/platform-browser-dynamic": "^11.1.2",
"#angular/router": "^11.1.2",
"#fullcalendar/angular": "^5.6.0",
"#fullcalendar/core": "^5.6.0",
"#fullcalendar/daygrid": "^5.6.0",
"#fullcalendar/interaction": "^5.6.0",
"#fullcalendar/timegrid": "^5.6.0",
"#ng-bootstrap/ng-bootstrap": "^7.0.0",
"#swimlane/ngx-datatable": "^17.1.0",
"angular": "^1.8.2",
"angular-archwizard": "^6.1.0",
"angular-datatables": "^9.1.1",
"angular-pell": "^0.1.0",
"angular-tree-component": "^8.5.6",
"angular2-chartjs": "^0.5.1",
"angular2-text-mask": "^9.0.0",
"bootstrap": "^4.6.0",
"c3": "^0.7.20",
"d3": "^5.16.0",
"datatables.net": "^1.10.24",
"datatables.net-buttons": "^1.7.0",
"datatables.net-buttons-dt": "^1.7.0",
"datatables.net-colreorder": "^1.5.3",
"datatables.net-dt": "^1.10.24",
"datatables.net-responsive": "^2.2.7",
"datatables.net-select": "^1.3.3",
"famfamfam-flags": "^1.0.0",
"firebase": "^8.3.1",
"firebaseui": "^4.8.0",
"font-awesome-scss": "^1.0.0",
"fullcalendar": "^5.6.0",
"hammerjs": "^2.0.8",
"jquery": "^3.6.0",
"jszip": "^3.6.0",
"netmask": "^2.0.1",
"ng-click-outside": "^6.0.0",
"ng-select": "^1.0.2",
"ng2-currency-mask": "^9.0.2",
"ng2-dragula": "^1.5.0",
"ng2-file-upload": "^1.4.0",
"ng2-google-charts": "^6.1.0",
"ng2-nouislider": "^1.8.3",
"ng2-toasty": "^4.0.3",
"ngx-bar-rating": "^1.1.0",
"ngx-chips": "^2.2.2",
"ngx-color-picker": "^9.1.0",
"ngx-custom-validators": "^9.1.0",
"ngx-lightbox": "^2.2.2",
"ngx-perfect-scrollbar": "^8.0.0",
"node-sass": "^4.14.1",
"nouislider": "^14.6.4",
"rxjs": "^6.6.7",
"rxjs-compat": "^6.6.7",
"screenfull": "^5.1.0",
"sweetalert2": "^9.17.2",
"text-mask-addons": "^3.8.0",
"tslib": "^2.1.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/architect": "^0.1102.6",
"#angular-devkit/build-angular": "^0.1101.4",
"#angular/cli": "^11.2.6",
"#angular/compiler-cli": "^11.1.2",
"#types/datatables.net": "^1.10.19",
"#types/datatables.net-buttons": "^1.4.5",
"#types/jasmine": "^3.6.9",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.5.5",
"#types/node": "^12.20.7",
"codelyzer": "^6.0.1",
"firebase-tools": "^9.8.0",
"fuzzy": "^0.1.3",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.2.3",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"open": "^7.4.2",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "^6.1.3",
"typescript": "4.1.2"
}
}
main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
I'm completely lost now, hoping someone here can see the obvious thing I'm sure I am missing

Answer 1

Check angular and firebase #angular/fire compatibility issues
AngularFire doesn't follow Angular's versioning as Firebase also has breaking changes throughout the year. Instead we try to maintain compatibility with both Firebase and Angular majors for as long as possible, only breaking when we need to support a new major of one or the other.
See here:
https://github.com/angular/angularfire#compatibility