core Documentation

provideTranslateService({
  fallbackLang: "en",
  lang: "de",
  loader: provideTranslateHttpLoader({ prefix: "./i18n/" }),
  compiler: ...,
  parser: ...,
  missingTranslationHandler: ...
})

provideChildTranslateService({
  loader: provideTranslateHttpLoader({ prefix: "./i18n-feature/" }),
  compiler: ...,
  parser: ...,
  missingTranslationHandler: ...
})

flowchart TD
    A[Get translation for key] --> B{Found in current service?}
    B -->|Yes| C[Return translation]
    B -->|No| D{Has parent service?}
    D -->|Yes| E[Ask parent service]
    E --> B
    D -->|No| F{Has fallbackLang?}
    F -->|Yes| G[Retry with fallbackLang]
    G --> H{Found in current service?}
    H -->|Yes| C
    H -->|No| I{Has parent service?}
    I -->|Yes| J[Ask parent with fallbackLang]
    J --> H
    I -->|No| K[Return key / MissingTranslationHandler]
    F -->|No| K

flowchart TD
    subgraph Root["Root (Store A)"]
        A[TranslateService A]
    end

    subgraph Isolated["Isolated Component (Store B)"]
        B[TranslateService B]
    end

    subgraph IsolatedChild["Child of Isolated"]
        C[Uses Store B]
    end

    Root -.->|"no connection"| Isolated
    Isolated --> IsolatedChild

// app.config.ts
provideTranslateService({ lang: "en" })

// feature.component.ts - creates isolated service
@Component({
  providers: [
    provideTranslateService({
      lang: "de",
      loader: provideTranslateHttpLoader({ prefix: "./feature-i18n/" })
    })
  ]
})

flowchart TD
    subgraph Root["Root (Store A)"]
        A[TranslateService A<br/>lang: de, fallback: en]
    end

    subgraph Child1["Feature Component (Store B)"]
        B[TranslateService B<br/>own translations]
    end

    subgraph Child2["Nested Component (Store C)"]
        C[TranslateService C<br/>own translations]
    end

    A -->|"parent"| B
    B -->|"parent"| C

    C -->|"lookup bubbles up"| B
    B -->|"lookup bubbles up"| A

// app.config.ts
provideTranslateService({ lang: "de", fallbackLang: "en" })

// feature.component.ts - connected to root
@Component({
  providers: [
    provideChildTranslateService({
      loader: provideTranslateHttpLoader({ prefix: "./feature-i18n/" })
    })
  ]
})

// nested.component.ts - connected to feature
@Component({
  providers: [
    provideChildTranslateService({
      loader: provideTranslateHttpLoader({ prefix: "./nested-i18n/" })
    })
  ]
})

sequenceDiagram
    participant C as Store C (nested)
    participant B as Store B (feature)
    participant A as Store A (root)

    Note over C: get("NESTED_KEY")
    C->>C: Found in C
    C-->>C: Return translation

    Note over C: get("FEATURE_KEY")
    C->>C: Not found in C
    C->>B: Ask parent
    B->>B: Found in B
    B-->>C: Return translation

    Note over C: get("ROOT_KEY")
    C->>C: Not found in C
    C->>B: Ask parent
    B->>B: Not found in B
    B->>A: Ask parent
    A->>A: Found in A
    A-->>C: Return translation

    Note over C: get("MISSING_KEY")
    C->>C: Not found in C (de)
    C->>B: Ask parent
    B->>B: Not found in B (de)
    B->>A: Ask parent
    A->>A: Not found in A (de)
    Note over A: Try fallbackLang (en)
    A->>A: Not found in A (en)
    A-->>C: MissingTranslationHandler

sequenceDiagram
    participant C as Child C
    participant B as Child B
    participant A as Root A

    Note over C: user calls use("en")
    C->>B: delegate use("en")
    B->>A: delegate use("en")
    A->>A: set lang = "en"
    A->>B: onLangChange
    A->>C: onLangChange (via B)

flowchart TD
    subgraph Root
        A[Store A<br/>lang: de → en]
    end

    subgraph Child
        B[Store B<br/>follows parent]
    end

    subgraph Nested
        C[Store C<br/>follows parent]
    end

    C -.->|"use('en')"| B
    B -.->|"delegates"| A
    A -->|"onLangChange"| B
    A -->|"onFallbackLangChange"| B
    B -->|"onLangChange"| C
    B -->|"onFallbackLangChange"| C

flowchart TD
    subgraph Root["Root (Store A)"]
        A[TranslateService A<br/>ROOT_KEY]
    end

    subgraph Sibling1["Feature 1 (Store B)"]
        B[TranslateService B<br/>FEATURE1_KEY]
    end

    subgraph Sibling2["Feature 2 (Store C)"]
        C[TranslateService C<br/>FEATURE2_KEY]
    end

    A -->|"parent"| B
    A -->|"parent"| C
    B x--x|"no access"| C

// Before (module-based)
@NgModule({
    imports: [
        TranslateModule.forRoot({
            defaultLang: "en",
            useDefaultLang: true,
            loader: {
                provide: TranslateLoader,
                useFactory: (http: HttpClient) => new TranslateHttpLoader(http),
                deps: [HttpClient],
            },
        }),
    ],
})
export class AppModule {}

// After (works in both standalone and module-based apps)
@NgModule({
    providers: [
        provideTranslateService({
            fallbackLang: "en", // replaces defaultLang + useDefaultLang
            loader: provideTranslateHttpLoader(),
        }),
    ],
})
export class AppModule {}

// Or in standalone app
bootstrapApplication(AppComponent, {
    providers: [
        provideTranslateService({
            fallbackLang: "en",
            loader: provideTranslateHttpLoader(),
        }),
    ],
});

// Before (module-based)
@NgModule({
    imports: [
        TranslateModule.forChild({
            extend: true,
            loader: {
                provide: TranslateLoader,
                useFactory: (http: HttpClient) => new TranslateHttpLoader(http, "./feature-i18n/"),
                deps: [HttpClient],
            },
        }),
    ],
})
export class FeatureModule {}

// After (works in both standalone and module-based apps)
@NgModule({
    providers: [
        provideChildTranslateService({
            loader: provideTranslateHttpLoader({ prefix: "./feature-i18n/" }),
        }),
    ],
})
export class FeatureModule {}

// Standalone component
@Component({
  imports: [TranslatePipe, TranslateDirective]
})

// Or import the module (still available for convenience)
@NgModule({
  imports: [TranslateModule]  // just exports pipe + directive, no providers
})