How to provide pipes in services in Angular 17 with no NgModule

Question

I am trying to use titleCasePipe in my angular service, I don't have NgModule and using the new ApplicationConfig way.

@Injectable({
  providedIn: 'root'
})
export class NameGeneratorService {
  // private titleCasePipe = inject(TitleCasePipe)
  constructor(private titleCasePipe: TitleCasePipe) { }

I tied both ways for injection ^^

I keep getting NullInjectorError: No provider for _TitleCasePipe! error.

I tried this, still same error

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations(),
    importProvidersFrom(TitleCasePipe),
  ]
};

Answer 1

Add the pipe to the providers :

  providers: [
    provideRouter(routes),
    provideAnimations(),
    TitleCasePipe,
  ]

But honnestly, this is a bad practice. Pipes are only meant to be used in templates.

If you want to inject such feature, it should be trough a service.

Answer 2

If you check the pipeTitleCase in github you see that you can create a function:

export function titleCase(input:any)
{
 return !input || input.length === 0
      ? ''
      : input.replace(/\w\S*/g, (txt) => txt[0].toUpperCase() + 
                                         txt.slice(1).toLowerCase());
}

And use it instead of pipe

NOTE: for others pipes like decimalPipe, datePipe, etc, you have the functions formatNumber, formatDate... and it's not necessary import the pipe else the function from @angular/common