Angular 17无NgModule时如何在服务中注入TitleCasePipe？

问题根源 #

TitleCasePipe是Angular CommonModule 提供的内置管道，直接注入管道类或单独导入管道类无法生效，必须导入包含它的CommonModule才能让Angular识别其提供者。

正确配置步骤 #

1. 在appConfig中导入CommonModule：

import { CommonModule } from '@angular/common';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations(),
    importProvidersFrom(CommonModule) // 替换原有的TitleCasePipe导入
  ]
};

2. 服务中正常注入TitleCasePipe（两种方式均可）：

import { Injectable, inject } from '@angular/core';
import { TitleCasePipe } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class NameGeneratorService {
  // 方式1：使用inject函数
  private titleCasePipe = inject(TitleCasePipe);

  // 方式2：构造函数注入
  // constructor(private titleCasePipe: TitleCasePipe) { }

  // 调用示例
  formatName(name: string): string {
    return this.titleCasePipe.transform(name);
  }
}

原配置失效原因 #

• TitleCasePipe本身不是可直接注册的提供者模块，它的依赖提供者是在CommonModule内部定义的，单独导入管道类无法触发提供者注册。
• 错误提示中的_TitleCasePipe是Angular内部实现类，找不到它的提供者本质就是缺少了包含该管道的CommonModule导入。

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