You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular项目ng serve启动失败问题排查及解决

问题解决更新

经排查,问题根源在于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 serve命令突然无法正常运行。项目最初基于Angular 16.2开发,无预警情况下该命令失效。已尝试升级所有相关依赖:Angular从16.2升至17,Node从20.4升至20.10,@angular-devkit从16.2升至17,但仍无法确定失败原因。请问这是代码错误还是版本兼容性问题?

错误信息
$ 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
Angular版本信息
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"
  }
}

内容的提问来源于stack exchange,提问作者Liam Simons

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.04 01:54:51