Angular项目启动报错Cannot read property 'length' of undefined求助

核心问题 #

你的环境存在严重版本不兼容：

• Angular CLI 1.6.7（对应Angular 5.x）与Webpack 5.75.0完全不匹配，Angular 5时代的CLI依赖Webpack 3.x版本
• @angular-devkit/* 14.2.9是Angular 14的工具包，和Angular 5项目完全不兼容，这是导致各类undefined属性错误的根本原因

错误溯源 #

你最初遇到的Cannot read property 'write' of undefined和当前的Cannot read property 'length' of undefined，本质都是高版本Webpack/Devkit与低版本Angular CLI不兼容，导致内部方法调用时找不到预期属性。

分步解决方案 #

1. 清理现有依赖 #

删除项目的依赖目录和锁文件：

# Windows系统
rd /s /q node_modules && del package-lock.json

# macOS/Linux系统
rm -rf node_modules package-lock.json

2. 锁定兼容版本 #

根据Angular 5.x版本，必须匹配以下兼容依赖：

• Node.js：推荐v8.x ~ v10.x（v14.x对Angular 5来说版本过高）
• npm：v5.x ~ v6.x（你的npm 6.14.8可保留，但需同步降级Node.js）
• Webpack：3.12.0（Angular CLI 1.6.x内置的适配版本）
• @angular-devkit相关包：全部移除，Angular 5.x不依赖该类工具包（Angular 6+才引入）

修改package.json，确保依赖项符合版本匹配要求：

{
  "dependencies": {
    "@angular/cdk": "5.2.5",
    "@angular/material": "5.2.5",
    "@angular/material-moment-adapter": "5.2.5",
    // 保留你的Angular 5.x核心依赖（如@angular/core@5.x等）
  },
  "devDependencies": {
    "@angular/cli": "1.6.7",
    "@ngtools/webpack": "1.9.7",
    "typescript": "2.6.2",
    "webpack-bundle-analyzer": "2.13.1", // 降级到兼容Webpack 3的版本
    "webpack-node-externals": "1.7.2"
  }
}

3. 重新安装依赖并启动项目 #

npm install
ng serve

4. 长期维护建议：升级到稳定LTS版本 #

如果需要长期维护项目，建议逐步升级到Angular LTS版本（如Angular 14/15）：

• 遵循官方升级指南，从Angular 5依次升级到6、7...直到目标版本
• 每次升级同步更新对应版本的CLI、Webpack、Node.js等依赖

关键注意事项 #

• 不要混合不同大版本的Angular工具链，每个Angular大版本对应的CLI、Webpack、Node.js版本都有严格的兼容性要求
• 管理多版本Node.js可使用nvm（Node Version Manager），避免全局版本冲突

内容的提问来源于stack exchange，提问作者Mobile and PC Tactics