Angular 17 SSR - Vite bundler throws error because document is not available on Server.

[CaspianVahagn]

Angular 17 can utilized Tolgee only on client site.
Alone the import of tolgee within SSR context, results in an error:

11:54:41 [vite] Internal server error: document is not defined

Minimal example here:
https://stackblitz.com/edit/fuck-yeah-angular-ssr-1e3ut7?file=src%2Fapp%2Fapp.config.ts,angular.json

+-- @angular-devkit/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @tolgee/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

Since Angular bundler is not extendable via Viteconfig (for now) workarounds with the SDK do not work.

But I could offer an workaround without the SDK, by using @ngx-translate/core and writing a own translation loader that fetches the data from the service / static files.

The custom Translation Loader with a http request to the tolgee api.

import { TranslateLoader } from '@ngx-translate/core';
import { Location } from '@angular/common';
import {  Observable} from 'rxjs';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';

export class TolgeeLoader extends TranslateLoader {
  constructor(
    private location: Location,
    private http: HttpClient,
  ) {
    super();
  }
  getTranslation(lang = "de-DE" ): Observable<any> {
    if (environment.env === 'dev') {
      return this.http.get(
        environment.config.apiHosts.tolgee.url + '/v2/projects/export',
        {
          params: {
            languages: lang,
            format: 'JSON',
            filterNamespace: 'DEFAULT_NS',
            zip: false,
          },
          // ?languages=de-DE&format=JSON&filterNamespace=DEFAULT_NS&zip=false
          headers: {
            accept: '*/*',
            'X-API-Key': environment.config.apiHosts.tolgee.key,
          },
        },
      );
    }

    return this.http.get('/assets/de-DE.json', {
      headers: {
        'x-assets': 'true',
      },
    });
  }
}

in the app.config.ts

import {
  TranslateLoader,
  TranslateModule,
  TranslateService,
} from '@ngx-translate/core';

import { TolgeeLoader } from '../global/translation/TolgeeLoader';

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    TranslateService,
    importProvidersFrom(
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: (location: Location, http: HttpClient) => {
            return new TolgeeLoader(location, http);
          },
          deps: [Location, HttpClient],
        },
        useDefaultLang: true,
        defaultLanguage: 'de',
      }),
    ),
   ...
  ],
};

[JanCizmar]

I will look into this this week hopefully.

[JanCizmar]

I have assigned this to @stepan662, as it seems like an issue with @tolgee/web and dev tools.