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
相关产品推荐
相关产品推荐

