Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using ngx-translate in a standalone component #1462

Open
mtabaj opened this issue Dec 12, 2023 · 4 comments
Open

Using ngx-translate in a standalone component #1462

mtabaj opened this issue Dec 12, 2023 · 4 comments

Comments

@mtabaj
Copy link

mtabaj commented Dec 12, 2023

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
Copy link

johnsonlin commented Dec 19, 2023

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
Copy link

logicappsource commented Dec 27, 2023

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
Copy link

lppedd commented Feb 26, 2024

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

@Fiehra
Copy link

Fiehra commented May 28, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants