Translate Pipe not correctly importing while using ngx-translate in Angular 18

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.

Continue reading...