I’m trying to use the ngx-translate library in Angular 18, but it gives me the following error message in the app.component.ts file when I try to use Translate pipe.
I am trying to ultimately display some translated text, and I first want to be able to use the translate pipe.
The pipe 'TranslatePipe' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule.
My app.component.ts:
import { Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterOutlet } from '@angular/router';
import { WishItem } from '../shared/models/wishItem';
import { WishListComponent } from './wish-list/wish-list.component';
import { AddWishFormComponent } from './add-wish-form/add-wish-form.component';
import { WishFilterComponent } from "./wish-filter/wish-filter.component";
import { EventService } from "./../shared/services/EventService"
import {TranslateModule, TranslateLoader, TranslateService, TranslatePipe} from '@ngx-translate/core';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, CommonModule, FormsModule, WishListComponent,
AddWishFormComponent, WishFilterComponent, TranslatePipe],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
// name of your property/variable, followed by a colon, and then the type
items : WishItem[] = [
new WishItem("Learn Angular"),
new WishItem("Get Coffee", true),
new WishItem("Find grass that cuts itself")
];
constructor(events: EventService, public translate: TranslateService){
events.listen("removeWish", (wish : any) => {
let index = this.items.indexOf(wish)
this.items.splice(index)
})
translate.addLangs(['en', 'fr']);
translate.setDefaultLang('en');
const browserLang = translate.getBrowserLang();
if(browserLang != null){
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}
}
changeLanguage(lang: string) {
this.translate.use(lang);
}
title = "wishlist"
filter : any;
}
My app.component.html:
<div>
<h2>{{ 'HOME.TITLE' | translate }}</h2>
<label>
{{ 'HOME.SELECT' | translate }}
<select #langSelect (change)="translate.use(langSelect.value)">
<option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
</select>
</label>
</div>
<div class="container">
<add-wish-form
(addWish) = "items.push($event)"
></add-wish-form>
<div class="row mt-3">
<wish-filter
[(filter)] = "filter"
></wish-filter>
</div>
<div class="row mt-3">
<div class = "col-sm-4">
<wish-list
[wishes] = "items.filter(filter)"
>
</wish-list>
</div>
</div>
</div>
<router-outlet />
According to this post, Why doesn’t App Module exist in Angular 17?, It seems the Angular team “strongly recommends” using standalone components, and as a consequence, of moving away from modules, so I’m also confused by why a module is required.
2
The translate pipe is not a standalone pipe, hence you are limited to not use it at the imports level, you can request for it to be standalone on their github, but it might be due to a reason, like dependency on the translate service. But best place to check this is on their github repo.
Try replacing the TranslatePipe with TranslateModule, which contains the pipe inside the imports and you can directly use it, by importing the module.
import {TranslateModule, TranslateLoader, TranslateService, TranslatePipe} from '@ngx-translate/core';
@Component({
selector: 'app-root',
standalone: true,
imports: [
...,
TranslateModule, // <- changed here!
...
],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
0