TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

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

    👍 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


    npm i @ngx-i18n-router/config-loader

    DownloadsWeekly Downloads






    Last publish


    • fulls1z3