This is not a duplicate of How to initialise Firebase App Check in Angular because I can successfully initialise an app using reCAPTCHA Enterprise. This question is about initialising an app using the Debug Provider.
The Firebase documentation recommends using the Debug Provider when testing from localhost. Specifically
In your debug build, enable debug mode by setting
self.FIREBASE_APPCHECK_DEBUG_TOKENto true before you initialize App Check. For example:
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
initializeAppCheck(app, { /* App Check options */ });
How can this be achieved in an Angular application? It's not clear what self is referencing or where this code snippet should be placed.
After a few experiments and guesses, setting FIREBASE_APPCHECK_DEBUG_TOKEN on the window object worked. I did this by adding the following to my app.component.ts constructor
(<any>window).FIREBASE_APPCHECK_DEBUG_TOKEN = true;
The precise code to extend the window object may change over time, but I took this syntax from How do you explicitly set a new property on window in TypeScript?.