为什么 ng serve 突然失败并在 WebPack 中出现错误？答案

【问题标题】：Wny does `ng serve` suddenly fail with an error in WebPack?为什么 ng serve 突然失败并在 WebPack 中出现错误？
【发布时间】：2021-11-11 02:05:05
【问题描述】：

当我尝试运行 ng serve --open 时，我得到以下信息

PS C:\Code\atd> ng serve --open
⠋ Generating browser application bundles (phase: setup)...C:\Code\atd\node_modules\@angular-devkit\build-webpack\src\webpack-dev-server\index.js:79
            const address = devServer.server.address();
                                             ^

TypeError: Cannot read properties of undefined (reading 'address')
    at C:\Code\atd\node_modules\@angular-devkit\build-webpack\src\webpack-dev-server\index.js:79:46
PS C:\Code\atd>

我用谷歌搜索无济于事。

我已删除 node_modules 并运行 npm install。

ng build 运行并构建良好。

我很困惑。

有谁知道为什么会突然出现这个错误？

编辑：添加我的 package.json：

{
  "name": "angular-for-rank-beginners",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --ssl true --ssl-key /node_modules/browser-sync/lib/server/certs/server.key --ssl-cert /node_modules/browser-sync/lib/server/certs/server.crt",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "scully": "scully",
    "scully:serve": "scully serve"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.0.0",
    "@angular/cdk": "^13.0.0",
    "@angular/common": "^13.0.0",
    "@angular/compiler": "^13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/forms": "^13.0.0",
    "@angular/material": "^13.0.0",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@ngrx/store": "^12.5.1",
    "acorn": "^8.5.0",
    "core-js": "^3.19.1",
    "npm-merge-driver": "^2.3.5",
    "rxjs": "^6.6.7",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.0.1",
    "@angular/cli": "^13.0.1",
    "@angular/compiler-cli": "^13.0.0",
    "@angular/language-service": "^13.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^13.13.52",
    "codelyzer": "^6.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.6.2",
    "typescript": "^4.3.5"
  }
}

【问题讨论】：

你没有包含任何版本信息...
@RoddyoftheFrozenPeas -- 谢谢 -- 添加了我的 package.json 文件
你能试试npx ng serve --open吗？
@yurzui -- 感谢您的建议 -- 但我得到了相同的结果。

标签： angular webpack

【解决方案1】：

很可能是 SSL 的问题。对我来说，这是 SSL 密钥中的密码。

【讨论】：

有趣——大概就是这样！我相信这个分支增加了一些 SSL 的东西——我来看看。
就是这样——我的 *.key 和 *.crt 文件丢失了，在 angular.json 文件中被引用了。谢谢！

【解决方案2】：

有同样的问题，原来@angular-devkit/build-angular 和其他一些库中的webpack-dev-server 版本不匹配。 Devkit 最终使用的服务器版本比预期的要旧。

通过在package.json 中明确指定webpack-dev-server 的版本解决了这个问题。

【讨论】：

webpack-dev-server 对你有用吗？
@btlm，我们使用的是 4.7.3 版本

【解决方案3】：

我今天在 Angular 13 上随机得到这个，与 SSL 无关。只需要删除 node_modules 和 npm install。

【讨论】：

【解决方案4】：

我们在我们的一个项目中看到了这个错误，正如@absence 提到的，它似乎与webpack-dev-server 及其一些依赖项之间的版本不匹配有关。但是，即使仔细比较了我们的package.json 和 node_modules 文件夹，我们也无法在依赖树中找到任何相关的差异。

最终我们将问题追踪到 tsconfig.json，其中包含以下 paths 键：

    "paths": {
     "*": ["node_modules/*"]
    }

不知何故，这影响了加载的库，删除该设置为我们解决了问题。

【讨论】：