How to handle import TranslateModule.forChild in module when creating a standalone component in an NgModule Application

[chidav77]

Hi,

I was wondering how you should handle an import of TranslateModule.forChild in a module when adding a single standalone component in an NgModule based angular project

I would like to use TranslateModule.forChild() with isolate:true in Pricing component

I don't have bootstrapApplication method as I see in another support request, so I don't understand if is feasible.

app.module

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        HttpClientModule,
        BrowserAnimationsModule, // required for ng2-tag-input
        CoreModule,
        LayoutModule,
        RoutesModule,
        LaddaModule.forRoot({
            style: "zoom-out",
            //spinnerSize: 10,
            spinnerColor: "white",
            spinnerLines: 12
        }),
  
    ],
    providers: [
        TranslateStore,
    ],
    bootstrap: [AppComponent]

})

routes,ts

{
        path: "pricing",
        loadComponent: () =>
          import("./admin/pricing/pricing/pricing.component").then(
            (m) => m.PricingComponent
          ),

      },

empty pricing component

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../../../shared/shared.module';

@Component({
  selector: 'app-pricing',
  standalone: true,
  imports: [SharedModule,],
  
  templateUrl: './pricing.component.html',
  styleUrls: ['./pricing.component.scss']
})
export class PricingComponent {

}

I have tried

{
        path: "pricing",
        loadComponent: () =>
          import("./admin/pricing/pricing/pricing.component").then(
            (m) => m.PricingComponent
          ),
          providers: [importProvidersFrom(TranslateModule.forChild({loader: { provide: TranslateLoader, useFactory: createTranslateLoader, deps: [HttpClient] }, isolate: true }))],
       
      },

......

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/pricing/', '.json');
}

But the translate pipe is not found.

Could you please help me?
Thanks

[zazics]

Hi,
I have almost same problem. For your translate pipe error, you have to import TranslateModule in your standalone component. But, then another problem appears. Translation are not loaded for your standalone component. Did you resolve this ?

[chidav77]

No...unfortunately no one answered.
I would like to introduce gradually the standalone component, but This situation prevents me from doing so.

[8th-block]

I think this project went silent time to look for alternatives

[zazics]

@pretext-mats which alternatives do you recommend ?

[8th-block]

@pretext-mats which alternatives do you recommend ?

I have not got a faintest idea :-) Been using this translate since pre ng 2 ... may be I should not be looking for an alternative quite yet. For the SACs you can still load translation files manually if you want

[cuddlecake]

I don't know the contents of your SharedModule, but if you're missing the translate pipe in your PricingComponent, then you need to add an import for TranslateModule, e.g.

@Component({
  selector: 'app-pricing',
  standalone: true,
  imports: [SharedModule, TranslateModule /* added import */],
  
  templateUrl: './pricing.component.html',
  styleUrls: ['./pricing.component.scss']
})
export class PricingComponent { }

The TranslateModule consists of component / pipe / directive exports in addition to the providers.
Before migrating your component to standalone, you might have declared the component in the same module where TranslateModule.forChild() had also been imported, and therefore the pipe was also available to the component.

[8th-block]

I don't know the contents of your SharedModule, but if you're missing the translate pipe in your PricingComponent, then you need to add an import for TranslateModule, e.g.

@Component({
  selector: 'app-pricing',
  standalone: true,
  imports: [SharedModule, TranslateModule /* added import */],
  
  templateUrl: './pricing.component.html',
  styleUrls: ['./pricing.component.scss']
})
export class PricingComponent { }

The TranslateModule consists of component / pipe / directive exports in addition to the providers. Before migrating your component to standalone, you might have declared the component in the same module where TranslateModule.forChild() had also been imported, and therefore the pipe was also available to the component.

Trust me it is not the case. We have tried that already still no joy - many other issues pop up

[8th-block]

I just switched to angular provided i18n module in the end ...

[Fiehra]

@8th-block this one?
https://angular.dev/guide/i18n

[8th-block]

@8th-block this one? https://angular.dev/guide/i18n

Yes

[CodeAndWeb]

Our fork of ngx-translate now works with Standalone Components without any issues. See https://ngx-translate.org/getting-started/migration-guide about how to migrate to it.