@pedroloch/loopback-i18n
v0.2.0
Published
Internationalization for LoopBack 4
Downloads
3
Readme
I18n for Loopback 4
This module contains a component to add i18n to Loopback 4. It's made on top of the library i18n for node.
Instalation
npm install @pedroloch/loopback-i18n
Binding into the application
The component should be loaded with it's configuration in the constructor of you Application Class. This example assumes you have a folder called locales in your root folder.
import {BootMixin} from '@loopback/boot';
import {RepositoryMixin} from '@loopback/repository';
import {ServiceMixin} from '@loopback/service-proxy';
import {RestApplication, RestBindings} from '@loopback/rest';
import {I18nBindings, I18nComponent, I18nOptions} from '@pedroloch/loopback-i18n';
import path from 'path';
export class BackendApplication extends BootMixin(ServiceMixin(RepositoryMixin(RestApplication))) {
constructor(options: ApplicationConfig = {}) {
super(options);
//...Your application bindings declarations
// Should load the configuration first
this.configure(I18nBindings.COMPONENT).to({
defaultLocale: 'en',
locales: ['en', 'pt'],
directory: path.join(__dirname, '../locales')
} as I18nOptions);
// Load the component after the configuration
this.component(I18nComponent);
}
}
The configuration
For the configuration, you just need to pass the same configuration you would use in the library i18n. Check their specifications for details. You can use the type I18nOptions from this library to help you with typescript autocomplete.
import {I18nOptions} from '@pedroloch/loopback-i18n';
Usage
This example assumes you have these two files, en.json and pt.json, inside the locales folder that you configured when binding to the application
en.json
{
"greeting": "Hello",
"greeting_with_name": "Hello, %s"
}
pt.json
{
"greeting": "Olá",
"greeting_with_name": "Olá, %s"
}
Now you can inject a function that will translate the messages based on the browsers 'Accept-Language'.
import { inject } from '@loopback/core';
import { get, param } from '@loopback/rest';
import { I18nBindings, I18nApi } from '@pedroloch/loopback-i18n';
export class MyController {
constructor(
@inject(I18nBindings.T)
public t: I18nApi
) {}
@get('/greeting')
greeting() {
return { msg: this.t('greeting') };
}
@get('/greeting/{name}')
greetingWithName(@param.path.string('name') name: string) {
return { msg: this.t('greeting_with_name', name) };
}
}
Considering you are running the application on port 3000
curl -X 'GET' \
'http://localhost:3000/gretting' \
-H 'accept: application/json' |
-H 'Accept-Language: en'
# Should return
{msg:'Hello'}
curl -X 'GET' \
'http://localhost:3000/gretting' \
-H 'accept: application/json' \
-H 'Accept-Language: pt'
# Should return
{msg:'Olá'}
curl -X 'GET' \
'http://localhost:3000/gretting/John' \
-H 'accept: application/json' |
-H 'Accept-Language: en'
# Should return
{msg:'Hello, John'}
curl -X 'GET' \
'http://localhost:3000/gretting/John' \
-H 'accept: application/json' \
-H 'Accept-Language: pt'
# Should return
{msg:'Olá, John'}
If Accept-Language header is not present, it should return the defaultLocale.
curl -X 'GET' \
'http://localhost:3000/gretting/John' \
-H 'accept: application/json' |
# Should return
{msg:'Hello, John'}