Appcheck on Angular 17 does not work!

[jonathansigg]

I tried to add AppCheck to my angular project. I have implemented angular 17 with angularfire 17. But somehow the appcheck can't be implemented. It is only a webapp. So no ios or andriod app is used here.
Here is my package.json file:

{
  "name": "liveticker",
  "version": "1.1.5",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:munot": "ng serve --configuration munot",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:liveticker": "node dist/liveticker/server/server.mjs",
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/cdk": "^17.0.4",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/fire": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/material": "^17.0.4",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/platform-server": "^17.0.0",
    "@angular/router": "^17.0.0",
    "@angular/ssr": "^17.0.3",
    "@fortawesome/angular-fontawesome": "^0.14.1",
    "@fortawesome/fontawesome-free": "^6.5.1",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
    "@ngxs/store": "^3.8.2",
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.2",
    "express": "^4.18.2",
    "immer": "^10.0.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.3",
    "@angular/cli": "^17.0.3",
    "@angular/compiler-cli": "^17.0.0",
    "@angular/localize": "^17.0.0",
    "@ngxs/devtools-plugin": "^3.8.2",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "prettier": "3.1",
    "typescript": "~5.2.2"
  }
}

And i have this in my app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { NgxsModule } from '@ngxs/store';
import { AppState } from './state/app.state';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
import { firebaseModules } from './firebaseUtils';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    importProvidersFrom(NgxsModule.forRoot([AppState])),
    importProvidersFrom(NgxsReduxDevtoolsPluginModule.forRoot()),
    provideAnimations(),
    provideAnimations(),
    ...firebaseModules,
  ],
};

I import the providers from firebaseUtils.ts (I have not coppied the firebaseConfig data)

import { importProvidersFrom, isDevMode } from '@angular/core';
import { provideFirebaseApp, initializeApp, getApp } from '@angular/fire/app';
import {
  provideAppCheck,
  initializeAppCheck,
  ReCaptchaEnterpriseProvider,
} from '@angular/fire/app-check';
import { provideAuth, getAuth } from '@angular/fire/auth';
import {
  provideFirestore,
  enableIndexedDbPersistence,
  getFirestore,
} from '@angular/fire/firestore';

...

const firebaseConfig = firebaseConfigProd;

let _firebaseModuls = [
  importProvidersFrom(provideFirebaseApp(() => initializeApp(firebaseConfig))),
  importProvidersFrom(provideAuth(() => getAuth())),
  importProvidersFrom(
    provideFirestore(() => {
      const firestore = getFirestore();
      try {
        enableIndexedDbPersistence(firestore)
          .then(() => {
            console.log('Firestore offline persistence enabled.');
          })
          .catch((error) => {
            if (error.code === 'failed-precondition') {
              console.log('Multiple tabs open, persistence cannot be enabled.');
            } else if (error.code === 'unimplemented') {
              console.log('IndexedDB is not available in this browser.');
            }
          });
      } catch (e) {
        console.error('Error enabling offline persistence', e);
      }
      return firestore;
    }),
  ),
  importProvidersFrom(
      provideAppCheck(() =>
        initializeAppCheck(getApp(), {
          provider: new ReCaptchaEnterpriseProvider(
            AppCheckCode,
          ),
          isTokenAutoRefreshEnabled: true,
        }),
      ),
    ),
];

export const firebaseModules = _firebaseModuls;

But i get an error message, if i implement Appcheck

ERROR ReferenceError: document is not defined
    at makeDiv (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1119:26)
    at initializeEnterprise (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1085:19)     
    at _ReCaptchaEnterpriseProvider.initialize (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1333:9)
    at _activate (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1543:20)
    at initializeAppCheck (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1498:5)        
    at eval (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@angular/fire/fesm2022/angular-fire.mjs:216:44)
    at eval (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@angular/fire/fesm2022/angular-fire.mjs:148:57)
    at _ZoneDelegate.invoke (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/zone.js/fesm2015/zone-node.js:368:26)
    at _Zone.run (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/zone.js/fesm2015/zone-node.js:129:43)
    at _NgZone.runOutsideAngular (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@angular/core/fesm2022/core.mjs:14608:28)
ReferenceError: document is not defined
    at makeDiv (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1119:26)
    at initializeEnterprise (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1085:19)     
    at _ReCaptchaEnterpriseProvider.initialize (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1333:9)
    at _activate (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1543:20)
    at initializeAppCheck (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1498:5)        
    at eval (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@angular/fire/fesm2022/angular-fire.mjs:216:44)
    at eval (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@angular/fire/fesm2022/angular-fire.mjs:148:57)
    at _ZoneDelegate.invoke (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/zone.js/fesm2015/zone-node.js:368:26)
    at _Zone.run (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/zone.js/fesm2015/zone-node.js:129:43)
    at _NgZone.runOutsideAngular (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@angular/core/fesm2022/core.mjs:14608:28)
14:06:40 [vite] Internal server error: document is not defined
      at makeDiv (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1119:26)
      at initializeEnterprise (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1085:19)   
      at _ReCaptchaEnterpriseProvider.initialize (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1333:9)
      at _activate (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1543:20)
      at initializeAppCheck (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1498:5)      
      at eval (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@angular/fire/fesm2022/angular-fire.mjs:216:44)
      at eval (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@angular/fire/fesm2022/angular-fire.mjs:148:57)
      at _ZoneDelegate.invoke (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/zone.js/fesm2015/zone-node.js:368:26)
      at _Zone.run (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/zone.js/fesm2015/zone-node.js:129:43)
      at _NgZone.runOutsideAngular (c:/Users/Jonat/Documents/GitHub/liveticker/node_modules/@angular/core/fesm2022/core.mjs:14608:28) (x2)  

How can i fix this problem?
I really need this appcheck. And i don't want to go back to angular 16.

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[jonathansigg]

Where can i find a sample template?