or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-ngx-translate--http-loader

HTTP loader for dynamically loading translation files for @ngx-translate/core internationalization library

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ngx-translate/http-loader@17.0.x

To install, run

npx @tessl/cli install tessl/npm-ngx-translate--http-loader@17.0.0

index.mddocs/

@ngx-translate/http-loader

@ngx-translate/http-loader is an HTTP loader implementation for the @ngx-translate/core internationalization library in Angular applications. It enables dynamic loading of translation files from server endpoints, making it essential for applications that need to fetch JSON translation files at runtime rather than bundling them.

Package Information

  • Package Name: @ngx-translate/http-loader
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ngx-translate/http-loader
  • Peer Dependencies: @angular/core >=16, @angular/common >=16

Core Imports

import { 
  TranslateHttpLoader, 
  provideTranslateHttpLoader,
  TranslateHttpLoaderConfig,
  TRANSLATE_HTTP_LOADER_CONFIG
} from "@ngx-translate/http-loader";
import { TranslateLoader } from "@ngx-translate/core";

For CommonJS:

const { 
  TranslateHttpLoader, 
  provideTranslateHttpLoader,
  TRANSLATE_HTTP_LOADER_CONFIG
} = require("@ngx-translate/http-loader");

Basic Usage

import { provideHttpClient } from "@angular/common/http";
import { provideTranslateService, TranslateLoader } from "@ngx-translate/core";
import { provideTranslateHttpLoader } from "@ngx-translate/http-loader";

// Using standalone providers (Angular 16+)
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideTranslateService(),
    provideTranslateHttpLoader({
      prefix: "/assets/i18n/",
      suffix: ".json"
    })
  ]
};

// Or using the class directly with injection token (for module-based apps)
import { TranslateHttpLoader, TRANSLATE_HTTP_LOADER_CONFIG } from "@ngx-translate/http-loader";

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: TranslateHttpLoader
      }
    })
  ],
  providers: [
    {
      provide: TRANSLATE_HTTP_LOADER_CONFIG,
      useValue: {
        prefix: "/assets/i18n/",
        suffix: ".json"
      }
    }
  ]
})
export class AppModule { }

Architecture

The loader is built around several key components:

  • TranslateHttpLoader Class: Core implementation of the TranslateLoader interface
  • Configuration System: Flexible configuration via dependency injection token
  • HTTP Client Abstraction: Support for both HttpClient and HttpBackend for different use cases
  • Provider Function: Modern Angular provider pattern for dependency injection setup

Capabilities

HTTP Translation Loading

Core functionality for loading translation files via HTTP requests with configurable paths and caching options.

class TranslateHttpLoader implements TranslateLoader {
  /**
   * Creates a new HTTP loader instance with configuration from dependency injection
   * Uses TRANSLATE_HTTP_LOADER_CONFIG token for configuration
   * Defaults: prefix="/assets/i18n/", suffix=".json", enforceLoading=false, useHttpBackend=false
   */
  constructor();
  
  /**
   * Gets the translations from the server
   * @param lang - Language code for the translation file
   * @returns Observable of the translation object
   */
  getTranslation(lang: string): Observable<TranslationObject>;
}

Dependency Injection Configuration

Provider function for configuring the HTTP loader in Angular's dependency injection system with comprehensive configuration options.

/**
 * Provider function for configuring the HTTP loader with Angular dependency injection
 * @param config - Optional configuration object (default: {})
 * @returns Array of Angular providers including configuration token and TranslateLoader provider
 */
function provideTranslateHttpLoader(
  config?: Partial<TranslateHttpLoaderConfig>
): Provider[];

Note: The provideTranslateHttpLoader function creates providers that configure both the TRANSLATE_HTTP_LOADER_CONFIG injection token and the TranslateLoader service. The TranslateHttpLoader constructor uses Angular's modern inject() function internally for dependency injection rather than constructor parameters.

Configuration Interface

Configuration interface defining all available options for customizing the HTTP loader behavior.

interface TranslateHttpLoaderConfig {
  /** URL prefix for translation files (default: "/assets/i18n/") */
  prefix: string;
  /** File suffix for translation files (default: ".json") */
  suffix: string;
  /** Whether to add cache-busting parameters (default: false) */
  enforceLoading: boolean;
  /** Whether to use HttpBackend instead of HttpClient (default: false) */
  useHttpBackend: boolean;
}

Injection Token

Angular injection token for providing HTTP loader configuration through dependency injection.

const TRANSLATE_HTTP_LOADER_CONFIG: InjectionToken<Partial<TranslateHttpLoaderConfig>>;

Types

interface TranslateHttpLoaderConfig {
  prefix: string;
  suffix: string;
  enforceLoading: boolean;
  useHttpBackend: boolean;
}

// From @angular/core
type Provider = any;
type InjectionToken<T> = any;

// From rxjs
type Observable<T> = any;

// From @ngx-translate/core
interface TranslationObject {
  [key: string]: string | TranslationObject;
}

Configuration Examples

Basic Configuration:

provideTranslateHttpLoader()
// Uses defaults: prefix="/assets/i18n/", suffix=".json"

Custom Paths:

provideTranslateHttpLoader({
  prefix: "/locales/",
  suffix: ".json"
})
// Loads from: /locales/{lang}.json

Cache Busting:

provideTranslateHttpLoader({
  enforceLoading: true
})
// Adds timestamp: /assets/i18n/{lang}.json?enforceLoading=1234567890

HttpBackend Usage:

provideTranslateHttpLoader({
  useHttpBackend: true
})
// Bypasses HTTP interceptors

Error Handling

The loader inherits error handling from Angular's HttpClient. Common errors include:

  • Network errors: Connection failures, timeouts
  • HTTP errors: 404 (file not found), 403 (forbidden), 500 (server error)
  • Parse errors: Invalid JSON format in translation files

All errors are propagated as Observable errors that can be handled by the @ngx-translate/core service.