Angular 17中如何注册自定义管道？无app.module.ts文件的解决办法

Angular 17 默认采用独立组件模式，不再依赖传统的 app.module.ts，注册自定义管道分两种场景处理：

1. 仅在单个/部分组件中使用管道 #

• 第一步：修改自定义管道代码，在 @Pipe 装饰器中添加 standalone: true，将管道标记为独立可声明对象：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'yourPipeName',
  standalone: true // 必须添加这一行
})
export class YourPipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    // 你的管道转换逻辑
    return value;
  }
}

• 第二步：在需要使用该管道的组件的 imports 数组中导入管道：

import { Component } from '@angular/core';
import { YourPipe } from './path/to/your-pipe';

@Component({
  selector: 'app-target-component',
  standalone: true,
  imports: [YourPipe], // 在这里导入管道
  templateUrl: './target-component.component.html'
})
export class TargetComponent {}

2. 全局注册管道（所有组件无需单独导入即可使用） #

如果希望管道能在项目所有组件中直接使用，在项目根目录的 main.ts 里，将管道添加到 bootstrapApplication 的 imports 数组中：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { YourPipe } from './app/path/to/your-pipe';

bootstrapApplication(AppComponent, {
  imports: [YourPipe] // 全局注册管道
});

你之前尝试将管道加入组件 imports 数组未成功，大概率是因为没有给管道添加 standalone: true 标记——Angular 17 中，只有独立的可声明对象（管道、组件、指令）才能直接被导入到独立组件的 imports 中。

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