ngx-translate Multi HTTP Loader

20.0.0 · active · verified Wed Apr 22

ngx-translate-multi-http-loader is an Angular-specific HTTP loader for the `@ngx-translate/core` library, designed to fetch translation files from multiple distinct HTTP endpoints. Currently in version 20.0.0, this package typically releases new major versions aligned with Angular's major release cycle, ensuring compatibility with the latest Angular ecosystem. Its primary differentiator is the ability to consolidate translations from various sources (e.g., core application, feature modules, third-party vendors) into a single translation service instance. Crucially, it leverages `HttpBackend` directly instead of `HttpClient`, which allows it to bypass HTTP interceptors by default. This design choice prevents potential delays or conflicts with interceptors that might otherwise interfere with the initial loading of translation files, which often occurs early in the application bootstrap process. It primarily supports JSON format for translation files.

Common errors

```
ERROR Error: Uncaught (in promise): Error: No provider for TranslateLoader!
```
cause The `TranslateModule.forRoot` or `TranslateModule.forChild` is not correctly configured with a `TranslateLoader` in your Angular module hierarchy, or the `HttpLoaderFactory` is not properly provided.

fix Ensure `TranslateModule.forRoot` is imported exactly once in your root `AppModule` (or a designated shared module), and that `HttpLoaderFactory` is correctly specified as `useFactory` with `deps: [HttpBackend]` in its loader configuration.
```
Error: Http failure response for /assets/i18n/en.json: 404 Not Found
```
cause The translation files are not accessible or do not exist at the specified paths on your web server. This could be due to incorrect paths configured in `MultiTranslateHttpLoader` or files missing from the deployment.

fix Double-check the array of paths provided to `MultiTranslateHttpLoader` in your `HttpLoaderFactory` (e.g., `['/assets/i18n/core/', '/assets/i18n/vendors/']`) and verify that the corresponding language files (e.g., `en.json`, `fr.json`) exist and are correctly deployed to these locations.
```
Type 'HttpClient' is not assignable to type 'HttpBackend'
```
cause This type error typically occurs in `HttpLoaderFactory` if you are attempting to inject `HttpClient` when `HttpBackend` is expected. This was a breaking change in v9.0.0.

fix Ensure the parameter in your `HttpLoaderFactory` function is typed as `_httpBackend: HttpBackend` and that `deps: [HttpBackend]` is explicitly configured in `TranslateModule.forRoot` to correctly provide the `HttpBackend` instance.

Warnings

breaking Version 9.0.0 introduced significant breaking changes: the loader's internal mechanism switched from `HttpClient` to `HttpBackend`, and its constructor parameters for defining translation paths changed from explicit `prefix` and `suffix` options to an array of `string[]` paths or `TranslationResource` objects. This impacts how the loader is instantiated and configured.
Fix: Update your `HttpLoaderFactory` to provide an array of string paths (e.g., `['/assets/i18n/core/', '/assets/i18n/vendors/']`) or `TranslationResource` objects instead of `prefix` and `suffix`. Also, ensure `HttpBackend` is injected, not `HttpClient`.
breaking Major versions of `ngx-translate-multi-http-loader` (e.g., v17, v18, v20) are tightly coupled to specific Angular major versions. Mismatched versions can lead to build errors or runtime failures due to incompatible core Angular dependencies.
Fix: Always install the version of `ngx-translate-multi-http-loader` that precisely matches your project's Angular major version, as detailed in the package's compatibility table within the README or on npm.
gotcha The loader uses `HttpBackend` directly to load translation files. This design choice means that any `HttpClient` interceptors configured in your application will not automatically apply to requests made by `ngx-translate-multi-http-loader`.
Fix: Be aware of this behavior. If specific request headers, authentication, or error handling logic is required for translation file requests, you must implement it directly within the `HttpLoaderFactory` or ensure your `HttpBackend` setup explicitly handles it outside of the `HttpClient` interceptor chain.
gotcha The `MultiTranslateHttpLoader` currently supports only JSON format (`.json`) for translation files, irrespective of any custom `suffix` settings provided within `TranslationResource` objects.
Fix: Ensure all translation files served from the configured paths are strictly in `.json` format. Other file types or formats will not be parsed correctly.

Install

npm install ngx-translate-multi-http-loader npm
yarn add ngx-translate-multi-http-loader yarn
pnpm add ngx-translate-multi-http-loader pnpm

Imports

MultiTranslateHttpLoader
wrong:
```
const MultiTranslateHttpLoader = require('ngx-translate-multi-http-loader');
```
correct:
```
import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';
```
This is the primary loader class. Angular applications typically use ES modules, so CommonJS `require` is incorrect. It's usually instantiated via a factory function in `TranslateModule.forRoot`.
HttpLoaderFactory (pattern)
```
export function HttpLoaderFactory(httpBackend: HttpBackend) { return new MultiTranslateHttpLoader(httpBackend, ['/assets/i18n/']); }
```
This is a common, recommended Angular factory function pattern for AoT compilation when configuring `TranslateModule.forRoot`. It must be an exported function and correctly inject `HttpBackend`.
TranslationResource (type)
```
import { TranslationResource } from 'ngx-translate-multi-http-loader';
```
Used when providing an array of objects to the loader, allowing custom prefixes/suffixes or optional flags per resource, instead of just string paths.

Quickstart

This quickstart demonstrates the setup of `MultiTranslateHttpLoader` within an Angular `AppModule`. It configures `@ngx-translate/core` to use `MultiTranslateHttpLoader` with a factory function, loading translations from two distinct `/assets/i18n/` subdirectories, ensuring AoT compatibility and correct dependency injection of `HttpBackend`.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpBackend } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';
import { AppComponent } from './app.component'; // Assuming you have an AppComponent

// AoT requires an exported function for factories
export function HttpLoaderFactory(_httpBackend: HttpBackend) {
  // Example: loading from two different paths, 'core' and 'vendors'
  return new MultiTranslateHttpLoader(_httpBackend, [
    '/assets/i18n/core/', 
    '/assets/i18n/vendors/' 
  ]);
}

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

view raw JSON →