{"id":16458,"library":"ngx-translate-multi-http-loader","title":"ngx-translate Multi HTTP Loader","description":"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.","status":"active","version":"20.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/rbalet/ngx-translate-multi-http-loader","tags":["javascript","angular","i18n","transalte","ngx-translate","typescript"],"install":[{"cmd":"npm install ngx-translate-multi-http-loader","lang":"bash","label":"npm"},{"cmd":"yarn add ngx-translate-multi-http-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add ngx-translate-multi-http-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Angular's HTTP functionalities, specifically HttpBackend.","package":"@angular/common","optional":false},{"reason":"Core Angular dependency for component and module functionality.","package":"@angular/core","optional":false},{"reason":"The foundational ngx-translate library for internationalization, which this package extends.","package":"@ngx-translate/core","optional":false},{"reason":"Reactive programming library used by Angular and @ngx-translate/core for asynchronous operations.","package":"rxjs","optional":false}],"imports":[{"note":"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`.","wrong":"const MultiTranslateHttpLoader = require('ngx-translate-multi-http-loader');","symbol":"MultiTranslateHttpLoader","correct":"import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';"},{"note":"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`.","symbol":"HttpLoaderFactory (pattern)","correct":"export function HttpLoaderFactory(httpBackend: HttpBackend) { return new MultiTranslateHttpLoader(httpBackend, ['/assets/i18n/']); }"},{"note":"Used when providing an array of objects to the loader, allowing custom prefixes/suffixes or optional flags per resource, instead of just string paths.","symbol":"TranslationResource (type)","correct":"import { TranslationResource } from 'ngx-translate-multi-http-loader';"}],"quickstart":{"code":"import { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { HttpClientModule, HttpBackend } from '@angular/common/http';\nimport { TranslateModule, TranslateLoader } from '@ngx-translate/core';\nimport { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';\nimport { AppComponent } from './app.component'; // Assuming you have an AppComponent\n\n// AoT requires an exported function for factories\nexport function HttpLoaderFactory(_httpBackend: HttpBackend) {\n  // Example: loading from two different paths, 'core' and 'vendors'\n  return new MultiTranslateHttpLoader(_httpBackend, [\n    '/assets/i18n/core/', \n    '/assets/i18n/vendors/' \n  ]);\n}\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    HttpClientModule,\n    TranslateModule.forRoot({\n      loader: {\n        provide: TranslateLoader,\n        useFactory: HttpLoaderFactory,\n        deps: [HttpBackend]\n      }\n    })\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }","lang":"typescript","description":"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`."},"warnings":[{"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`.","message":"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.","severity":"breaking","affected_versions":">=9.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=17.0.0"},{"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.","message":"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`.","severity":"gotcha","affected_versions":">=9.0.0"},{"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.","message":"The `MultiTranslateHttpLoader` currently supports only JSON format (`.json`) for translation files, irrespective of any custom `suffix` settings provided within `TranslationResource` objects.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"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.","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.","error":"ERROR Error: Uncaught (in promise): Error: No provider for TranslateLoader!"},{"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.","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.","error":"Error: Http failure response for /assets/i18n/en.json: 404 Not Found"},{"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.","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.","error":"Type 'HttpClient' is not assignable to type 'HttpBackend'"}],"ecosystem":"npm"}