Angular13中AppModule自定义管道无法在子模块使用求助

错误原因 #

Angular的模块具有严格的隔离性，子模块不会自动继承根模块的可声明对象（组件、指令、管道）。哪怕根模块导出了管道，子模块的组件也无法直接识别——因为子模块的上下文是独立的，只有显式导入包含该管道的模块，才能在子模块内使用它。另外，由于AppModule已经导入了HomeModule，HomeModule不能反向导入AppModule（会触发循环引用错误），所以根模块的管道无法被子模块感知。

解决方案（无需使用SharedModule） #

方案1：仅在HomeModule中声明管道（适用于根模块不需要该管道的场景） #

如果RootEmptyPipe只需要在HomeModule的组件中使用，直接把它从AppModule的declarations和exports中移除，添加到HomeModule的declarations数组即可：

// HomeModule
@NgModule({
  declarations: [
    HomeComponent,
    TestPipeComponent,
    RootEmptyPipe // 直接声明在此处
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forChild(routes),
  ],
})
export class HomeModule {}

方案2：创建仅包含该管道的轻量模块（适用于根模块和子模块都需要使用的场景） #

如果两个模块都需要使用这个管道，可以创建一个只负责导出该管道的小型模块，替代笨重的SharedModule：

1. 创建RootPipeModule：

import { NgModule } from '@angular/core';
import { RootEmptyPipe } from './root-empty.pipe';

@NgModule({
  declarations: [RootEmptyPipe],
  exports: [RootEmptyPipe]
})
export class RootPipeModule {}

2. 修改AppModule，移除原有的管道声明/导出，导入新模块：

// AppModule
@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RootPipeModule, // 导入专用管道模块
    HomeModule,
    BrowserAnimationsModule,
    AppRoutingModule, 
  ],
  declarations: [TestComponent, AppComponent], // 移除RootEmptyPipe
  bootstrap: [AppComponent],
})
export class AppModule {}

3. 在HomeModule中导入该专用模块：

// HomeModule
@NgModule({
  declarations: [
    HomeComponent,
    TestPipeComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forChild(routes),
    RootPipeModule, // 导入专用管道模块
  ],
})
export class HomeModule {}

内容的提问来源于stack exchange，提问作者oopsmails