Angular 7中TypeError: Cannot read properties of undefined (reading 'hasOwnProperty')问题

核心错误信息 #

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'hasOwnProperty')
TypeError: Cannot read properties of undefined (reading 'hasOwnProperty')
    at v (core.js.pre-build-optimizer.js:120:17)
    at Tg (core.js.pre-build-optimizer.js:19748:35)
    at t.get (core.js.pre-build-optimizer.js:20452:16)
    at ym (core.js.pre-build-optimizer.js:20823:45)
    at gm (core.js.pre-build-optimizer.js:20703:32)
    at fm (core.js.pre-build-optimizer.js:20574:20)
    at Wm (core.js.pre-build-optimizer.js:21800:36)
    at Hm (core.js.pre-build-optimizer.js:21714:5)
    at Object.sy [as createRootView] (core.js.pre-build-optimizer.js:22226:12)
    at e.create (core.js.pre-build-optimizer.js:20053:29)
    at F (zone.js.pre-build-optimizer.js:809:31)
    at F (zone.js.pre-build-optimizer.js:775:17)
    at zone.js.pre-build-optimizer.js:858:17
    at t.invokeTask (zone.js.pre-build-optimizer.js:421:31)
    at Object.onInvokeTask (core.js.pre-build-optimizer.js:16126:33)
    at t.invokeTask (zone.js.pre-build-optimizer.js:420:36)
    at e.runTask (zone.js.pre-build-optimizer.js:188:47)
    at g (zone.js.pre-build-optimizer.js:595:35)
    at e.invokeTask [as invoke] (zone.js.pre-build-optimizer.js:500:21)
    at m (zone.js.pre-build-optimizer.js:1517:14)

排查与解决步骤 #

• 检查生产构建优化配置
  Angular 7的--prod构建会启用预构建优化，可能导致部分代码被错误压缩。修改angular.json中的生产构建配置，暂时关闭buildOptimizer和optimization选项，重新部署测试：

  "configurations": {
    "production": {
      "buildOptimizer": false,
      "optimization": false,
      // 保留其他原有配置
    }
  }
  

  若关闭后错误消失，说明是优化器对特定代码的处理存在问题，需定位被错误优化的代码段（比如直接使用hasOwnProperty的逻辑、依赖全局对象的代码），针对性调整。

• 校验路由跳转参数传递
  跳转页面时若传递了未初始化的对象，可能在目标组件初始化时触发错误。确保所有跳转参数都已正确赋值：

  // 错误示例：传递未定义参数
  this.router.navigate(['/next-page'], { queryParams: { data: undefined } });
  // 修正：提前判断参数有效性
  const params = data ? { data } : {};
  this.router.navigate(['/next-page'], { queryParams: params });
  

• 检查组件初始化逻辑与依赖注入
  错误栈指向Angular核心视图创建流程，可能是目标页面组件在初始化时依赖了未定义的服务或变量。检查组件的ngOnInit、构造函数逻辑，确保所有依赖服务已正确注入，且变量在使用前完成初始化。

• 补充缺失的Polyfill
  服务器环境可能缺少部分浏览器原生API的兼容支持，比如Object.prototype.hasOwnProperty的兼容问题。在polyfills.ts中添加对应polyfill：

  import 'core-js/es/object/has-own-property';
  

  同时确保core-js版本与Angular 7兼容（Angular 7通常对应core-js@2.x版本）。

• 复现生产环境进行本地调试
  在本地执行ng build --prod构建生产包，使用http-server等工具启动本地服务器测试，复现问题后可直接在浏览器开发者工具中调试压缩后的代码，更精准定位错误根源。

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