Angular 14升级至17后RouterModule与自定义管道报错求助

一、RouterLinkActive相关错误 #

错误信息 #

error NG8002: Can't bind to 'routerLinkActive' since it isn't a known property of 'a'.
error NG8003: No directive found with exportAs 'routerLinkActive'.

对应HTML代码 #

<div class=""><a [routerLink]="['/my-stuff/notifications']"  class="btn position-relative p-0 ps-2" [routerLinkActive]="['active']" #notifications="routerLinkActive">  
  <i *ngIf="!notifications.isActive" class="bi-envelope" style="font-size: 19.5px; color: black;"></i>
  <i *ngIf="notifications.isActive" class="bi-envelope-fill" style="font-size: 19.5px; color: black;"></i>
  <span *ngIf="notificationcount && notificationcount>0" class="position-absolute  top-0 start-100 translate-middle badge rounded-pill bg-primary">
</div>

修复步骤 #

• NgModule模式：检查app.module.ts的imports数组，确保已导入RouterModule.forRoot(...)，路由模块已包含RouterLinkActive指令，无需单独导入。
• 独立组件模式：在使用该链接的组件的imports数组中添加RouterModule，或者直接导入RouterLinkActiveDirective和RouterLinkDirective：

  imports: [RouterModule, ...]
  

• 你的[routerLinkActive]="['active']"绑定语法符合规范，无需修改。

二、自定义管道dateago找不到的错误 #

错误信息 #

Error: src/app/notifications/notifications.component.html:21:47 - error NG8004: No pipe found with name 'dateago'.

修复步骤 #

1. 清理管道代码：移除不必要的Component导入，只保留管道相关依赖：

   import { Pipe, PipeTransform } from '@angular/core';
   import { formatDate } from "@angular/common";
   import { Inject, LOCALE_ID } from '@angular/core';
   

2. 设置管道为独立模式：在@Pipe装饰器中添加standalone: true，适配Angular 17的独立组件体系：

   @Pipe({
     name: 'dateago',
     standalone: true
   })
   

3. 导入管道：
   • NgModule模式：在app.module.ts的declarations和exports数组中添加DateagoPipe；
   • 独立组件模式：在使用该管道的组件的imports数组中添加DateagoPipe。

整体升级注意事项 #

• 严格按Angular官方步骤逐步升级（14→15→16→17），避免跨版本跳跃引发兼容问题；
• 独立组件模式下，所有用到的指令、管道、模块都需要在组件的imports中显式导入，不再依赖NgModule全局声明；
• 排查模板中所有绑定语法，Angular 16+对过时语法校验更严格，类似routerLink的括号问题需逐一修正。

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