Loader for ngx-i18n-router that provides route translations using ngx-config
Adding
Add Setting up
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/config-loader
provides route translations to @ngx-i18n-router/core using @ngx-config/core,
and helps reducing the amount of HTTP
requests during application initalization by including route translations
within the application settings - if @ngx-config/core is already used to retrieve settings by the Angular app.
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
than v5.x.x
, then you should probably choose the appropriate version of this library by visiting the master branch.
Table of contents:
- Installation- [Examples](#examples)
- [Related packages](#related-packages)
- [Adding `@ngx-i18n-router/config-loader` to your project (SystemJS)](#adding-systemjs)
- [Setting up `I18NRouterModule` to use `I18NRouterConfigLoader`](#setting-up-configloader)
- [Translations object](#translations-object)
Prerequisites
This library depends onAngular 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/config-loader
using npm
```
npm install @ngx-i18n-router/config-loader --save
```
Note: You should have already installed @ngx-i18n-router/core and @ngx-config/core.
Examples
- ng-seed/universal and fulls1z3/example-app are officially maintained projects, showcasing common patterns and best
@ngx-i18n-router/config-loader
.
Related packages
The following packages may be used in conjunction with@ngx-i18n-router/config-loader
:
Adding @ngx-i18n-router/config-loader
to your project (SystemJS)
Add map
for @ngx-i18n-router/config-loader
in your systemjs.config
```javascript
'@ngx-i18n-router/config-loader': 'nodemodules/@ngx-i18n-router/config-loader/bundles/config-loader.umd.min.js'
```
Settings
Setting up I18NRouterModule
to use I18NRouterConfigLoader
I18NRouterConfigLoader
uses @ngx-config/core to load route translations.
- Import
ConfigModule
using the mapping'@ngx-config/core'
and appendConfigModule.forRoot({...})
within the imports
- Import
I18NRouterModule
using the mapping'@ngx-i18n-router/core'
and appendI18NRouterModule.forRoot({...})
within
- Import
I18NRouterConfigLoader
using the mapping'@ngx-i18n-router/config-loader'
.
app.module.ts
```TypeScript ... import { HttpClient } from '@angular/common/http'; import { ConfigModule, ConfigLoader, ConfigHttpLoader } from '@ngx-config/core'; import { I18NRouterModule, I18NRouterLoader, I18NROUTERPROVIDERS, RAWROUTES } from '@ngx-i18n-router/core'; import { I18NRouterConfigLoader } from '@ngx-i18n-router/config-loader'; ... export function configFactory(http: HttpClient): ConfigLoader { return new ConfigHttpLoader(http, './config.json'); } export function i18nRouterFactory(config: ConfigService, rawRoutes: Routes): I18NRouterLoader { return new I18NRouterConfigLoader(config, 'routes', {routes: rawRoutes}); } @NgModule({ declarations:AppComponent,
...
,
...
imports:
RouterModule.forRoot(routes),
ConfigModule.forRoot({
provide: ConfigLoader,
useFactory: (configFactory),
deps: [Http]
}),
I18NRouterModule.forRoot(routes, [
{
provide: I18NRouterLoader,
useFactory: (i18nRouterFactory),
deps: [ConfigService, RAW_ROUTES]
}
]),
...
,
...
providers:
I18N_ROUTER_PROVIDERS,
...
,
...
bootstrap: AppComponent
})
```
I18NRouterConfigLoader
has three parameters:
- config:
ConfigService
: ConfigService instance
- group:
string
: group key, to fetch route translations from applcation settings (by default,routes
)
- providedSettings:
I18NRouterSettings
: i18n-router settings
Routes
: raw 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./config.json
, adding the following data to configuration file will
provide route translations to @ngx-i18n-router/core
through @ngx-config/core
.
config.json
```json { ... "routes": {"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/config-loader
will now provide route translations to @ngx-i18n-router/core using
@ngx-config/core.