Angular动态加载组件中如何使用管道？

这个问题的核心原因是动态组件所在的模块（或独立组件）没有导入包含内置管道的CommonModule，Angular的内置管道（比如date）都定义在CommonModule里，组件模板要使用这些管道，必须确保组件能访问到这个模块。下面是具体的解决方案：

1. 检查并配置动态组件所属的NgModule #

如果你的动态组件是在常规NgModule中（非独立组件），请按以下步骤操作：

• 打开包含FreetextITCOComponent、FreetextINHComponent、FreetextBERComponent的模块文件（比如FreetextModule）
• 在@NgModule的imports数组中添加CommonModule
• 确保这些组件在declarations和exports数组中（如果父组件在其他模块，必须导出才能被正确解析）

示例代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FreetextITCOComponent } from './freetext-itco.component';
import { FreetextINHComponent } from './freetext-inh.component';
import { FreetextBERComponent } from './freetext-ber.component';

@NgModule({
  declarations: [
    FreetextITCOComponent,
    FreetextINHComponent,
    FreetextBERComponent
  ],
  imports: [
    CommonModule, // 关键：导入这个模块才能使用内置管道
  ],
  exports: [
    FreetextITCOComponent,
    FreetextINHComponent,
    FreetextBERComponent
  ]
})
export class FreetextModule { }

2. 若使用独立组件（Angular 14+） #

如果你的动态组件是独立组件（standalone: true），需要在组件自身的imports数组中添加CommonModule：

示例代码：

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

@Component({
  selector: 'app-freetext-itco',
  templateUrl: './freetext-itco.component.html',
  standalone: true,
  imports: [CommonModule], // 在这里导入CommonModule
})
export class FreetextITCOComponent {
  data: any; // 接收父组件传入的数据
}

3. 确保父组件所在模块导入动态组件的模块 #

如果父组件和动态组件不在同一个模块，需要在父组件的NgModule中导入动态组件所在的模块（比如上面的FreetextModule），这样ComponentFactoryResolver才能正确解析组件并加载其依赖的模块：

@NgModule({
  imports: [
    // ...其他模块
    FreetextModule
  ]
})
export class ParentModule { }

为什么会出现这个错误？ #

Angular的内置管道（如date、uppercase）并非全局可用，它们被封装在CommonModule中。当动态创建组件时，Angular会根据组件所属的模块配置来解析模板依赖，如果模块没有导入CommonModule，模板就无法找到对应的管道，从而抛出The pipe 'date' could not be found!的错误。

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