How to initialise Firebase App Check in Angular

Issue

I was wondering how can i initialise firebase app check using angular.

I am using angular fire but I am not sure how to initalise firebase app check before using any of the services

the docs have this

Add the following initialization code to your application, before you access any Firebase services.

firebase.initializeApp({
  // Your firebase configuration object
});

const appCheck = firebase.appCheck();
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
appCheck.activate('abcdefghijklmnopqrstuvwxy-1234567890abcd');

But how can this be done in app module. Currently i import angular fire like so

@NgModule({
  declarations: [
   ...
  ],
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
  ],
]

Update:

I know this is probably not yet part of the angular fire library due to how new firebase app-check is but I have noticed there is a native firebase library https://www.npmjs.com/package/@firebase/app-check

I am happy for this to be used (e.g. somehow overriding the native firebase js object) as long as the code is able to apply it in the correct location before any services are called and that it gives no compilation errors in typescript

For reference my versions are as follows:

Angular: 10.2.5

Firebase: 8.6.0

AngularFire: 6.1.5

The debug localhost version must also work

Solution

Do this:

// firebase-initialization.ts
import firebase from 'firebase/app';
import 'firebase/app-check';

// Environment Config
import { environment } from './path/to/environments';

const app = firebase.initializeApp(environment.firebase);
const appCheck = app.appCheck()
appCheck.activate('');

Then import the file in the app module as:

import "firebase-initialization"

Answered By - KingDarBoja