ERROR in : The pipe 'translate' could not be found

Question

I am using Angular 7.1 but unfortunately I am not able to make the translate pipe of ngx-translate to work…

package.json

"dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/http": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/platform-server": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@angularclass/hmr": "~2.1.3",
    "@ngrx/store": "^7.0.0",
    "@nguniversal/express-engine": "~7.0.2",
    "@nguniversal/module-map-ngfactory-loader": "~7.0.2",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "core-js": "^2.5.7",
    "express": "^4.16.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

export const APP_ID = 'test-app';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: APP_ID }),
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [ AppRoutingModule, TranslateModule ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

app.component.ts

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  template: `
    {{'demo.text' | translate}}
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
    this.translate.get('demo.text').subscribe((text: string) => { console.log('HERE: ', text); });
  }
}

I can see that the TranslateService works fine as it properly translate and output to the console successfully, however the pipe nor the [translate] works.

ERROR in : The pipe 'translate' could not be found (" [ERROR ->] {{'demo.text' | translate}} ")

I see that this usually happens when the TranslateModule is not properly loaded in the imports, but it doesn't look to be the case since here it is properly loaded in app.module.ts and used in app.component.ts, which is bootstrapped by app.module.ts…

Any idea?

Answer 1

I had a similar issue which I resolved by importing and exporting the Translate module in my app's shared module. I don't think it should go in the routing module.

So my set up was as follows: app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularFireModule } from '@angular/fire';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { AngularFireAuth} from '@angular/fire/auth';

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    AngularFireModule.initializeApp(environment.firebase, 'VetCafe'),
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
  }),
    AppRoutingModule
  ],
  providers: [HttpClient, AngularFireAuth],
  bootstrap: [AppComponent]
})
export class AppModule { }

Shared module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { NgChatModule } from 'ng-chat';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    NgChatModule,
    TranslateModule
  ],
  exports: [
    CommonModule, FormsModule, ReactiveFormsModule, TranslateModule,
    RouterModule, NgChatModule
  ]
})
export class SharedModule { }

A shared-ui.module for ui stuff:

import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule,
         MatCardModule, MatInputModule, MatDialogModule, MatTableModule,
         MatMenuModule, MatProgressSpinnerModule
       } from '@angular/material';

import { NavigationComponent } from './navigation/navigation.component';
import { FooterComponent } from './footer/footer.component';
import { SideNavigationComponent } from './side-navigation/side-navigation.component';

const matModules = [
  MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule,
  MatCardModule, MatInputModule, MatDialogModule, MatTableModule,
  MatMenuModule, MatProgressSpinnerModule
];

const moduleComponents = [
  NavigationComponent, FooterComponent, SideNavigationComponent
];
@NgModule({
  declarations: [
    moduleComponents
  ],

  imports: [
    SharedModule,
    FlexLayoutModule,
    matModules
  ],

  exports: [
    FlexLayoutModule,
    matModules,
    moduleComponents
  ],
})
export class SharedUiModule { }

and finally my component template:

<nav class="app-navigation" [class.mat-elevation-z2]="!isActive" >
  <mat-toolbar color="primary">
    <div fxHide.gt-xs>
        <button mat-icon-button (click)="onToggleSidenav()"> 
            <mat-icon>menu</mat-icon>
        </button>
    </div>
    <div>
        <a routerLink="/">{{'HOME.Title' | translate}}</a>
    </div>
    <div fxFlex fxLayout fxLayoutAlign="end" fxHide.xs>
        <ul fxLayout fxLayoutGap="15px" class="navigation-items">
            <li>
              <a mat-button [routerLink]="['/forms/appointments']" routerLinkActive="router-link-active" >appointments</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/forms/clientreg']" routerLinkActive="router-link-active" >new client</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/forms/euthanasia']" routerLinkActive="router-link-active" >euthanasia</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/blog']" routerLinkActive="router-link-active" >blog</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/services']" routerLinkActive="router-link-active" >Services</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/legal/terms']" routerLinkActive="router-link-active" >terms</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/legal/privacy']" routerLinkActive="router-link-active" >privacy</a>
            </li>
            <li *ngIf="!isLoggedIn">
              <a mat-button [routerLink]="['/account/signup']" routerLinkActive="router-link-active" >signup</a>
            </li>
            <li *ngIf="!isLoggedIn">
              <a mat-button [routerLink]="['/account/login']" routerLinkActive="router-link-active" >login</a>
            </li>
            <li *ngIf="isLoggedIn">
              <a mat-button (click)="isLoggedIn = false">Log Out</a>
            </li>

            <li >
              <a mat-button (click)="changeLocale()">Language</a>
            </li>

          </ul>
    </div>
  </mat-toolbar>

</nav>