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.