I'm using i18next with the plugin https://github.com/i18next/ng-i18next. with the angular directive, it's supposed to display "test" and "this is a test" on the page. But it shows "home.title" and "home.content". checked the console, json files are loaded properly, correct content can be displayed if I use javascript DOM.
my json file:
{
"home":{
"title": "test",
"content": "this is a test"
}
}
html:
<div ng-app="myApp" ng-controller="myCtrl" class="home">
<h1 ng-i18next="home.title"></h1>
<p ng-i18next="home.content"></p>
</div>
script:
angular.module('jm.i18next')
.config(['$i18nextProvider',function($i18nextProvider){
window.i18next.use(window.i18nextXHRBackend);
$i18nextProvider.options = {
debug: true,
lng: 'en',
fallbackLng: 'en',
backend: {
loadPath: '/locales/{{lng}}/{{ns}}.json'
}
};
}]);
angular.module('myApp', ['jm.i18next']).controller('myCtrl',['$scope', '$i18next',function($scope, $i18next){
}])
Here is the info from console, I don't know what the last error is:
i18next::backendConnector: loaded namespace translation for language
en Object {home: Object}
i18next.min.js:2 i18next: languageChanged en
i18next.min.js:2 i18next: initialized Object {debug: true, ns:
Array[1], defaultNS: Array[1], fallbackLng: Array[1], fallbackNS:
false…}
ng-i18next.min.js:1 Uncaught TypeError: i.lng is not a function
Just double checked and looks like i18next module was upgraded to the newer version, so there are following options:
{
compatibilityAPI: 'v1',
compatibilityJSON: 'v1',
// ...old options from v1
}
which should be used for i18next to have ng-i18next plugin worked.
P.S: As an advice, I'd suggest you to use angular-translate plugin instead of this one, but it's totally up to you.
Related
We are using i18next in a react project to translate labels in our frontend. Currently the translations are placed in a public/locales/en/common.json file which is working fine.
We need to obtain the translations from a REST Api.
There's i18next-http-backend which seems to do what I'm looking for. I don't get it to work however.
The i18n initialization is done using appWithTranslation HOC and the config looks as following.
export default appWithTranslation(MyApp, {
i18n: {
locales: ['de', 'en'],
defaultLocale: 'en',
},
fallbackLng: {
default: ['en'],
},
nonExplicitSupportedLngs: true,
lowerCaseLng: true,
debug: true,
backend: {
loadPath: '/api/translations/{{lng}}/{{ns}}',
allowMultiLoading: false,
parse: (data: any) => {
console.log('parse is called')
return data
},
request: () => {
console.log('request');
},
},
use: [I18NextHttpBackend],
});
I expected this config to trigger a http request to the configured API but that's not happening. Neither console.log is being called.
Anyone with experience using i18next-http-backend?
I wandet to try the Symfony Cropper UX-Component, but it resulted in an Javascript-Error:
Error connecting controller
TypeError: expected value of type "object" but instead got value "[]" of type "array"
at object (stimulus.js:1909:1)
at extended.get (stimulus.js:1789:1)
at extended.connect (controller.js:14:1)
at Context.connect (stimulus.js:1086:1)
at Module.connectContextForScope (stimulus.js:1278:1)
at stimulus.js:1606:1
at Array.forEach (<anonymous>)
at Router.connectModule (stimulus.js:1606:1)
at Router.loadDefinition (stimulus.js:1569:1)
at stimulus.js:1661:1
{identifier: 'symfony--ux-cropperjs--cropper', controller: extended, element: input#form_crop_options}
My Controller looks like the Example from: https://symfony.com/bundles/ux-cropperjs/current/index.html
My controllers.json looks like this:
{
"controllers": {
"#symfony/ux-cropperjs": {
"cropper": {
"enabled": true,
"fetch": "eager",
"autoimport": {
"cropperjs/dist/cropper.min.css": true,
"#symfony/ux-cropperjs/src/style.css": true
}
}
}
},
"entrypoints": []
}
bootstrap.js like this:
import { startStimulusApp } from '#symfony/stimulus-bridge';
console.log("bootstrapping stimulus...");
// Registers Stimulus controllers from controllers.json and in the controllers/ directory
export const app = startStimulusApp(require.context(
'#symfony/stimulus-bridge/lazy-controller-loader!./controllers',
true,
/\.[jt]sx?$/
));
"bootstrapping stimulus..." is successfully logged to console.
I use yarn as Package Manager. I already flushed the Yarn-Cache and reinstalled all the Packages.
How can I edit a JS file (containing a JSON object) using another JS file?
Example:
JS file to be edited (eslintrc.js):
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true
}
}
And I want to let's say add additional configuration lets say in:
env: {
browser: true,
node: true
}
I tried doing something like:
fs = require('fs');
var m = JSON.parse(fs.readFileSync('.eslintrc.js'));
console.log(m)
But of course, as expected, I am getting errors.
undefined:1
module.exports = {
^
SyntaxError: Unexpected token m in JSON at position 0
at JSON.parse (<anonymous>)
To also add, this is not the only file I need to update. There are several others that look similar in nature but not exactly the same such as:
module.exports = function (ctx) {
return {
// --> boot files are part of "main.js"
boot: [
],
css: [
'custom.scss'
]
}
}
How can I open the JS file and be able to edit the JSON object inside without distoring the actual JS file?
Thank you!
You must eliminate 'module.exports =' from eslintrc.js in order to parse it with JSON.parse function.
I am using i18next with aurelia using the i18next aurelia plugin.
The problem I am facing is in locale case sensitivity.
When I set my url to http://localhost/ja-JP
everything works fine, but changing the url to http://localhost/ja-jp throws this error
Possible Unhandled Promise Rejection: ["failed loading locales/ja-JP/translation.json"]
I thought that i18next is by default looking into case sensitive directory, so I tried keeping two directories ja-JP and ja-jp too, but still same problem.
Any idea why would it be a problem?
http://localhost/ja/ and http://localhost/en both work perfectly fine though
if it is relevant, here is the webpack conf section
"aurelia-i18n": [
{ name: "locales/ja-jp/translation.json" },
{ name: "locales/en-us/translation.json" }
]
and the aurelia configuration for i18next
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-validation'))
.plugin(PLATFORM.moduleName('au-table'))
.plugin(PLATFORM.moduleName("aurelia-i18n"), (instance) => {
let aliases = ["t", "i18n"];
TCustomAttribute.configureAliases(aliases);
instance.i18next.use(Backend.with(aurelia.loader));
return instance.setup({
backend: {
loadPath: "./locales/{{lng}}/{{ns}}.json"
},
attributes: aliases,
lng: "en-us",
fallbackLng: "en-us",
load: "currentOnly",
debug: false
});
})
.feature(PLATFORM.moduleName('resources/index'))
.developmentLogging(environment.debug ? 'debug' : 'warn');
if (environment.testing) {
aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'))
}
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}
There is lowerCaseLng Option that will help you.
https://www.i18next.com/overview/configuration-options
i18next
.init({
...
lowerCaseLng: true
});
We are using angular 1.2.16 and i18next 0.2.6 for development. In our application localization works fine when JSON from same server.
Now we came across with the new requirement, to load resources string i.e. JSON files from another content server. let say load JSON from "http://mysite/locales/en-us/sample.json"
<head>
<meta charset="utf-8"/>
<title>i18next test</title>
<script src="i18next.js"></script>
<script src="angularjs/1.2.16/angular.min.js"></script>
<script src="ngI18next.js"></script>
<script>
angular.module('jm.i18next').config(function ($i18nextProvider) {
'use strict';
$i18nextProvider.options = {
lng: 'dev',
useCookie: false,
useLocalStorage: false,
fallbackLng: 'dev',
resGetPath: '../locales/__lng__/__ns__.json',
ns: {
namespaces: ['messages', 'options'],
defaultNs: 'messages'
}
};
});
angular.module('MyApp', ['jm.i18next']).controller('MyProviderCtrl', function ($rootScope, $scope, $i18next) {
$rootScope.$on('i18nextLanguageChange', function () {
$scope.hello = $i18next('messages:header.name');
});
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyProviderCtrl">
<div>{{hello}}</div>
<div ng-i18next="options:moment-i18n"></div>
<div ng-i18next="messages:header.name"></div>
<div ng-i18next="header.name"></div>
</div>
</body>
I tried to change resGetPath: '../locales/__lng__/__ns__.json' to resGetPath: 'http://mysite/locales/en-us/sample.json' its loading JSON file from server however its not translating text on UI.
Any suggestions how to translate?
Looks like you're using an older version of http://i18next.com. So i'm not sure that already allowed loading from other servers (CORS).
I would suggest upgrading to current release and enabling "crossDomain" access in the backend: https://github.com/i18next/i18next-xhr-backend