Angular 13 Not Seeing Custom Pipes

i am porting over and angular 6 app to angular 13 and i am having trouble with pipes. the app wont compile.

i have a custom pipe on a component that the compiler says doesnt exist Property 'shortDate' does not exist on type 'TransactionsComponent'.

code is as follows (and works in old version of angular)

angular pipe:

import { PipeTransform, Pipe } from '@angular/core';
import { DatePipe } from '@angular/common';
    
    @Pipe({
        name: 'shortDate' 
    })
    export class DateFormatPipe extends DatePipe implements PipeTransform {
        override transform(value: any, args?: any): any {
            ///MMM/dd/yyyy 
            return super.transform(value, "MM/dd/yyyy");
        }
    }

html

<div class="dt">{{transaction.transactionDate | date: shortDate}}</div>

Shared Module

    @NgModule({
  declarations: [  
    DateFormatPipe 
  ],
  imports: [ 
    AppRoutingModule,
    BrowserModule,  
    FormsModule,
    HttpClientModule,
    HttpInterceptorModule,  
    ReactiveFormsModule, 
   
  ],
  exports: [ 
    AppRoutingModule,
    BrowserModule,  
    FormsModule,
    HttpClientModule,
    HttpInterceptorModule,  
    ReactiveFormsModule ,
   
  ],   
})
export class SharedModule {
    static forRoot(): ModuleWithProviders<SharedModule> {
      return {
        ngModule: SharedModule,
        providers: 
        [   
            DateFormatPipe,  
        ]
      };
    }
  } 

consuming module

    @NgModule({
      declarations: [ 
      ],
      imports: [ 
       SharedModule  
      ],
      providers: [  
      ], 
    })
export class TransactionModule{ }

in app.module

     imports: [ 
    SharedModule.forRoot(),
    TransactionModule
  ] ,

please note: I have also tried to put the pipe in the exports section of shared module. that doesnt work either. i'm sure im just missing something silly. does anyone have any ideas?