A loader for ngx-translate that loads translations using http.
Simple example using ngx-translate: https://stackblitz.com/github/ngx-translate/example
Get the complete changelog here: https://github.com/ngx-translate/http-loader/releases
We assume that you already installed ngx-translate.
Now you need to install the npm module for
npm install @ngx-translate/http-loader --save
Choose the version corresponding to your Angular version:
|5||8.x to 9.x||1.x to 2.x|
|4.3||7.x or less||1.x to 2.x|
|2 to 4.2.x||7.x or less||0.x|
1. Setup the
TranslateModule to use the
TranslateHttpLoader uses HttpClient to load translations, which means that you have to import the HttpClientModule from
@angular/common/http before the
;;;;;;// AoT requires an exported function for factories
TranslateHttpLoader also has two optional parameters:
- prefix: string = "/assets/i18n/"
- suffix: string = ".json"
By using those default parameters, it will load your translations files for the lang "en" from:
You can change those in the
HttpLoaderFactory method that we just defined. For example if you want to load the "en" translations from
/public/lang-files/en-lang.json you would use:
For now this loader only support the json format.
Angular CLI/Webpack TranslateLoader Example
If you are using Angular CLI (uses webpack under the hood) you can write your own
TranslateLoader that always loads the latest translation file available during your application build.
System will not be available you need to add it to your custom
Now you can use the
WebpackTranslateLoader with your
The disadvantage of this solution is that you have to rebuild the application everytime your translate files has changes.