Why the pipe 'translate' could not be found?

Question

I created a component cookie.component in modal/ folder with the component.modulewhich contains the necessairy to make the module translate work

cookie.component.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { TranslateModule } from '@ngx-translate/core';
import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
    imports: [
        CommonModule,
        IonicModule,
        TranslateModule.forChild(),
        FontAwesomeModule,
    ],
    declarations: [],
    exports: []
})
export class CookieModule {
    constructor(
        private library: FaIconLibrary
        ) {
      }
 }

I import this component in a guard/cookie.guard which i called in app-routing.module

guard/cookie.guard

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { ModalController, Platform } from '@ionic/angular';
import { CookieComponent } from '../modal/cookie/cookie.component';

@Injectable({
    providedIn: 'root'
})
export class CookiesGuard implements CanActivate {
    constructor(
        private modalController: ModalController,
        private platform: Platform
    ) {}

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return new Promise(async resolve => {
            if (this.platform.url().includes("http") && localStorage.getItem("useAnalytics") == null) {
                this.modalController.create({
                    component: CookieComponent,
                    cssClass: "cookie-modal",
                    backdropDismiss: false
                }).then(m => {
                    m.present();
                }).catch(err => console.error(err));
            } else resolve(true);
        });
    }
}

and here is the app-routing.module

...
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { CookiesGuard } from './guard/cookie.guard';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule),
    canActivate: [CookiesGuard, LaunchGuard, ProgramChoseGuard]
  },
...
];

@NgModule({
  imports: [
    CommonModule,
    TranslateModule.forChild(),
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
      useHash: true
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I am getting The pipe 'translation' could not be found even though modal cookie.component has the necessary imported...

Any idea how to make the translation in this specific case ?

The goal for me is to have a modal has a guard with the translation, note that if I replace in cookie.component.html the {{ELEMENT.el | translate }} by normal non-translated text it works well. And translation works on all other pages.

Answer 1

You need to imports: [TranslateModule] into whatever module the CookiesGuard is declare in.