Ubuntu 22.04环境下无法启动、构建或测试Angular 15项目求助

问题背景 #

Ubuntu 22.04环境中使用Angular 15开发项目，执行ng serve、ng build或ng test时，进程持续加载直至被系统终止。项目package.json配置如下：

{
  "name": "a",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "e2e": "ng e2e",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "bootstrap": "^5.2.3",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular/cli": "~15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@cypress/schematic": "^2.3.0",
    "@types/jasmine": "~4.3.0",
    "cypress": "latest",
    "jasmine-core": "~4.5.0",
    "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.8.2"
  }
}

Angular配置文件（angular.json）为标准结构，包含build、serve等基础架构配置，assets、styles路径均为默认设置。

排查与解决步骤 #

1. 检查Node.js版本兼容性 #

Angular 15要求Node.js版本为14.20.x、16.13.x或18.10.x（LTS版本），Ubuntu 22.04默认版本可能不匹配，导致构建进程异常。

• 执行node -v查看当前版本
• 若版本不符，使用nvm切换兼容版本：

  # 安装nvm
  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
  # 重启终端后安装并切换到16.20.2（Angular 15兼容的稳定版本）
  nvm install 16.20.2
  nvm use 16.20.2
  

2. 缓解内存不足问题 #

系统内存不足会导致进程被内核强制终止，可通过两种方式解决：

• 增加Node.js内存限制：

  ng serve --max_old_space_size=4096
  ng build --max_old_space_size=4096
  

• 临时添加swap空间（物理内存不足时）：

  sudo fallocate -l 4G /swapfile
  sudo chmod 600 /swapfile
  sudo mkswap /swapfile
  sudo swapon /swapfile
  

3. 清理缓存与重建依赖 #

缓存损坏是常见的构建卡死原因，执行以下操作重置：

# 删除Angular CLI全局缓存
rm -rf ~/.angular/cache
# 删除项目本地依赖与锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

4. 修复文件系统权限 #

项目目录权限不足会导致Angular无法读写文件，引发进程停滞：

• 检查目录权限：ls -ld /path/to/your/project
• 修改所有者为当前用户：

  sudo chown -R $USER:$USER /path/to/your/project
  

5. 锁定Cypress版本避免冲突 #

devDependencies中cypress: "latest"可能与Angular 15存在版本冲突，将其锁定为兼容版本：

• 修改package.json中Cypress版本为"cypress": "^12.17.4"
• 执行npm install更新依赖

6. 检查TypeScript配置 #

tsconfig.json中的错误配置会导致编译进程卡死，确保：

• compilerOptions.target设置为ES2022或更低
• compilerOptions.module设置为ES2020
• 无错误的路径映射或严格模式设置

内容的提问来源于stack exchange，提问作者Jochem Bergers