Error: NG0302: The pipe 'translate' could not be found!

Ionic Framework
1

I give up… I tried every cake recipe, and nothing… i cant make the translte works in my project… the error “Error: NG0302: The pipe ‘translate’ could not be found!” always shows up. Can someone help me ?

ionic info

Ionic:

   Ionic CLI                     : 6.17.1 (C:\Users\moahr\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.8.2
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 10 other plugins)

Utility:

   cordova-res                          : 0.15.3
   native-run (update available: 1.5.0) : 1.4.1

System:

   Android SDK Tools : 26.1.1 (D:\ANDROID\SDK)
   NodeJS            : v14.17.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.14.13
   OS                : Windows 10

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClient, HttpClientModule } from '@angular/common/http';

import { IonicModule, IonicRouteStrategy, Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { HTTP } from '@ionic-native/http/ngx';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Toast } from '@ionic-native/toast/ngx';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { ServicosService } from './servicos.service';
import { TranslateLoader, TranslateModule, TranslateService } from "@ngx-translate/core";
import { TranslateConfigService } from './translate-config.service';
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { SharedModule } from './shared/shared.module';

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    TranslateModule.forRoot({
      defaultLanguage: "pt-br",
      loader: {
          provide: TranslateLoader,
          useFactory: (LanguageLoader),
          deps: [HttpClient]
      }
    }),
    IonicModule.forRoot(),
    SharedModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    HTTP,
    BarcodeScanner,
    SQLite,
    Toast,
    ServicosService,
    TranslateConfigService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

export class AppModule {

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from "@ngx-translate/core";
import { HttpClientModule } from "@angular/common/http";

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    HttpClientModule,
    TranslateModule 
  ],
  exports: [
    HttpClientModule,
    TranslateModule
  ]
})
export class SharedModule { 

}

login.page.ts

import { Component, NgModule, OnInit, ViewChild } from '@angular/core';
import { IonRadioGroup, NavController } from '@ionic/angular';
import { AppModule } from '../app.module';
import { AlertController } from '@ionic/angular';
import { HTTP } from '@ionic-native/http/ngx';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite/ngx';
import { Network } from '@ionic-native/network/ngx';
import { Toast } from '@ionic-native/toast/ngx';
import { Platform, LoadingController } from '@ionic/angular';
import { ServicosService } from '../servicos.service';
import { SharedModule } from '../shared/shared.module';
import { TranslateModule, TranslateService } from '@ngx-translate/core';

import xml2js from 'xml2js';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
@NgModule({
  imports: [
    SharedModule,
    TranslateModule     
  ]
})
export class LoginPage implements OnInit {

  @ViewChild('rdTipoInv') rdTipoInv: IonRadioGroup;
  
  temInternet: any;

  headers: Headers = new Headers({ "Content-Type": "application/x-www-form-urlencoded" });
  testBaseURL:any;
  testBaseURLLogin:any;
  param: any = "";
  param2: any;
  public token: any = null;
  operador: any;
  tipoInv: any;
  empresa: any;
  resultados: any;
  retorno: any;
  VALUE1: any;

  loading: any;

  database: SQLiteObject;

  tipoinv_list = [
    {
      id: '1',
      name: 'Normal',
      value: 'Normal',
      text: 'Normal',
      disabled: false,
      checked: true,
      color: 'primary'
    }, {
      id: '2',
      name: 'Rotativo',
      value: 'Rotativo',
      text: 'Rotativo',
      disabled: false,
      checked: false,
      color: 'primary'
    },
  ];

  constructor(//http: HttpClient,
    private nativeHttp: HTTP,
    public loadingCtrl: LoadingController,
    public navCtrl: NavController,
    public alertController: AlertController,
    private sqlite: SQLite,
    private toast: Toast, 
    private servicosService: ServicosService,
    translate: TranslateService) {

      translate.setDefaultLang('pt-br');
      translate.use('pt-br');
  }

login.page.html

            <ion-col>              
              <ion-button (click)="login()" expand="block" color="primary" shape="round" [disabled]="!loginForm.form.valid">
                {{ 'LOGIN_ENTRAR' | translate:param }}
              </ion-button>            
            </ion-col>