当尝试生成新组件时，Angular/CLI报告“this.tree.readText不是一个函数”的错误。

Question

当我尝试使用angular/cli为自己生成新的组件时，它只会输出以下信息：

this.tree.readText is not a function

并退出。

我正在使用Ubuntu 22.04，通过控制台窗口使用ng。 我正在尝试在功能模块中生成一个新组件。我在功能模块目录中使用以下命令启动ng：

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/

以及模块文件

~/Develop/my-project/src/app/feature-module/feature-module.module.ts

将新生成的组件更新。

我在Ubuntu 20.04上也遇到了这种情况。一位同事在使用命令行 ng 时，在他的Mac电脑（M1）上也遇到了同样的问题，但他没有受到影响，因为他使用IntelliJ并且有一个扩展程序可以生成新组件，而不是使用命令行。

我尝试过在Google上搜索这个问题，但没有任何成功。我还尝试删除node_modules以及package-lock.json文件，并重新安装所有包，但无济于事。

我正在使用以下版本的node/typescript/angular：

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.3.8
Node: 14.19.2
Package Manager: npm 6.14.17
OS: linux x64

Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.8
@angular-devkit/build-angular   13.3.8
@angular-devkit/core            14.0.3
@angular-devkit/schematics      14.0.3
@angular/cdk                    13.3.9
@angular/cli                    13.3.8
@angular/material               13.3.9
@schematics/angular             14.0.3
rxjs                            6.6.7
typescript                      4.5.5

有人知道我哪里做错了吗？

更新

我尝试创建一个新项目，添加一个功能模块并向该功能模块添加一个组件 - 一切都完美地运作了，所以我想问题应该是由我正在工作的项目（或其结构）中的某些东西引起的。这将是很有趣的......

- roadkill

---

你是否已经安装了jQuery？ - Vega

@Vega 不，你为什么问？ - roadkill

快速研究表明缺少一些jQuery包。只是为了澄清这一点。 - Vega

看起来大约1.5个月前有一个关于https://github.com/angular/angular-cli/issues/23072的错误报告。 - Vega

@Vega 我找到问题了 - 在 angular.json 文件中有一个可选的 cli 部分，用于项目特定的 cli 选项。在从 tslint 迁移到 eslint 时，添加了此部分，并将属性 defaultCollection 设置为 "@angular-eslint/schematics"。在 Angular 13 的文档中没有列出这个选项，不过列出了 schematicCollections。将 defaultCollection 替换为 schematicCollections 即可解决问题。不幸的是，angular.json 的 JSON-schema 指定了 defaultCollection 而不是 schematicCollections，所以我的 IDE (vs code) 发现了一个问题。 - roadkill

Answer 1

你好，我在我的Ionic Angular项目中遇到了与你相同的问题，并且寻找了几天也没有找到明确的解决方案。

然而，你的答案引导我找到了解决办法。 对我来说，我的`angular.json`也是这样配置的。

"cli": {
  "defaultCollection": "@ionic/angular-toolkit"
}

而且它不允许我将其更改为 schematicCollections。 对我来说，解决方案是将我的 @ionic/angular-toolkit 版本从 7.0.0 降级到 6.1.0。

- Luke

---

在我的电脑上，我不得不升级到6.1.0版本。之前，我已经将我的应用程序从ionic 5 angular 7升级到ionic 6 angular 9。不知何故，这导致了与@ionic/angular-toolkit（2.3.3）的版本不兼容。 - Samuel Mutemi

我在开发依赖项中使用了@ionic/angular-toolkit版本7，而在依赖项中使用了"@ionic/angular": "^6.3.2"，这导致了错误的出现。 - user1383029

我也遇到了同样的问题。通过删除这一行 "defaultCollection": "@ionic/angular-toolkit" 并运行生成新组件命令，问题得以解决。我很快就会重新升级/修复软件包，所以这只是一个临时解决方案。 - elainr5

Answer 2

ng意外退出并仅显示以下信息

this.tree.readText is not a function

因此我在代码中查找了this.tree.readText。它似乎只在@schematics包中与读取和写入工作区一起使用。根据@Vega的建议，我检查了angular.json 中的内容与在线文档进行比对 - 在项目中，我们不断地从版本8升级到版本13。

有一个区别: 文件末尾添加了以下内容:

"cli": {
  "defaultCollection": "@angular-eslint/schematics"
}

这是在从TSLint迁移到ESLint期间添加的内容。我们使用了angular-eslint原理图来执行迁移：

ng add @angular-eslint/schematics

ng g @angular-eslint/schematics:convert-tslint-to-eslint

但我不确定这行是否是自动添加的，或者我们后来添加了这行。

在Angular Workspace Configuration (cli options)的在线文档中没有提到defaultCollection，但有一个schematicCollections。通过使用以下内容替换 cli-options：

"cli": {
  "schematicCollections": ["@angular-eslint/schematics"]
}

ng generate 又开始工作了。有趣的是，angular.json 文件的 JSON-schema 指定了 defaultCollection 属性，但没有指定 schematicCollections。

- roadkill

---

这很清晰，直接解决了我的问题。非常感谢。 - AWE FRANCIS OLAWUMI

Answer 3

谢谢！你的解决方案对我也有用。但在我的情况下，问题出现在：

"cli": {
"schematicCollections": "@ionic/angular-toolkit",

- Andrés Chávez

---

你能分享一下你的 angular.json 文件吗？ - Ravi Mehta

Answer 4

我在本地项目中安装了一个较旧的angular cli副本 (13.0.1)，它覆盖了全局版本(14.2.5)。删除本地项目版本后，问题解决了。

npm uninstall    "@angular/cli" --dev

- Jimmy

Answer 5

当我使用Angular的渐进式Web应用程序（PWA）功能为我的应用程序添加服务工作者时，遇到了这个问题。我天真地运行了ng add @angular/pwa，但是我的全局Angular CLI版本比我的项目的Angular版本更新。这意味着@angular/pwa版本对于我的Angular项目来说过于新，导致了与此问题描述相同的错误消息。

以下是我解决它的方法：

1. 运行npm remove @angular/pwa。
2. 检查https://www.npmjs.com/package/@angular/pwa?activeTab=versions，找到适合您的项目的正确版本号。 Tag字段告诉您软件包版本对应的Angular版本。
3. 再次运行正确版本的ng add。例如，对于旧的Angular 8项目，请运行npm add @angular/pwa@0.803。

- Gary Sheppard

Answer 6

`

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
"src/theme/variables.scss",
"src/global.scss"
],
"scripts": [],
"aot": false,
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"ci": {
"progress": false
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
},
"ci": {
"progress": false
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"styles": [],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"devServerTarget": "app:serve:production"
},
"ci": {
"devServerTarget": "app:serve:ci"
}
}
},
"ionic-cordova-serve": {
"builder": "@ionic/cordova-builders:cordova-serve",
"options": {
"cordovaBuildTarget": "app:ionic-cordova-build",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"cordovaBuildTarget": "app:ionic-cordova-build:production",
"devServerTarget": "app:serve:production"
}
}
},
"ionic-cordova-build": {
"builder": "@ionic/cordova-builders:cordova-build",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
}
}
}
}
}
},
"cli": {
"schematicCollections": [
"@ionic/angular-toolkit"
],
"analytics": "e312721c-a7d5-4f36-99b4-b0f94f4ee24d"
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}

`

尝试替换angular.json使其适用于我，尝试使用diff检查差异并分析此json

- Ivan Diaz

Answer 7

在我的情况下，只需要更新项目中的@angular/cli包，而不是其他angular包。

- Aden Kurmanov