Question 112580 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – angular/cli reports 'this.tree.readText is not a function' when trying to generate a new component

When I try to get angular/cli to generate a new component for me all it does is print the message

this.tree.readText is not a function

and exits.

I am using Ubuntu 22.04 and using ng in a console window.
I am trying to generate a new component in a feature module. I am starting ng in the feature-module directory with the following command:

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

The working directory is similar to:

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

and I’m expecting four new files to be generated in the new folder

~/Develop/my-project/src/app/feature-module/components/my-new-component/

as well as the module file

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

to be updated with the newly generated component.

I’m also getting this behavior on Ubunut 20.04.
A colleague has the same problem on his Mac (an M1) when using ng on the command line, but is not really hampered as he uses IntelliJ and has an extension for generateing new components, rather than using the command line.

I’ve tried googling the problem without any success. I’ve also tried deleting node_modules along with the package-lock.json file and reinstalling all packages but to no avail.

I’m using the following node/typescript/angular versions:

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

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

Does anyone have any idea what I’m doing wrong?

UPDATE

I tried creating a new project, adding a feature module and adding a component to the feature module – everything worked perfectly, so I suppose the problem is being caused by something in the project (or its structure) I’m working on. This is going to be fun…

Tags:

7

Answers


  1. Chosen as BEST ANSWER
    0

    ng was exiting unexpectedly with only the message

    this.tree.readText is not a function

    so I went looking for this.tree.readText in the code. It seems only to be used in the @schematics package in conjuction with reading and writing the workspace. Following the suggestion by @Vega that it might be a version incompatibility issue I checked what was in angular.json against the online documentation - during the project we've continually upgraded from version 8 to 13.

    There was a difference: at the end of the file was the following:

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

    This was added during the migration from TSLint to ESLint. We used the angular-eslint schematic to carry out the migration:

    ng add @angular-eslint/schematics

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

    but I'm not sure anymore if this line was added automatically or whether we added the line afterwards.

    In the online documentation for the Angular Workspace Configuration (cli options) there's no mention of defaultCollection, but there is a schematicCollections. By replacing the cli-options with this:

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

    ng generate started working again. Interestingly enough the JSON-schema for the angular.json file specifies the property defaultCollection but not schematicCollections.


  2. 0

    Thanks!
    Your solution worked to me too. But in this case for my was in:

    "cli": {
"schematicCollections": "@ionic/angular-toolkit",
    Login or Signup to reply.
  3. 0

    Bonjour, so I had the same issue as you has in my Ionic Angular Project and looked for days without finding a clear answer to my problem.

    However your answer lead me to my solution.
    For me my angular.json was also configured like this

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

    and it didn’t allow me to change it to schematicCollections.
    The solution for me ended up being downgrading my @ionic/angular-toolkit from version 7.0.0 to 6.1.0.

    Login or Signup to reply.
  4. 0

    I had an older copy of the angular cli installed in my local project (13.0.1) that was overriding the global version (14.2.5). Removed the local project version and worked.

    npm uninstall    "@angular/cli" --dev
    Login or Signup to reply.
  5. 0

    `

    {
"$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"
}
}
}

    `

    try reemplace angular.json work for my, try and diff for check diferences and analize this json

    Login or Signup to reply.
  6. 0

    In my case needed only update @angular/cli package in project as others angular packages

    Login or Signup to reply.
  7. 0

    This problem happened to me when I tried to add service workers to my app using Angular’s Progressive Web App (PWA) capability. I naïvely ran ng add @angular/pwa, but my global Angular CLI version was newer than my project’s Angular version. That means the @angular/pwa version was too new for my Angular project, which caused the error message that this question describes.

    Here’s how I solved it:

    1. Run npm remove @angular/pwa.
    2. Check https://www.npmjs.com/package/@angular/pwa?activeTab=versions to find the correct version number for your project. The Tag field tells you the Angular version to which the package version corresponds.
    3. Run ng add again for the correct version. For example, run npm add @angular/[email protected] for an old Angular 8 project.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search