Registry / http-networking / ngx-translate-multi-http-loader

ngx-translate-multi-http-loader

library20.0.0jsnpmunverified

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.

http-networking

npm install ngx-translate-multi-http-loader

github ↗package ↗

INSTALL

IMPORT

SIG · NGX-TRANSLATE-MULT

ngx-translate-multi-http-loader

http-networkingjavascriptv20.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

MultiTranslateHttpLoader

✓ import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';

✗ const MultiTranslateHttpLoader = require('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.

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 { }

Debug

Known issues

breakingVersion 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`.

affects: >=9.0.0

breakingMajor 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.

affects: >=17.0.0

gotchaThe 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.

affects: >=9.0.0

gotchaThe `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.

affects: *

Errors

Common errors & fixes

ERROR Error: Uncaught (in promise): Error: No provider for TranslateLoader!

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

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'

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.

Upgrade

Version history

20.0.0latest on npm

Audit

Dependencies

@angular/commonrequiredRequired for Angular's HTTP functionalities, specifically HttpBackend.

@angular/corerequiredCore Angular dependency for component and module functionality.

@ngx-translate/corerequiredThe foundational ngx-translate library for internationalization, which this package extends.

rxjsrequiredReactive programming library used by Angular and @ngx-translate/core for asynchronous operations.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/rbalet/ngx-translate-multi-http-loader ↗

packagehttps://www.npmjs.com/package/ngx-translate-multi-http-loader ↗