Angular 项目 ng 服务失败，在工作实例上发出“错误”事件

Question

问题已解决 - 更新： 原来这是我的 css 代码中的错误：

之前：

.title & .smaller {
  color: $dark-blue;
  font-family: "Roboto";
  font-size: 20px;
  font-weight: 600;
  width: fit-content;
  margin: 0;
  padding: 0;
}

之后：

.title {
  width: fit-content;
  & .smaller {
    color: $dark-blue;
    font-family: "Roboto";
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    padding: 0;
  }
}

---

原始问题：

从昨天开始，我的 ng 服务停止工作了。 我在 Angular 16.2 上开始了这个项目，突然 ngserve 不再工作了。 我尝试更新所有内容，Angular 16.2->17、Node 20.4->20.10、@angular-devkit 16.2->17。 我不明白为什么 ng 服务失败。

这是因为我的代码错误还是版本兼容性问题？

错误消息：

$ ng serve
⠇ Generating browser application bundles (phase: building)...
node:internal/event_target:1088
  process.nextTick(() => { throw err; });
                           ^
TypeError [Error]: Cannot read properties of undefined (reading 'column')
    at convertSourceSpan (C:\Users\LiamSimons\VUB\pixiu_frontend\pixiu_frontend\node_modules\@angular-devkit\build-angular\src\tools\sass\worker.js:153:30)
    at MessagePort.<anonymous> (C:\Users\LiamSimons\VUB\pixiu_frontend\pixiu_frontend\node_modules\@angular-devkit\build-angular\src\tools\sass\worker.js:118:27)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:814:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:326:10)
    at [kOnMessage] (node:internal/worker:337:37)
    at MessagePort.<anonymous> (node:internal/worker:232:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:814:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)

Node.js v20.10.0

NG版本：

Angular CLI: 17.0.7
Node: 20.10.0
Package Manager: npm 9.8.1
OS: win32 x64

Angular: 17.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.7
@angular-devkit/build-angular   17.0.7
@angular-devkit/core            17.0.7
@angular-devkit/schematics      17.0.7
@angular/cdk                    17.0.4
@angular/material               17.0.4
@schematics/angular             17.0.7
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Package.json:

{
  "name": "pixiu-frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.0.7",
    "@angular/cdk": "^17.0.4",
    "@angular/common": "^17.0.7",
    "@angular/compiler": "^17.0.7",
    "@angular/core": "^17.0.7",
    "@angular/forms": "^17.0.7",
    "@angular/material": "^17.0.4",
    "@angular/platform-browser": "^17.0.7",
    "@angular/platform-browser-dynamic": "^17.0.7",
    "@angular/router": "^17.0.7",
    "rxjs": "~7.8.0",
    "tslib": "^2.6.2",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.7",
    "@angular/cli": "~17.0.7",
    "@angular/compiler-cli": "^17.0.7",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.2.2"
  }
}

Answer 1

我认为这个错误与你的代码有关，与 Angular 版本无关， 请注意，代码中的变量具有未定义的值！