Angular项目执行ng serve后出现Channel: Error in handleResponse错误求助

问题现象 #

新创建的Angular项目执行ng serve后应用成功加载，但数秒后控制台抛出以下异常：

Channel: Error in handleResponse UNK/SW_UNREACHABLE options getValue
_handleResponsePromise @ commons.js:2
(anonymous) @ commons.js:2
7commons.js:2 
Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
fromGeneric @ commons.js:2
fromAny @ commons.js:2
_handleResponsePromise @ commons.js:2
(anonymous) @ commons.js:2

项目依赖信息 #

项目package.json中的依赖配置如下：

"dependencies": {
    "@angular/animations": "^14.1.0",
    "@angular/common": "^14.1.0",
    "@angular/compiler": "^14.1.0",
    "@angular/core": "^14.1.0",
    "@angular/forms": "^14.1.0",
    "@angular/material": "^7.0.0",
    "@angular/platform-browser": "^14.1.0",
    "@angular/platform-browser-dynamic": "^14.1.0",
    "@angular/router": "^14.1.0",
    "jwt-decode": "^3.1.2",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.1.1",
    "@angular/cli": "~14.1.1",
    "@angular/compiler-cli": "^14.1.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.2.0",
    "jwt-decode": "^3.1.2",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }

排查与解决步骤 #

1. 修复核心依赖不兼容问题 #

从依赖版本可以明显看出，Angular Material 7.0.0与Angular 14.1.0版本严重不匹配。Angular Material的版本必须与Angular核心框架版本保持一致（如Angular 14对应Material 14.x），版本差距过大会导致内部模块通信异常，触发这类连接失败错误。

执行以下步骤修复：

• 卸载旧版Angular Material：

  npm uninstall @angular/material
  

• 安装与Angular 14匹配的Material版本：

  npm install @angular/material@14.2.7
  

• 清理缓存并重建项目：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  ng serve
  

2. 额外排查方向 #

如果上述操作后问题仍存在，可尝试：

• 临时禁用浏览器中的广告拦截器、代理类扩展，这类工具可能干扰Service Worker的正常运行
• 检查项目中是否存在手动配置的Service Worker代码，暂时移除后测试是否仍报错

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