All Projects → ngx-translate → Http Loader

ngx-translate / Http Loader

Licence: mit
A loader for ngx-translate that loads translations with http calls

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Http Loader

React Native Wormhole
⚛️ 🌌 Inter-dimensional Portals for React Native. 👽 🖖
Stars: ✭ 133 (-21.76%)
Mutual labels:  plugin, loader
ngx-smart-loader
Smart loader handler to manage loaders everywhere in Angular apps.
Stars: ✭ 28 (-83.53%)
Mutual labels:  loader, npm-package
ngx-loaders-css
Loaders.css component for Angular X
Stars: ✭ 13 (-92.35%)
Mutual labels:  loader, ngx
Highlightjs Line Numbers.js
Line numbering plugin for Highlight.js
Stars: ✭ 323 (+90%)
Mutual labels:  plugin, npm-package
Node Native Ext Loader
Loader for Node native extensions
Stars: ✭ 51 (-70%)
Mutual labels:  npm-package, loader
Core
The internationalization (i18n) library for Angular
Stars: ✭ 4,027 (+2268.82%)
Mutual labels:  npm-package, ngx
Ngx Skeleton Loader
Make beautiful, animated loading skeletons that automatically adapt to your Angular apps
Stars: ✭ 278 (+63.53%)
Mutual labels:  loader, ngx
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (-25.29%)
Mutual labels:  plugin, loader
Webpack Fast Refresh
React Fast Refresh plugin and loader for webpack
Stars: ✭ 155 (-8.82%)
Mutual labels:  plugin, loader
Webpack Config Handbook
Minimum Webpack config handbook & examples
Stars: ✭ 165 (-2.94%)
Mutual labels:  loader
Vim Subversive
Vim plugin providing operator motions to quickly replace text
Stars: ✭ 168 (-1.18%)
Mutual labels:  plugin
Angrgdb
Use angr inside GDB. Create an angr state from the current debugger state.
Stars: ✭ 165 (-2.94%)
Mutual labels:  plugin
Slidingsquareloaderview
Marvelous sliding square loader view
Stars: ✭ 166 (-2.35%)
Mutual labels:  loader
Reactopt
A CLI React performance optimization tool that identifies potential unnecessary re-rendering
Stars: ✭ 1,975 (+1061.76%)
Mutual labels:  npm-package
Hydrogenapp
hydrogen is a pluggable android app
Stars: ✭ 166 (-2.35%)
Mutual labels:  plugin
Fast Cli
Test your download and upload speed using fast.com
Stars: ✭ 2,178 (+1181.18%)
Mutual labels:  npm-package
Mgs Machinery
Unity plugin for binding machinery joint in scene.
Stars: ✭ 164 (-3.53%)
Mutual labels:  loader
Z.lua
⚡ A new cd command that helps you navigate faster by learning your habits.
Stars: ✭ 2,164 (+1172.94%)
Mutual labels:  plugin
New Github Issue Url
Generate a URL for opening a new GitHub issue with prefilled title, body, and other fields
Stars: ✭ 170 (+0%)
Mutual labels:  npm-package
Cordova Plugin Document Viewer
A Document Viewer cordova/phonegap plugin for iOS, Android and Windows
Stars: ✭ 168 (-1.18%)
Mutual labels:  plugin

@ngx-translate/http-loader Build Status npm version

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

Installation

We assume that you already installed ngx-translate.

Now you need to install the npm module for TranslateHttpLoader:

npm install @ngx-translate/http-loader --save

Choose the version corresponding to your Angular version:

Angular @ngx-translate/core @ngx-translate/http-loader
10 13.x+ 6.x+
9 12.x+ 5.x+
8 12.x+ 4.x+
7 11.x+ 4.x+
6 10.x 3.x
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

Usage

1. Setup the TranslateModule to use the TranslateHttpLoader:

The TranslateHttpLoader uses HttpClient to load translations, which means that you have to import the HttpClientModule from @angular/common/http before the TranslateModule:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AppComponent} from "./app";

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

The 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: /assets/i18n/en.json.

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:

export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, "/public/lang-files/", "-lang.json");
}

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.

// webpack-translate-loader.ts
import { TranslateLoader } from '@ngx-translate/core';
import { Observable } from 'rxjs/Observable';

export class WebpackTranslateLoader implements TranslateLoader {
  getTranslation(lang: string): Observable<any> {
    return Observable.fromPromise(System.import(`../assets/i18n/${lang}.json`));
  }
}

Cause System will not be available you need to add it to your custom typings.d.ts:

declare var System: System;
interface System {
  import(request: string): Promise<any>;
}

Now you can use the WebpackTranslateLoader with your app.module:

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: WebpackTranslateLoader
      }
    })
  ]
})
export class AppModule { }

The disadvantage of this solution is that you have to rebuild the application everytime your translate files has changes.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].