@ngx-i18n-router/http-loader
v5.0.0
Published
Loader for ngx-i18n-router that provides route translations using http
Downloads
20
Maintainers
Readme
@ngx-i18n-router/http-loader
Loader for ngx-i18n-router that provides route translations using http
Please support this project by simply putting a Github star. Share this library with friends on Twitter and everywhere else you can.
@ngx-i18n-router/http-loader
provides route translations to @ngx-i18n-router/core using http
.
NOTICE
This 5.x.x branch is intented to work with
@angular v5.x.x
. If you're developing on a later release of Angular thanv5.x.x
, then you should probably choose the appropriate version of this library by visiting the master branch.
Table of contents:
Prerequisites
This library depends on Angular v4.0.0
. Older versions contain outdated dependencies, might produce errors.
Also, please ensure that you are using Typescript v2.5.3
or higher.
Getting started
Installation
You can install @ngx-i18n-router/http-loader
using npm
npm install @ngx-i18n-router/http-loader --save
Note: You should have already installed @ngx-i18n-router/core.
Examples
- ng-seed/universal and fulls1z3/example-app are officially maintained projects, showcasing common patterns and best
practices for
@ngx-i18n-router/http-loader
.
Related packages
The following packages may be used in conjunction with @ngx-i18n-router/http-loader
:
Adding @ngx-i18n-router/http-loader
to your project (SystemJS)
Add map
for @ngx-i18n-router/http-loader
in your systemjs.config
'@ngx-i18n-router/http-loader': 'node_modules/@ngx-i18n-router/http-loader/bundles/http-loader.umd.min.js'
Settings
Setting up I18NRouterModule
to use I18NRouterHttpLoader
routes.json
{
"en": {
"ROOT.ABOUT": "about",
"ROOT.ABOUT.US": "us",
"ROOT.ABOUT.BANANA": "banana",
"ROOT.ABOUT.APPLE": "apple",
"ROOT.ABOUT.APPLE.PEAR": "pear",
"CHANGE_LANGUAGE": "change-language"
},
"tr": {
"ROOT.ABOUT": "hakkinda",
"ROOT.ABOUT.US": "biz",
"ROOT.ABOUT.BANANA": "muz",
"ROOT.ABOUT.APPLE": "elma",
"ROOT.ABOUT.APPLE.PEAR": "armut",
"CHANGE_LANGUAGE": "dil-secimi"
}
}
app.module.ts
...
import { HttpClient } from '@angular/common/http';
import { I18NRouterModule, I18NRouterLoader, I18NRouterHttpLoader, I18N_ROUTER_PROVIDERS, RAW_ROUTES } from '@ngx-i18n-router/core';
...
export function i18nRouterFactory(http: HttpClient, rawRoutes: Routes): I18NRouterLoader {
return new I18NRouterHttpLoader(http, '/routes.json', {routes: rawRoutes}); // FILE PATH || API ENDPOINT
}
...
@NgModule({
declarations: [
AppComponent,
...
],
...
imports: [
RouterModule.forRoot(routes),
I18NRouterModule.forRoot(routes, [
{
provide: I18NRouterLoader,
useFactory: (i18nRouterFactory),
deps: [Http, RAW_ROUTES]
}
]),
...
],
...
providers: [
I18N_ROUTER_PROVIDERS,
...
],
...
bootstrap: [AppComponent]
})
I18NRouterHttpLoader
has three parameters:
- http:
Http
: Http instance - path:
string
: path toJSON file
/API endpoint
, to retrieve route translations from (by default,routes.json
) - providedSettings:
I18NRouterSettings
: i18n-router settings- routes:
Routes
: raw routes
- routes:
Translations object
You can find detailed information about the data structure and usage guidelines for the translations object here.
Assuming that application settings are provided from ./routes.json
, adding the following data to configuration file will
provide route translations to @ngx-i18n-router/core
through http
.
routes.json
{
"en": {
"ROOT.ABOUT": "about",
"ROOT.ABOUT.US": "us",
"ROOT.ABOUT.BANANA": "banana",
"ROOT.ABOUT.APPLE": "apple",
"ROOT.ABOUT.APPLE.PEAR": "pear",
"CHANGE_LANGUAGE": "change-language"
},
"tr": {
"ROOT.ABOUT": "hakkinda",
"ROOT.ABOUT.US": "biz",
"ROOT.ABOUT.BANANA": "muz",
"ROOT.ABOUT.APPLE": "elma",
"ROOT.ABOUT.APPLE.PEAR": "armut",
"CHANGE_LANGUAGE": "dil-secimi"
}
}
:+1: Well!
@ngx-i18n-router/http-loader
will now provide route translations to @ngx-i18n-router/core usinghttp
.
License
The MIT License (MIT)
Copyright (c) 2018 Burak Tasci