I have created the a JHipster react app (monolithic - supports multiple languages En - Ar), and tried later to install German by following the steps mentioned here.
I am facing the following error in chrome console: GET http://localhost:9000/i18n/de.json?_=c6175d5ef7eefd083a22cc4c402c57a1 404 (Not Found).
I have created the files src\main\webapp\i18n\en.., and the same for ar and de, and on the server side: src/main/resources/i18n/messages_en.properties and (ar and de) files. But till now found no place to switch languages in the ui, so I tried modifying the following files to be as follows:
dayjs.ts (initial state):
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
// jhipster-needle-i18n-language-dayjs-imports - JHipster will import languages from dayjs here
import 'dayjs/locale/en';
import 'dayjs/locale/ar';
import 'dayjs/locale/de';
// DAYJS CONFIGURATION
dayjs.extend(customParseFormat);
dayjs.extend(duration);
dayjs.extend(relativeTime);
locale.ts:
import axios from 'axios';
import dayjs from 'dayjs';
import { createSlice } from '@reduxjs/toolkit';
import { AppThunk } from 'app/config/store';
import { TranslatorContext } from 'react-jhipster';
const initialState = {
currentLocale: 'ar',
};
export type LocaleState = Readonly<typeof initialState>;
export const setLocale: (locale: string) => AppThunk = locale => async dispatch => {
if (!Object.keys(TranslatorContext.context.translations).includes(locale)) {
const response = await axios.get(`i18n/${locale}.json?_=${I18N_HASH}`, { baseURL: '' });
TranslatorContext.registerTranslations(locale, response.data);
}
dispatch(updateLocale(locale));
};
export const LocaleSlice = createSlice({
name: 'locale',
initialState: initialState as LocaleState,
reducers: {
updateLocale(state, action) {
const currentLocale = action.payload;
if (state.currentLocale !== currentLocale) {
dayjs.locale(currentLocale);
TranslatorContext.setLocale(currentLocale);
}
state.currentLocale = currentLocale;
},
},
});
export const { updateLocale } = LocaleSlice.actions;
// Reducer
export default LocaleSlice.reducer;
Then in the ui (header), there is a list to switch languages, on startup, the language is AR, but the app looks like the following on startups (localhost:9000):
Then cannot change language except to English for one time only.