web-dev-qa-db-ja.com

モジュール「HomieModule」によってインポートされた予期しないパイプ「ValuesPipe」

このセットアップでパイプをインポート中に問題が発生しました：Dashboard-routing.Moduleを介してHomie.ModuleおよびServices.Moduleに接続するdashboard.Moduleがあります

これは私のDashboard.Module

import { DashboardRoutingModule } from './dashboard-routing.module';    
import { ValuesPipe } from './values-pipe.pipe';

@NgModule({
  imports:      [ DashboardRoutingModule, CommonModule],
  providers:    [ HomieService, ServiceService ],
  declarations: [ DashboardComponent, ValuesPipe],
  exports: [ValuesPipe],
  bootstrap:    [ DashboardComponent ]
})
export class DashboardModule { }

Homie.Module

import { ValuesPipe } from './../values-pipe.pipe';

@NgModule({
  imports: [
    CommonModule,
    HomieRoutingModule,
    FormsModule,
    Ng2SearchPipeModule,
    ValuesPipe
  ],
  declarations: [HomieListComponent, HomieDetailComponent]
})
export class HomieModule { }

Service.Module

import { ValuesPipe } from './../values-pipe.pipe';

@NgModule({
  imports: [
    CommonModule,
    ServiceRoutingModule,
    FormsModule,
    Ng2SearchPipeModule,
    ValuesPipe
  ],
  declarations: [ServiceDetailComponent, ServiceListComponent]
})
export class ServiceModule { }

エラー

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Unexpected pipe 'ValuesPipe' imported by the module 'HomieModule'. Please add a @NgModule annotation.
Error: Unexpected pipe 'ValuesPipe' imported by the module 'HomieModule'. Please add a @NgModule annotation.

HomieおよびServiceモジュールでパイプを宣言すると、エラーメッセージが表示されます。2つのモジュールでパイプが宣言されました。そのため、両方（親）に接続するモジュールであるDashboard.moduleにパイプを移動しました。

angularimportmodulepipe
9
Alejandro Cordoba

設計規約により、実装された設計は間違っています。プロジェクトモジュールに共通のパイプ、コンポーネント、ディレクティブを共有する場合は、SharedModuleコンセプトを使用する必要があります。

ソリューションでは、パイプを正しくエクスポートしていますが、その方法では機能しません。

common pipe(s), component(s) and directive(s)をエクスポートしたら、import that entire module from where you have exported such things to other modules where you want to use themにする必要があります。だから、次の

1）プロジェクトディレクトリのどこかに共有モジュールを作成します

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

import { ValuesPipe}         from './../values-pipe.pipe';

@NgModule({
  imports:      [ CommonModule ],
  declarations: [ ValuesPipe ],
  exports:      [ ValuesPipe ]
})
export class SharedModule { }

2）shareModuleをService.Moduleにインポート

import { SharedModule } from '../shared/shared.module';
...
...

@NgModule({
  imports: [
    CommonModule,
    ...
    SharedModule
  ],
  declarations: [ServiceDetailComponent, ServiceListComponent]
})
export class ServiceModule { }

これで、Service Moduleでエクスポートされたパイプを使用する準備ができました。

続きを読むshareModule

26
micronyks

Angular7で動作するようにサービスモジュールを追加する必要がありました。これは私のために働いた：

https://alligator.io/angular/providers-shared-modules/

0
Peter Drinnan