Extend @ngx-translate/core Feature with @rxweb/ngx-translate-extension
Tags: angular, rxweb, typescript, webpack
Published: 2020-11-02 06:55:18

In this article, we will explore how to migrate an exisiting ngx-translate project to @rxweb/ngx-translate-extension which performs translation in the angular application

@rxweb/ngx-translate-extension is an extensible library available with lots of spectacular features which can be used by existing ngx-translate projects as well as non translate integrated projects. This library is designed to perform an extensible, spectatular, simplified and powerful internationalization in an angular application. To know more about this translation package view this article on [Why @rxweb/ngx-translate-extension is intuitive than others ?](https://dev.to/ushmidave/why-rxweb-ngx-translate-extension-is-intuitive-than-others-1obc)

While looking for the best optimum solution to internationalize the angular project i went through a project on github. This project includes resolving the translation service and using attribute directives and pipes using manual language changing strategy

# For existing @ngx-translate projects
Here is **How To migrate the existing project and use the extensible features of @rxweb/ngx-translate-extension**

I have cloned the [github](https://github.com/dimermichel/angular-localization-ngx) project of angular-localization-ngx and installed the nodemodules using command `npm i`, It contains one feeback forms which language changing manaually using code in the navbar and the output is as below :

![article4.gif](https://ucarecdn.com/330230e4-f13e-4d68-9ffc-5a109439c610/)

Considering this github project example we need to follow the steps as mentioned below:

## Installation
In the project install the necessary packages using below command :

> npm i @rxweb/translate @rxweb/ngx-translate-extension

![article1.gif](https://ucarecdn.com/a2da8b61-b5c6-4bc5-8658-5a40b257f934/)

## Import Translate Module 
Resolve the translate module in app.module.ts by changing the import from @ngx-translate/core to @rxweb/ngx-translate-extension and resolve the global file path as below:

![article2.gif](https://ucarecdn.com/e8973b2c-681e-43bd-9ce4-d36b756d61c0/)

## Translate Service Import 
In the translate service file change the import the same way as done previously in the root module

The project is now migrated and ready to use the extended features provided by these packages. To ensure whether everything is running perfect and no service is broken check the [spec comparison](https://docs.rxweb.io/ngx-translate-extension/spec-comparison/missing-translation-handler) page where the same code is copied by following same steps of @ngx-translate/core

![article3.gif](https://ucarecdn.com/54ff5614-2085-4206-8d0e-e39c8dbc2e8d/)

# Conclusion
Here we covered the process to migrate the existing translation project to [@rxweb/ngx-translate-extension](https://www.npmjs.com/package/@rxweb/ngx-translate-extension) 

Among all the features covered by this package the most intuitive features are decorators, sanitizers which arent available in any other translation package currently, Besides this it includes power tool to optimize the translation keys including a powerful CLI

The complete information about this package is covered into the [docs](https://docs.rxweb.io/ngx-translate-extension/getting-started), You can share your comments and and suggestions on [gitter](https://gitter.im/rxweb-project/rxweb) channel.