Question

您好我有两个模块被延迟加载。

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添加到Root应用程序模块，但它无法正常工作。任何人都知道这个问题的解决方案。

的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一样，您可以为管道创建共享模块，如下所示：

import NgModule from '@angular/core';

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

然后从你的AppModule，在imports部分中，添加SharedPipesModule。

请注意，我在SharedPipesModule中添加了一个exports属性，这将使您的管道对导入SharedPipesModule的模块可见

有关详细信息，请查看@PaulHalliday中的此视频 https://www.youtube.com/watch?v=0NDvwt9zf9k

Answer 2

您无法在不同模块中导入组件或管道。您可以创建一个包含共享管道和组件的模块，并将其导入到两个模块中，这就是全部。

你如何在角4中共享一个模块

2 个答案: