Angular CLI生成组件报错this.tree.readText is not a function

问题表现 #

执行组件生成命令时，命令行输出错误后直接退出：

this.tree.readText is not a function

• 复现环境：Ubuntu 20.04/22.04、M1芯片Mac
• 执行命令（在特性模块目录下运行）：

ng g c components/my-new-component --change-detection OnPush

• 工作目录：~/Develop/my-project/src/app/feature-module
• 预期结果：在~/Develop/my-project/src/app/feature-module/components/my-new-component/路径下生成4个组件文件，自动更新同目录下的feature-module.module.ts完成组件声明注册
• 已尝试操作：删除node_modules目录与package-lock.json后重装依赖，问题未解决；新建空白Angular项目执行相同生成流程无异常；使用IntelliJ内置组件生成扩展操作不受影响

根因分析 #

从环境版本信息可以明确问题来源是Angular生态依赖跨大版本不匹配：

• 核心Angular框架、Angular CLI版本均为13.x系列
• 但@angular-devkit/core、@angular-devkit/schematics、@schematics/angular三个依赖版本为14.0.3

readText是Angular DevKit 14版本才为虚拟文件树（Tree）对象新增的API，13版本的CLI运行时加载到14版本的schematic逻辑时，传入的Tree实例不存在该方法，直接触发报错。新建空白项目无问题是因为官方创建项目时会强制对齐所有Angular相关依赖的大版本，不会出现版本错位；IntelliJ内置组件生成功能不受影响，是因为IDE自带了适配项目版本的schematic运行逻辑，不会加载项目中错位版本的依赖包。

修复步骤 #

• 对齐依赖版本
  打开项目根目录的package.json，将所有devkit相关依赖的版本固定为与Angular CLI一致的13.3.8，和其他Angular包大版本保持对齐：

  {
    "devDependencies": {
      "@angular-devkit/core": "13.3.8",
      "@angular-devkit/schematics": "13.3.8",
      "@schematics/angular": "13.3.8",
      "@angular/cli": "13.3.8"
    }
  }
  

  修改完成后，删除项目根目录下的node_modules文件夹与package-lock.json文件，重新执行npm install安装依赖。
• 排查第三方schematics插件
  如果对齐版本后问题仍存在，检查项目中安装的第三方代码生成插件（比如自定义组件模板、第三方UI库的代码生成工具），这类插件如果声明依赖14.x版本的DevKit，会在node_modules中嵌套安装高版本依赖导致加载错误，将对应插件降级到适配Angular 13的版本即可。
• 验证修复
  回到特性模块目录，重新执行组件生成命令，确认组件文件正常生成、模块声明自动更新即修复完成。

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