Using ngx-translate in a standalone component

[mtabaj]

trafficstars

Hi, I can't find a way to declare the TranslateModule in a standalone component. It's works in the app.config with importProvidersFrom, but I have to use it also in a component with .forChild.

[johnsonlin]

You can put it in your app routes like so:

export const routes: Routes = [
  ...
  {
    path: 'example',
    loadComponent: () => import(...).then(mod => mod.ExampleComponent),
    providers: [
      importProvidersFrom([
        TranslateModule.forChild(...)
      ])
    ]
  }
  ...
]

[logicappsource]

I find it incredibly hard to use it in Angular 17 without the module structure.

  {
    path: `${environment.seo.service}`,
    loadComponent: () =>
      import('../pages/seo/seo.component').then((c) => c.SeoComponent),
    providers: [
      importProvidersFrom([
        TranslateModule.forChild({
          loader: {
            provide: TranslateLoader,
            useFactory: () => {
              return new TranslateJsonLoader();
            },
          },
        }),
      ]),
    ],
  },

Is this corrrect understood this is the new way we should implement pr lazyloading basis of a component?.

I keep getting the following error: 
ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_SeoComponent])[_TranslatePipe -> _TranslatePipe -> _TranslatePipe -> _TranslatePipe]: 
  NullInjectorError: No provider for _TranslatePipe!
    at NullInjector.get (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:5605:27)
    at R3Injector.get (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:6048:33)
    at R3Injector.get (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:6048:33)
    at R3Injector.get (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:6048:33)
    at R3Injector.get (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:6048:33)
    at ChainedInjector.get (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:15426:36)
    at lookupTokenUsingModuleInjector (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:4116:39)
    at getOrCreateInjectable (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:4164:12)
    at Module.ɵɵdirectiveInject (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:11987:19)
    at NodeInjectorFactory.SeoComponent_Factory (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/src/app/pages/seo/seo.component.ts:127:24) {
  ngTempTokenPath: null,
  ngTokenPath: [
    '_TranslatePipe',
    '_TranslatePipe',
    '_TranslatePipe',
    '_TranslatePipe'
  ]
}

TranslateJsonLoader:

import { TranslateLoader } from '@ngx-translate/core';
import { of } from 'rxjs';

import * as dk from 'assets/i18n/dk.json';
import * as en from 'assets/i18n/en.json';
import { environment } from '../environments/environment.dk';

export class TranslateJsonLoader implements TranslateLoader {
  constructor() {}

  public getTranslation() {
    switch (environment.language) {
      case 'dk':
        {
          return of(dk);
        }
        break;
      case 'en':
        {
          return of(en);
        }
        break;
      default:
        {
          return of(dk);
        }
        break;
    }
  }
}

Please help, @johnsonlin , @mtabaj :)

Running Angular v. 17. latest version of ngx-translate.

[lppedd]

I'm wondering if for small projects it makes sense to just stick with modules for now.

[Fiehra]

any updates on this? its really hard to use translate effectively with SSR and standalone components