Angular 6迁移后路由导航报错：Cannot read property 'OVERWRITE' of undefined

问题重现 #

你在把Angular 5应用升级到Angular 6后，执行这段路由导航代码时遇到了报错：

this.router.navigate(['doctor-log-in']).then(function (res) { 
  console.log(res); 
}, function (err) { 
  console.log('in errrrr'); 
  console.log(err); 
});

错误详情：

main.9819f0c7d0ec0efd5341.js:1 TypeError: Cannot read property 'OVERWRITE' of undefined at new n (main.9819f0c7d0ec0efd5341.js:1) at n.applyServerOverwrite

问题分析 #

这个错误大概率是Angular Router依赖版本不兼容或者第三方路由相关库未适配Angular 6导致的。Angular 6对Router模块做了不少内部API调整，旧版本的依赖或者未更新的第三方库很容易触发这类未定义属性的运行时错误。

可行的解决方案 #

1. 统一所有Angular核心包版本 #

Angular 6要求所有@angular/*系列包的版本必须保持一致（均为6.x.x），如果你的package.json里@angular/router版本和@angular/core、@angular/cli不一致，就会出现版本冲突。

• 先检查package.json中的依赖版本，确保没有混合5.x和6.x的Angular包
• 执行命令统一更新Router：

  npm install @angular/router@6.x.x --save
  

• 更推荐用Angular CLI的官方更新工具自动处理所有依赖：

  ng update @angular/cli @angular/core
  

2. 排查并更新第三方路由相关依赖 #

如果你的项目用了第三方库（比如Angular Universal、自定义路由守卫插件、路由序列化工具等），这些库可能还没适配Angular 6的Router变化。

• 先暂时移除这类库，测试路由导航是否正常，确认是否是第三方库导致的问题
• 查看对应库的官方文档，更新到兼容Angular 6的版本

3. 清理缓存并重新构建项目 #

迁移后可能残留旧版本的缓存代码，导致运行时冲突：

# 删除node_modules和锁定文件
rm -rf node_modules package-lock.json
# 清理npm缓存
npm cache clean --force
# 重新安装依赖
npm install
# 重新构建生产环境包
ng build --prod

4. 检查自定义Router扩展代码 #

如果你项目中自定义了UrlSerializer、路由拦截器或者其他Router相关的扩展逻辑，Angular 6对这些API有细微调整，需要适配新版本的接口规范。比如UrlSerializer的parse和serialize方法签名可能有变化，需要对照Angular 6的官方文档调整。

5. 检查Angular Universal配置（如果使用） #

错误中的applyServerOverwrite提示和服务端渲染相关，如果你用了Angular Universal：

• 确保Universal的版本已经适配Angular 6
• 检查服务端的路由配置代码，移除旧版本的遗留逻辑，确保和客户端路由配置一致

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