Loader for ngx-i18n-router that provides route translations using ngx-config


37295.0.04 years ago4 years agoMinified + gzip package size for @ngx-i18n-router/config-loader in KB


@ngx-i18n-router/config-loader npm version npm downloads

Loader for ngx-i18n-router that provides route translations using ngx-config

CircleCI coverage tested with jest Conventional Commits Angular Style Guide

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.


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:


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


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.


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

'@ngx-i18n-router/config-loader': 'node_modules/@ngx-i18n-router/config-loader/bundles/config-loader.umd.min.js'


Setting up I18NRouterModule to use I18NRouterConfigLoader

I18NRouterConfigLoader uses @ngx-config/core to load route translations.

  • Import ConfigModule using the mapping '@ngx-config/core' and append ConfigModule.forRoot({...}) within the imports property of app.module.
  • Import I18NRouterModule using the mapping '@ngx-i18n-router/core' and append I18NRouterModule.forRoot({...}) within the imports property of app.module.
  • Import I18NRouterConfigLoader using the mapping '@ngx-i18n-router/config-loader'.

Note: Considering the app.module is the core module in Angular application.


import { HttpClient } from '@angular/common/http';
import { ConfigModule, ConfigLoader, ConfigHttpLoader } from '@ngx-config/core';
import { I18NRouterModule, I18NRouterLoader, I18N_ROUTER_PROVIDERS, RAW_ROUTES } 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});

  declarations: [
  imports: [
      provide: ConfigLoader,
      useFactory: (configFactory),
      deps: [Http]
    I18NRouterModule.forRoot(routes, [
        provide: I18NRouterLoader,
        useFactory: (i18nRouterFactory),
        deps: [ConfigService, RAW_ROUTES]
  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: 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.


  "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.


The MIT License (MIT)

Copyright (c) 2018 Burak Tasci

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.