Angular 13升级后自定义shortDate管道无法识别编译报错问题

报错信息：Property 'shortDate' does not exist on type 'TransactionsComponent'，从Angular 6升级至13版本后出现，旧版本代码可正常运行。

1. 优先修复模板语法错误（直接触发当前报错的原因） #

你当前模板的管道调用写法完全错误：

<!-- 错误写法 -->
<div class="dt">{{transaction.transactionDate | date: shortDate}}</div>

这个写法的语义是：调用内置date管道，把组件类上名为shortDate的属性作为参数传给date管道——但你的组件类上根本没有这个属性，编译器自然会报找不到属性的错误。

你定义的是名为shortDate的独立自定义管道，正确调用方式不需要加date:前缀：

<!-- 正确写法 -->
<div class="dt">{{transaction.transactionDate | shortDate}}</div>

2. 修正SharedModule配置错误 #

你提到已经把管道加入exports数组但问题依旧，对照以下点逐一修正：

• 首先移除SharedModule里对BrowserModule、AppRoutingModule的导入和导出：BrowserModule只能在根模块AppModule中导入一次，SharedModule中要替换为CommonModule来提供内置模板指令、管道能力，跨模块导入/导出BrowserModule在Angular 13的Ivy编译模式下会直接导致模块作用域异常。
• 自定义管道必须同时加入declarations和exports数组，不需要放在forRoot()的providers列表里——有@Pipe()装饰器的类只要正确声明导出即可跨模块使用，放到providers里反而会在Ivy下出现作用域冲突。

修正后的SharedModule参考：

@NgModule({
  declarations: [  
    DateFormatPipe 
  ],
  imports: [ 
    CommonModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule, 
    HttpInterceptorModule
  ],
  exports: [ 
    CommonModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    HttpInterceptorModule,
    DateFormatPipe // 必须显式导出管道，其他导入SharedModule的模块才能使用
  ],   
})
export class SharedModule {
    static forRoot(): ModuleWithProviders<SharedModule> {
      return {
        ngModule: SharedModule,
        providers: [] // 不要把管道放在这里
      };
    }
  } 

3. 补全自定义管道的Angular 13兼容写法 #

你当前的管道类缺少构造函数注入，继承DatePipe时不注入LOCALE_ID会在运行时报错，修正后代码：

import { PipeTransform, Pipe, LOCALE_ID, Inject } from '@angular/core';
import { DatePipe } from '@angular/common';
    
@Pipe({
  name: 'shortDate'
})
export class DateFormatPipe extends DatePipe implements PipeTransform {
  constructor(@Inject(LOCALE_ID) locale: string) {
    super(locale);
  }

  override transform(value: any, args?: any): any {
    return super.transform(value, "MM/dd/yyyy");
  }
}

4. 检查业务模块配置 #

• 确认TransactionsComponent已经加入TransactionModule的declarations数组，你当前贴的TransactionModule的declarations为空，组件未在所属模块声明的话，模板编译逻辑会完全异常。
• TransactionModule正常导入SharedModule即可，不需要额外声明管道或加管道相关provider。
• AppModule中保留SharedModule.forRoot()和TransactionModule的导入即可，不需要额外再声明DateFormatPipe。

最后验证步骤 #

全部改完后：

• 停掉本地开发服务，删除项目根目录下的.angular缓存文件夹
• 重新执行ng serve启动项目，不要复用旧的构建缓存
• 全局搜索模板文件，确认没有其他地方把shortDate当成组件属性传参的错误写法

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