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

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?

Continue reading...