Angular 5迁移至6后Router导航失效，出现OVERWRITE未定义错误

先明确说：这个错误和Angular路由本身无关，从错误栈里的databaseFromApp、createRepo这些方法能看出来，是你集成的Firebase相关库和Angular 6版本不匹配导致的——具体是Firebase实时数据库模块初始化时找不到OVERWRITE常量，大概率是Firebase SDK或者AngularFire（Angular的Firebase封装库）版本没跟上Angular 6的要求。

你的场景回顾 #

将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 (main.9819f0c7d0ec0efd5341.js:1) at n.updateInfo_ (main.9819f0c7d0ec0efd5341.js:1) at new n (main.9819f0c7d0ec0efd5341.js:1) at n.createRepo (main.9819f0c7d0ec0efd5341.js:1) at n.databaseFromApp (main.9819f0c7d0ec0efd5341.js:1) at Object.e.INTERNAL.registerService.Reference [as database] (main.9819f0c7d0ec0efd5341.js:1) at n._getService (main.9819f0c7d0ec0efd5341.js:1) at n.u.(anonymous function) [as database] (http://localhost:4200/main.9819f0c7d0ec0efd5341.js:1:954493) at new n (main.9819f0c7d0ec0efd5341.js:1)

具体解决步骤 #

1. 升级AngularFire和Firebase SDK到兼容版本

Angular 6需要搭配AngularFire2 v5.x和Firebase SDK v5.x，旧版本的库不支持Angular 6的依赖结构。执行以下命令彻底升级：

# 先卸载旧版本
npm uninstall angularfire2 firebase
# 安装适配Angular 6的稳定版本（经过验证的兼容组合）
npm install angularfire2@5.1.1 firebase@5.5.9 --save

2. 更新Firebase初始化代码

AngularFire v5.x开始改用@angular/fire命名空间，不再是旧版的angularfire2，修改app.module.ts里的导入和配置：

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

// 从Firebase控制台获取的项目配置信息
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  databaseURL: "你的DATABASE_URL",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID"
};

@NgModule({
  imports: [
    // ...其他模块（比如BrowserModule、RouterModule等）
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule // 如果用到实时数据库则添加
  ],
  // ...其他配置
})
export class AppModule { }

3. 清理缓存并重新构建

升级依赖后，必须清理缓存避免旧代码残留：

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

4. 验证修复

完成以上步骤后，重启应用，再调用路由导航代码即可正常运行。建议把路由回调改成箭头函数，更符合Angular的写法：

this.router.navigate(['doctor-log-in'])
  .then(res => console.log('导航成功:', res))
  .catch(err => console.error('导航失败:', err));

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