ngx translate doenst work in my directive

[yunusemreuveyik]

ı have working ngx translation in my project, it works perfectly in all my components which have a module.ts that ı could import my translateModule into imports, but in my directive I only have html, component.ts and css, so ı tried to import my translation module in the component.ts like below:

import { Component, NgModule, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { ModalTpyes } from 'src/app/models/enums/modal-types.enum';
import { ModalControllerService } from 'src/app/services/modalController.service';
import { SharedService } from 'src/app/services/shared.service';
import { StorageService } from 'src/app/services/storage.service';

@Component({
  selector: 'app-toolbar-custom',
  templateUrl: './toolbar-custom.component.html',
  styleUrls: ['./toolbar-custom.component.scss'],
})
@NgModule({
  imports: [
    TranslateModule
  ]
})
export class ToolbarCustomComponent implements OnInit {

but ı get this error: Error: The pipe 'translate' could not be found!

I call this custom directive in my all other components like:

<app-toolbar-custom></app-toolbar-custom>

But why I cant make my directive recognize my translation?

in my custom toolbar directive html:

 <ion-fab-button class="insideFabButton" (click)="presentModal(1)"><div style="padding-right: 5px;">{{'weather' | translate}}</div>
          <ion-icon class="weatherIcon"  name="partly-sunny-outline"></ion-icon>
        </ion-fab-button>

my app.module:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { MatIconModule } from '@angular/material/icon';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { HTTP } from '@ionic-native/http/ngx';
import { NativeStorage } from '@ionic-native/native-storage/ngx';
import { IonicStorageModule } from '@ionic/storage';
import { HttpService } from './services/http.service';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import {MatInputModule} from '@angular/material/input';
import {MatCardModule} from '@angular/material/card';
import {MatSelectModule} from '@angular/material/select';
import {MatDialogModule} from '@angular/material/dialog';

import {  HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    MatIconModule,
    IonicStorageModule.forRoot(),
    FormsModule,
    CommonModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatCardModule,
    MatSelectModule,
    MatDialogModule,
    ReactiveFormsModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    })

  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    HTTP,
    Geolocation,
    NativeStorage,
    HttpService,
    MatDialogModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

my versions:

 "@ngx-translate/core": "^13.0.0",
 "@ngx-translate/http-loader": "^6.0.0",
 "@angular/core": "~9.1.6",
"@ionic/angular": "^5.2.3",

[yunusemreuveyik]

please someone help!!!

[spennyf]

I am having the exact same issue

[Dan890]

hi, per https://www.npmjs.com/package/@ngx-translate/core on angular 9 you need "@ngx-translate/core": "12.0.0", "@ngx-translate/http-loader": "5.0.0"

[yunusemreuveyik]

I fixed like this:

create a shared.module.ts

and write your code like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';  
import { ToolbarCustomComponent } from './directives/toolbar-custom/toolbar-custom.component';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
    imports: [
        CommonModule,
        TranslateModule
    ],
    declarations: [
        ToolbarCustomComponent //your component that you wanna use ngx translate in
    ],
    exports: [
        ToolbarCustomComponent  //your component that you wanna use ngx translate in
    ]
})
export class SharedModule {}