Angular 10升级至14后@gilsdav/ngx-translate-router报错如何解决

将Angular从10版本升级至14版本后，@gilsdav/ngx-translate-router出现报错，将该依赖包更新至最新版本后错误仍未消除，报错信息见下图：

按顺序执行以下操作即可解决该问题：

• 校验依赖版本匹配性
  首先执行命令检查依赖版本冲突：

  npm ls @gilsdav/ngx-translate-router @ngx-translate/core @angular/router
  

  该依赖包从6.0.0版本开始才正式适配Angular 14，若因npm源缓存安装了低于6.0.0的版本，直接安装对应适配版本即可：

  npm install @gilsdav/ngx-translate-router@6.1.0 --save-exact
  

  注意同时保证@ngx-translate/core版本不低于14.0.0，和Angular主版本保持一致。
• 修正模块导入写法
  Angular 14对ESM模块导入规则校验更严格，旧版本支持的深层路径导入在新版本下会触发模块导出不存在的报错，统一使用包顶层入口导入模块：

  // 错误写法（旧版本兼容，Angular14下报错）
  // import { LocalizeRouterModule } from '@gilsdav/ngx-translate-router/localize-router';
  
  // 正确写法
  import { LocalizeRouterModule, LocalizeRouterSettings } from '@gilsdav/ngx-translate-router';
  

• 临时兼容路由严格类型校验
  如果前两步操作完成后仍报路由配置类型不匹配错误，可在tsconfig.json的Angular编译配置项中临时关闭严格模式做兼容，等待依赖包后续完全适配Angular 14的路由类型定义后再重新开启：

  "angularCompilerOptions": {
    "strictTemplates": false,
    "strictInjectionParameters": false
  }
  

• 清理缓存重新构建
  最后清除本地依赖缓存和Angular构建缓存，重新安装依赖启动项目即可：

  rm -rf node_modules package-lock.json dist .angular
  npm install
  npm start
  

注意：如果是使用yarn作为包管理器，将上述命令中npm相关操作替换为yarn对应命令即可，缓存目录对应为.yarn/cache。

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