How to fix (appCheck/already-initialized) error Angular 17

I created a new angular ssr project and added @angular/fire to it using schematics. The project uses firestore, storage and authentication. I configured the relevant services for app-check and also included my app debug token in the appCheck config in the firebase console.

This is my firebase initialization in my app.config.ts

export const appConfig: ApplicationConfig = {
providers: [
importProvidersFrom(
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() =>
initializeAppCheck(getApp(), {
provider: new ReCaptchaEnterpriseProvider(environment.siteKey),
isTokenAutoRefreshEnabled: true,
})
)
),
]
}


When i run npm start for the first time. It displays the following error.



When I reload the page without any modifications to the code then everything displays fine. But when I make any changes to the code and reload the page, then this happens.



That error persists until you kill the terminal and run npm start again and repeat the process above

I've tried checking for existing apps while initializing appCheck as below but it still leads to the same results.

provideAppCheck(() =>
initializeAppCheck(
getApps().length === 0
? initializeApp(environment.firebase)
: getApp(),
{
provider: new ReCaptchaEnterpriseProvider(environment.siteKey),
isTokenAutoRefreshEnabled: true,
}
)
)

Continue reading...