Angular нестандартная труба не работает 'труба не найдена'

Question

Я пытаюсь создать пользовательский канал в моем приложении Angular, но получаю сообщение об ошибке «канал не найден с именем« currencyFormat »». Я создал канал, используя Angular CLI: ng g pipe / components / pipe / currency-format, и код выглядит следующим образом:

import { formatNumber } from '@angular/common';

@Pipe({
  name: 'currencyFormat'
})
export class CurrencyFormatPipe implements PipeTransform {
  transform(value: any, currency: string): any {
    const currencySymbol = (currency == 'EUR' ? '€' : '$');
    let formattedValue = `${currencySymbol} ${formatNumber(value, 'be', '1.2-2')}`;
    return formattedValue;
  }

}

Поскольку я использовал CLI Angular для создания канала , канал добавляется в объявления app.module.ts автоматически. Я пытаюсь использовать канал на одной из моих страниц (home.page. html), но все равно получаю эту ошибку. До сих пор я пробовал много разных вещей, включая помещение канала в отдельный модуль и попытку импорта этого модуля, но безуспешно.

Есть идеи, что это за проблема?

РЕДАКТИРОВАТЬ: вот мой app.module.ts, в случае, если это полезно:

import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ComponentsModule } from 'src/app/components/components.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from 'ng2-charts';
import { environment } from "src/environments/environment";
import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
import { ServiceWorkerModule } from '@angular/service-worker';
import { CurrencyFormatPipe } from './components/pipes/currency-format.pipe';

@NgModule({
  declarations: [AppComponent, CurrencyFormatPipe],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot({ animated: true, mode: 'ios' }), 
    AppRoutingModule, 
    ComponentsModule,
    BrowserAnimationsModule,
    ChartsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

Лучший способ решить эту проблему - иметь общий, Общий модуль . Это обычный шаблон в Angular.

Пример структуры папки / приложения:

app
├── home
│   ├── home.component.ts
│   ├── home.module.ts
│   └── ...
├── shared
│   └── shared.module.ts
├── app.module.ts
└── ...

Затем вы объявляете и экспортируете компоненты, каналы, директивы, модули и т. Д. c в shared.module * 1009. * что понадобится несколько других модулей .

shared.module.ts

import { NgModule } from '@angular/core';

@NgModule({
  declarations: [
    /* declare it once, here */
    CurrencyFormatPipe
  ],
  exports: [
    /* then export it */
    CurrencyFormatPipe
  ]
})
export class SharedModule { }

Все остальные ваши модули просто импортируют ваш shared.module и смогут использовать все, что разделяет модуль export .

app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    /* import your shared module here */
    SharedModule,

    IonicModule.forRoot({ animated: true, mode: 'ios' }), 
    AppRoutingModule, 
    ComponentsModule,
    BrowserAnimationsModule,
    ChartsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

И затем вы также можете импортировать его в ваш home.module.ts

@NgModule({
  declarations: [/* other imports */],
  entryComponents: [],
  imports: [
    /* import your shared module here, you will have access to the currency pipe now */
    SharedModule
  ],
})
export class AppModule {}

Надеюсь, это поможет. Вот Angular документы об общих модулях.

Answer 2

Если у вас несколько модулей, я считаю, что вам нужно объявить канал в одном из вспомогательных модулей, кроме AppModule, и импортировать модуль в другие модули (включая AppModule), чтобы использовать его.

Я не совсем уверен, почему каналы, объявленные в AppModule, не имеют глобального доступа из других модулей. Это как-то идет вразрез с механизмом отложенной загрузки Angular.

Попробуйте следующее

@NgModule({
    imports: [],
    declarations: [ CurrencyPipe ],
    exports: [ CurrencyPipe ]
})
export class ComponentsModule { }

@NgModule({
    imports: [ BrowserModule, HttpModule, FormsModule, ComponentsModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Затем необходимо импортировать модуль, в котором объявлен канал (ComponentModule в этом примере) всякий раз, когда вам нужно использовать другие модули.