🌐 Fixed language-detection

frontend/src/lib/i18n/i18n-service.ts

@@ -1,18 +1,19 @@
 import i18next from 'i18next';
 import translations from './translations';
 import en from './locales/en.json';
+import de from './locales/de.json';
+import LanguageDetector from 'i18next-browser-languagedetector';
 
 import type { i18n, Resource } from 'i18next';
 
-const INITIAL_LANGUAGE = 'en';
-
 export class I18nService {
 	// expose i18next
 	i18n: i18n;
 	constructor() {
 		this.i18n = i18next;
 		this.initialize();
-		this.changeLanguage(INITIAL_LANGUAGE);
+		// this.changeLanguage("de")
+		//this.changeLanguage(INITIAL_LANGUAGE);
 	}
 
 	// Our translation function
@@ -22,8 +23,8 @@ export class I18nService {
 
 	// Initializing i18n
 	initialize() {
-		this.i18n.init({
-			lng: INITIAL_LANGUAGE,
+		this.i18n.use(LanguageDetector).init({
+			// lng: INITIAL_LANGUAGE,
 			fallbackLng: 'en',
 			debug: false,
 			defaultNS: 'translation',
@@ -32,12 +33,27 @@ export class I18nService {
 			interpolation: {
 				escapeValue: false
 			},
+			// detection: {
+			// 	order: ['browser', 'querystring', 'navigator', 'localStorage', 'htmlTag'],
+			// 	lookupQuerystring: 'lng'
+			// }
 			detection: {
-				order: ['browser', 'querystring', 'navigator', 'localStorage', 'htmlTag'],
-				lookupQuerystring: 'lng'
+				order: [
+					'querystring',
+					'cookie',
+					'localStorage',
+					'sessionStorage',
+					'navigator',
+					'htmlTag',
+					'path',
+					'subdomain'
+				],
+				lookupQuerystring: 'lng',
+				lookupLocalStorage: 'language'
 			}
 		});
 		this.i18n.addResourceBundle('en', 'translation', en);
+		this.i18n.addResourceBundle('de', 'translation', de);
 	}
 
 	changeLanguage(language: string) {