Recently I updated my angular project from 14 to 15. And I'm getting Error in firebase as Error: Uncaught (in promise): FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app). Angular error after updating angular project from v14 to v15, No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() package.json
{
"name": "learn",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve --host=0.0.0.0 --port=8100 --hmr -o",
"build": "ng build",
"test": "ng test",
"lint": "ng lint --fix",
"e2e": "ng e2e",
"dev": "concurrently --kill-others \"npm run start\" \"npx tailwindcss -i ./src/styles.css -o ./src/theme/output.css --watch\"",
"scully": "npx scully --",
"scully:serve": "npx scully serve --",
"dev:ssr": "ng run app:serve-ssr",
"serve:ssr": "node dist/app/server/main.js",
"build:ssr": "ng build && ng run app:server",
"prerender": "ng run app:prerender"
},
"private": true,
"dependencies": {
"@agm/core": "^3.0.0-beta.0",
"@angular/cdk": "14.0.4",
"@angular/common": "^15.2.10",
"@angular/core": "^15.2.10",
"@angular/fire": "^7.6.0",
"@angular/forms": "^15.2.10",
"@angular/platform-browser": "^15.2.10",
"@angular/platform-browser-dynamic": "^15.2.10",
"@angular/platform-server": "^15.2.10",
"@angular/router": "^15.2.10",
"@fortawesome/fontawesome-free": "^6.2.0",
"@ionic/angular": "^6.1.9",
"@ng-select/ng-select": "^6.1.0",
"@ngrx/effects": "^14.0.2",
"@ngrx/router-store": "^14.0.2",
"@ngrx/schematics": "^14.0.2",
"@ngrx/store": "^14.0.2",
"@ngrx/store-devtools": "^14.0.2",
"@nguniversal/express-engine": "^15.2.1",
"@scullyio/init": "^2.1.41",
"@scullyio/ng-lib": "^2.1.0",
"@scullyio/scully": "^2.1.0",
"@scullyio/scully-plugin-puppeteer": "^2.1.0",
"@sentry/angular": "^7.31.1",
"@sentry/tracing": "^7.31.1",
"@smartbear/browser-info": "^1.5.0",
"@supy-io/ngx-intercom": "^14.2.12",
"@trademe/ng-add-to-calendar": "^3.2.0",
"@types/googlemaps": "3.39.12",
"chart.js": "^3.9.1",
"date-fns": "^2.29.1",
"express": "^4.15.2",
"firebase": "^9.23.0",
"ng2-charts": "^4.0.0",
"ngx-cookie-service": "^14.0.1",
"ngx-youtube-player": "^12.0.2",
"rxjs": "~6.6.0",
"tinymce": "^6.1.2",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.2.11",
"@angular-eslint/builder": "~13.0.1",
"@angular-eslint/eslint-plugin": "~13.0.1",
"@angular-eslint/eslint-plugin-template": "~13.0.1",
"@angular-eslint/template-parser": "~13.0.1",
"@angular/cli": "^15.2.11",
"@angular/compiler": "^15.2.10",
"@angular/compiler-cli": "^15.2.10",
"@angular/language-service": "^15.2.10",
"@ionic/angular-toolkit": "^6.0.0",
"@ngrx/eslint-plugin": "^14.0.2",
"@nguniversal/builders": "^15.2.1",
"@types/express": "^4.17.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"autoprefixer": "^10.4.7",
"concurrently": "^7.2.2",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"postcss": "^8.4.14",
"protractor": "~7.0.0",
"tailwindcss": "^3.1.6",
"ts-node": "~8.3.0",
"typescript": "~4.9.5"
},
"description": "An Ionic project"
}
app.module.ts
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { FIREBASE_OPTIONS } from '@angular/fire/compat';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { EffectsModule } from '@ngrx/effects';
import { StoreRouterConnectingModule } from '@ngrx/router-store';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { NgAddToCalendarModule } from '@trademe/ng-add-to-calendar';
import {
RolesComponentModule,
SelectComponentModule,
UploadComponentModule,
} from 'src/app/components/index';
import {
ImageChangeDirectiveMenuModule,
ImagePreloadDirectiveModule,
TooltipDirectiveModule,
} from 'src/app/directives/index';
import { APP_INITIALIZER, ErrorHandler } from '@angular/core';
import { Router } from '@angular/router';
import { ScullyLibModule } from '@scullyio/ng-lib';
import * as Sentry from '@sentry/angular';
import { NgxYoutubePlayerModule } from 'ngx-youtube-player';
import { environment } from 'src/environments/environment';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SocialMediaComponentModule } from './components/social-media/social-media.component.module';
import { SelectionDirectiveModule } from './directives';
import { InterceptorService } from './pages/app/interceptor/interceptor.service';
import { metaReducers, reducers } from './reducers';
import {
AddToCalendarModule,
AddToCalendarService,
AuthService,
NgrxService,
RudderStack,
} from './services/';
import { ProfileService } from './pages/app/profile/services/profile.service';
import { AngularFireAuthGuardModule } from './auth-guard/auth-guard.module';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
provideFirestore(() => getFirestore()),
StoreModule.forRoot(reducers, { metaReducers }),
StoreRouterConnectingModule.forRoot(),
EffectsModule.forRoot([]),
!environment.production
? StoreDevtoolsModule.instrument({
maxAge: 25,
logOnly: environment.production,
})
: [],
ImagePreloadDirectiveModule,
TooltipDirectiveModule,
SelectComponentModule,
RolesComponentModule,
UploadComponentModule,
SocialMediaComponentModule,
SelectionDirectiveModule,
ImageChangeDirectiveMenuModule,
NgAddToCalendarModule,
AddToCalendarModule,
ScullyLibModule,
NgxYoutubePlayerModule.forRoot(),
AngularFireAuthGuardModule,
],
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{ provide: FIREBASE_OPTIONS, useValue: environment.firebaseConfig },
{ provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true },
NgrxService,
AddToCalendarService,
RudderStack,
ProfileService,
AuthService,
{
provide: ErrorHandler,
useValue: Sentry.createErrorHandler({
showDialog: false,
}),
},
{
provide: Sentry.TraceService,
deps: [Router],
},
{
provide: APP_INITIALIZER,
useFactory: () => () => {},
deps: [Sentry.TraceService],
multi: true,
},
],
bootstrap: [AppComponent],
})
export class AppModule {}
my angular environment is,
