Angular built in currency pipe showing error

Question

I have an Angular Ionic project. I am using currency pipe on multiple pages but in one particular page it's not working, below is console error. If currency pipe is removed everything works fine !! How do I resolve this?

core.js:6210 ERROR Error: Uncaught (in promise): Error: NG0302: The pipe 'currency' could not be found!. Find more at https://angular.io/errors/NG0302 Error: NG0302: The pipe 'currency' could not be found!. Find more at https://angular.io/errors/NG0302

below is page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/places/tabs/offers"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ place.title }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center">
        <ion-card>
          <ion-card-header>
            <ion-card-title>{{ place.title }}</ion-card-title>
            <ion-card-subtitle>{{ place.price | currency }} / Night</ion-card-subtitle>
          </ion-card-header>
          <ion-img [src]="place.imageUrl"></ion-img>
          <ion-card-content>
            <p>{{ place.description }}</p>
          </ion-card-content>
          <div>
            <ion-button
              margin
              color="primary"
              [routerLink]="[
                '/',
                'places',
                'tabs',
                'offers',
                'edit',
                place.id,
                ]"
            >
            Edit</ion-button>
          </div>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

and module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { OfferBookingsPageRoutingModule } from './offer-bookings-routing.module';

import { OfferBookingsPage } from './offer-bookings.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    OfferBookingsPageRoutingModule
  ],
  declarations: [OfferBookingsPage]
})
export class OfferBookingsPageModule {}

Answer 1

After reading through how Angular flow works, I have found the issue.

I have defined routes for ion-tab in main page/module, this helps loading submodules.

Instead of loading offer-bookings.module in my routes I was loading the offer-bookings-routing.module, hence none of the @NgModule imports were loading for offer-bookings page.

When route was pointed to offer-bookings.module everything works.

You can read about Angular flow on this post : https://medium.com/siam-vit/how-an-angular-app-work-behind-the-scenes-angular-flow-dcc4d1df27bd

Thanks for everyone helps and great community on web. Long live the community