Angular CLI选CanDeactivate却生成CanActivate guard如何解决？

触发原因 #

该问题为Angular CLI 14.0~15.2范围内部分小版本的已知bug，交互式选择守卫类型时会出现选项与实际生成接口不匹配的问题。

修复方案 #

方案1：直接指定生成参数（无需调整CLI版本） #

生成守卫时跳过交互式选择，直接在命令中声明要实现的接口：

ng generate guard 你的守卫名称 --implements CanDeactivate

生成后直接得到符合要求的CanDeactivate守卫代码，不会出现类型错误。

方案2：手动修正错误生成的代码 #

如果已经生成了错误的CanActivate守卫，直接修改代码即可：

• 把引入的CanActivate替换为CanDeactivate
• 把类实现的接口从implements CanActivate改为implements CanDeactivate<T>，其中T为该守卫要作用的组件类
• 把canActivate()方法替换为CanDeactivate接口要求的canDeactivate()方法，标准结构示例：

canDeactivate(
  component: T,
  currentRoute: ActivatedRouteSnapshot,
  currentState: RouterStateSnapshot,
  nextState: RouterStateSnapshot
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
  // 你的守卫逻辑
}

方案3：升级CLI修复根因 #

升级全局及项目内的Angular CLI到最新稳定版即可修复该生成bug：

1. 卸载旧版本CLI：
   npm uninstall -g @angular/cli
2. 安装最新稳定版CLI：
   npm install -g @angular/cli@latest
3. 进入项目目录更新本地CLI依赖：
   ng update @angular/cli @angular/core

验证步骤 #

生成或修改完成后，检查守卫文件满足以下两个条件即可正常使用：

• 顶部引入了@angular/router包的CanDeactivate接口
• 守卫类正确实现了canDeactivate()方法

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