Most Angular apps are still stuck in 2019’s interceptor model. Angular 20 quietly killed it — here’s why your pipeline needs a rewrite

Most Angular applications still use interceptor architecture designed for Angular 8.

The old pattern:

@ NgModule ({ providers : [ { provide : HTTP_INTERCEPTORS , useClass : AuthInterceptor , multi : true } ] })

Enter fullscreen mode

Exit fullscreen mode

Three problems with this:

Order is implicit — You can't visually trace the pipeline

Tree shaking is impossible — All interceptors bundle regardless of usage

Testing requires TestBed — No pure function testing

Angular 20+ changed everything with provideHttpClient() .

The modern approach:

// main.ts export const appConfig : ApplicationConfig = { providers : [ provideHttpClient ( withInterceptors ([ authInterceptor , retryInterceptor , loggingInterceptor , errorInterceptor , cacheInterceptor ]) ) ] };

// functional interceptor export const authInterceptor : HttpInterceptorFn = ( req , next ) => { const auth = inject…