角4でモジュールをどのように共有しましたか

Question

こんにちは私は2つのモジュールを遅延ロードしています。

GroupModuleとTaxModule。

GroupModuleではこれをロードします。

@NgModule({ 
    imports: [ 
    GroupRoutingModule, 
    CommonModule, 
    HttpClientModule, 
    FormsModule, 
    DataTableModule, 
    ], 
    declarations: [ 
    GroupListComponent, 
    GroupCreateComponent, 
    GroupEditComponent, 
    DataFilterPipe, 
    ], 
    providers: [GroupService] 
}) 

私のTaxModuleではこれをロードしています。

@NgModule({ 
    imports: [ 
    CommonModule, 
    TaxRoutingModule, 
    HttpClientModule, 
    FormsModule, 
    DataTableModule, 
    ], 
    declarations: [ 
    TaxListComponent, 
    TaxCreateComponent, 
    TaxEditComponent, 
    DataFilterPipe, 
    ], 
    providers: [TaxService] 
}) 

問題は、このコンソールエラーが発生していることです。

ERROR Error: Uncaught (in promise): Error: Type DataFilterPipe is part of the 

declarations of 2 modules: TaxModule and GroupModule! Please consider moving DataFilterPipe to a higher module that imports TaxModule and GroupModule. You can also create a new NgModule that exports and includes DataFilterPipe then import that NgModule in TaxModule and GroupModule. 
Error: Type DataFilterPipe is part of the declarations of 2 modules: TaxModule and GroupModule! Please consider moving DataFilterPipe to a higher module that imports TaxModule and GroupModule. You can also create a new NgModule that exports and includes DataFilterPipe then import that NgModule in TaxModule and GroupModule. 

DataFilterPipeをルートアプリケーションモジュールに追加しましたが、両方とも機能しません。誰でもこの問題の解決策を知っています。

AppModule

@NgModule({ 
    imports: [ 
    BrowserModule, 
    AppRoutingModule, 
    BsDropdownModule.forRoot(), 
    TabsModule.forRoot(), 
    ChartsModule, 
    ], 
    declarations: [ 
    AppComponent, 
    FullLayoutComponent, 
    NAV_DROPDOWN_DIRECTIVES, 
    BreadcrumbsComponent, 
    SIDEBAR_TOGGLE_DIRECTIVES, 
    AsideToggleDirective, 
    ], 
    providers: [ 
    { 
     provide: LocationStrategy, 
     useClass: HashLocationStrategy, 
    }, DataFilterPipe 
    ], 
    bootstrap: [AppComponent] 
}) 

これは、あなたが異なるモジュール内のコンポーネントやパイプをインポートすることはできません私のapp.routing

export const routes: Routes = [ 
    { 
    path: '', 
    component: LoginComponent, 
    data: { 
     title: 'Login' 
    } 
    }, 
    { 
    path: 'dashboard', 
    redirectTo: 'dashboard', 
    pathMatch: 'full', 
    }, 
    { 
    path: '', 
    component: FullLayoutComponent, 
    data: { 
     title: 'Home' 
    }, 
    children: [ 
     { 
     path: 'dashboard', 
     loadChildren: './dashboard/dashboard.module#DashboardModule' 
     }, 
     { 
     path: 'store', 
     loadChildren: './store/store.module#StoreModule' 
     }, 
     { 
     path: 'group', 
     loadChildren: './group/group.module#GroupModule' 
     }, 
     { 
     path: 'tax', 
     loadChildren: './tax/tax.module#TaxModule' 
     } 
    ] 
    } 

Answer 1

@SergioEscuderoはmentoinnedのように、あなたがそうのようなパイプのための共有モジュールを作成することができます：あなたAppModuleから次に

import NgModule from '@angular/core'; 

@NgModule({ 
    declarations: [  
    DataFilterPipe, 
    OtherPipeHere 
    ], 
    exports:[ 
    DataFilterPipe, 
    OtherPipeHere 
    ] 
}) 
export class SharedPipesModule{} 

を、輸入セクションで、SharedPipesModuleを追加します。私はあなたが詳細についてはSharedPipesModule

をインポートするモジュールへのごパイプが見えるようになりますSharedPipesModuleに輸出プロパティを追加した

通知は、あなたでしhttps://www.youtube.com/watch?v=0NDvwt9zf9k

Answer 2

です。 共有パイプとコンポーネントを使用してモジュールを作成し、両方のモジュールでインポートすることができます。