@elham-oss/light-localize-router NPM

Light Localize Router for ngx-translate

An implementation of routes localization for Angular without rewriting the router configuration.
This project was generated using Nx.

🔎 Created By Nrwl/Nx inspired by angular-l10n & Greentube/localize-router & gilsdav/ngx-translate-router.

for demo please refer to the source code => apps/documentation, also the demo app has been deployed to netlify demo app for api documentations click here

Installation

using npm:

npm install --save @elham-oss/light-localize-router

using yarn:

yarn add --save @elham-oss/light-localize-router

Usage

In order to use @elham-oss/light-localize-router you must initialize it with following information:

Localization Config along with loader.

Initialize module

import { LightLocalizeRouterModule } from '@elham-oss/light-localize-router';

you need to add configure ngx-translate/core as described here ngx-translate/core*

import { Location } from '@angular/common';
import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
import { HttpBackend, HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AbstractParser, HttpLoader, LightLocalizeRouterModule } from '@elham-oss/light-localize-router';

imports: [
    TranslateModule.forRoot({
        defaultLanguage: 'en',
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClientTrans]
        }
    }),
    RouterModule.forRoot(routes),
    LightLocalizeRouterModule.forRoot({
        parser: {
          provide: AbstractParser,
          useFactory: (translate, location, injector, platformId, http) => {
            return new HttpLoader(translate, location, http, injector, platformId)
          },
          deps: [TranslateService, Location, Injector, PLATFORM_ID, HttpClient]
        }
    })
]

How it works

after you add @elham-oss/light-localize-router to your project it will work like angular-l10n routing but for ngx-translate/core:

A prefix containing the language is added to the path of each navigation, creating a semantic URL:

baseHref/[language][-script][-region]/path

https://example.com/en/home
https://example.com/en-US/home

If the localized link is called, the locale is also set automatically.

To achieve this, the router configuration in your app is not rewritten: the URL is replaced, in order to provide the different localized contents both to the crawlers and to the users that can refer to the localized links.

If you don't want a localized routing for default locale, you can enable it during the configuration: