aurealia-i18n和最新的webpack打字骨架

Question

我正在尝试将aurelia-i18n插件与最新的打字脚本webpack框架一起使用。

所以我已经安装了所需的npm包。

npm install aurelia-i18n --save
npm install i18next-xhr-backend --save
npm install i18next-browser-languagedetector --save

然后我更改了我的main.ts

import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
import XHR from 'i18next-xhr-backend';
import LngDetector from 'i18next-browser-languagedetector';

export async function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin(PLATFORM.moduleName('aurelia-i18n'), (instance) => {
      // register i18n plugins
      instance.i18next
          .use(XHR)
          .use(LngDetector);


      // adapt options to your needs (see http://i18next.com/docs/options/)
      // make sure to return the promise of the setup method, in order to guarantee proper loading
      return instance.setup({
          backend: {                                  // <-- configure backend settings
              loadPath: './Locale/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from
          },
          detection: {
              order: ['localStorage', 'cookie', 'navigator'],
              lookupCookie: 'i18next',
              lookupLocalStorage: 'i18nextLng',
              caches: ['localStorage', 'cookie']
          },
          attributes: ['t', 'i18n'],
          fallbackLng: 'en',
          load: 'languageOnly',
          debug: false,
          ns: ['translation', 
              'StammAlbum', 
              'StammCategory', 
              'StammCategoryValue', 
              'StammPictureAdmin',
              'StammPictureUpload',
              'StammVideoUpload',
              'StammVideoAdmin',
              'VideoKonverter',
              'Router', 
              'Datamappings', 
              'Toasts', 
              'Alerts', 
              'Controls', 
              'Metadata', 
              'Dialogs',
              'AuthRegister',
              'SecurityQuestions',
              'Countries',
              'Validation',
              'AuthConfirmAccount',
              'AuthLogin',
              'AuthForgotPassword',
              'AuthAdminAccount',
              'AuthNewPassword',
              'Messages'],
          defaultNS: 'translation'
      });
  });

  await aurelia.start();

  await aurelia.setRoot(PLATFORM.moduleName('FamilieLaissApp'));
}

webpack捆绑程序没有显示错误。但在浏览器控制台中，我可以看到每个翻译文件都有一个404错误。

因此，我尝试了aurelia集线器上记录的使用内置后端的解决方案，并更改了main.ts

import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
import {I18N, Backend} from 'aurelia-i18n';
import LngDetector from 'i18next-browser-languagedetector';

export async function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin(PLATFORM.moduleName('aurelia-i18n'), (instance) => {
      // register i18n plugins
      instance.i18next
          .use(Backend.with(aurelia.loader))
          .use(LngDetector);


      // adapt options to your needs (see http://i18next.com/docs/options/)
      // make sure to return the promise of the setup method, in order to guarantee proper loading
      return instance.setup({
          backend: {                                  // <-- configure backend settings
              loadPath: './Locale/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from
          },
          detection: {
              order: ['localStorage', 'cookie', 'navigator'],
              lookupCookie: 'i18next',
              lookupLocalStorage: 'i18nextLng',
              caches: ['localStorage', 'cookie']
          },
          attributes: ['t', 'i18n'],
          fallbackLng: 'en',
          load: 'languageOnly',
          debug: false,
          ns: ['translation', 
              'StammAlbum', 
              'StammCategory', 
              'StammCategoryValue', 
              'StammPictureAdmin',
              'StammPictureUpload',
              'StammVideoUpload',
              'StammVideoAdmin',
              'VideoKonverter',
              'Router', 
              'Datamappings', 
              'Toasts', 
              'Alerts', 
              'Controls', 
              'Metadata', 
              'Dialogs',
              'AuthRegister',
              'SecurityQuestions',
              'Countries',
              'Validation',
              'AuthConfirmAccount',
              'AuthLogin',
              'AuthForgotPassword',
              'AuthAdminAccount',
              'AuthNewPassword',
              'Messages'],
          defaultNS: 'translation'
      });
  });

  await aurelia.start();

  await aurelia.setRoot(PLATFORM.moduleName('FamilieLaissApp'));
}

但在这个解决方案上也不走运。404错误消失了，但是本地化的字符串没有显示在我的应用程序中。我只能看到Localization.Identifiers，看不到本地化的文本，而且浏览器在控制台输出中没有显示任何错误。

那么我要怎么做才能让这个东西工作呢？

Answer 1

这是我的工作配置。我不使用typescript，但您的问题与捆绑语言环境文件与webpack有关

var Promise = require('bluebird'); // Promise polyfill for IE11

Promise.config({
    // Enable warnings
    warnings: false,
    // Enable long stack traces
    longStackTraces: true,
    // Enable cancellation
    cancellation: false,
    // Enable monitoring
    monitoring: false
});

import 'intl';
import 'intl/locale-data/jsonp/en';
import 'intl/locale-data/jsonp/de';

import {bootstrap} from 'aurelia-bootstrapper-webpack';

import '../theme/assets/css/jquery-ui.css';
//import '-!style!css!../theme/assets/css/jquery-ui.css';
// note! import bootstrap styles after ace
import '../theme/assets/css/ace.css';
import '../theme/assets/css/bootstrap.css';
import '../styles/main.less';

import 'jquery-ui/jquery-ui';
// just js from bootstrap
import 'bootstrap-webpack/bootstrap-scripts!bootstrap-webpack/bootstrap.config.js';

// always import ace-theme after jquery-ui and bootsrap
import 'ace-theme/ace';
import 'ace-theme/ace-elements';

import 'font-awesome-webpack';

import XHR from 'i18next-xhr-backend';


function loadLocales(url, options, callback, data) {
  try {
    let waitForLocale = require('bundle!json!../locale/' + url + '.json');
    waitForLocale((locale) => {
      callback(locale, {status: '200'});
    })
  } catch (e) {
    callback(null, {status: '404'});
  }
}

bootstrap(function (aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-i18n', (instance) => {
      // register backend plugin
      instance.i18next.use(XHR);
      // adapt options to your needs (see http://i18next.com/docs/options/)
      return instance.setup({
        backend: {                                  // <-- configure backend settings
          //loadPath: '/locale/{{lng}}/{{ns}}.json' // <-- XHR settings for where to get the files from
          loadPath: '{{lng}}/{{ns}}',
          parse: (data) => data,
          ajax: loadLocales
        },
        lng: 'de',
        attributes: ['t', 'i18n'],
        fallbackLng: 'en',
        debug: false,
        //debug: true,
        //compatibilityJSON: 'v1',
        ns: ['translation', 'nav', 'secuident', 'validation']
      });
    })
    .plugin('aurelia-validation')
    .plugin('aurelia-dialog', config => {
      config.useDefaults();
      config.settings.startingZIndex = 5000;
    });

  aurelia.start().then(() => aurelia.setRoot('app-webpack', document.body));
});