10

These days I'm developing an angular-CLI project. Yesterday when I tried to make a new module in there, the terminal gave an error saying

Cannot read properties of undefined (reading 'kind')
(only this error there wasn't any other explanations)

Then I found in the same way angular doesn't allow to make new components and give the same error. But there isn't any problem with the ng serve command. It works properly.

It would be a great help if you help me to solve this problem. I'll include some files. But if you want more details please mention them as comments because I can't understand where is the problem. Thanks in advance

package.json

{
  "name": "chess-cabin-front",
  "version": "0.0.0",
  "scripts": {
    "android": "ns run android --no-hmr",
    "ios": "ns run ios --no-hmr",
    "mobile": "ns run",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.4",
    "@angular/cdk": "^11.2.5",
    "@angular/common": "~11.0.4",
    "@angular/compiler": "~11.0.4",
    "@angular/core": "~11.0.4",
    "@angular/forms": "~11.0.4",
    "@angular/localize": "~11.0.4",
    "@angular/material": "^11.2.5",
    "@angular/platform-browser": "~11.0.4",
    "@angular/platform-browser-dynamic": "~11.0.4",
    "@angular/router": "~11.0.4",
    "@ctrl/ngx-emoji-mart": "^6.0.0",
    "@nativescript/angular": "~10.1.0",
    "@nativescript/core": "~7.0.0",
    "@nativescript/theme": "~2.5.0",
    "@ng-bootstrap/ng-bootstrap": "^9.1.3",
    "@types/jquery": "^3.5.5",
    "admin-lte": "^3.1.0-rc",
    "angular-in-memory-web-api": "^0.11.0",
    "angularx-social-login": "^3.5.7",
    "bootstrap": "^4.6.0",
    "emojionearea": "^3.4.2",
    "font-awesome": "^4.7.0",
    "ionicons": "^5.2.3",
    "jquery": "^3.5.1",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.4",
    "@angular/cli": "~11.0.4",
    "@angular/compiler-cli": "~11.0.4",
    "@nativescript/android": "8.0.0",
    "@nativescript/schematics": "^11.2.0",
    "@nativescript/tslint-rules": "~0.0.5",
    "@nativescript/webpack": "~3.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ngx-progressbar": "^6.1.1",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  },
  "main": "main.tns.js"
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Chess-Cabin-Front": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/Chess-Cabin-Front",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/@ctrl/ngx-emoji-mart/picker.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "webpack.config.js"
            ],
            "allowedCommonJsDependencies": [
              "$.widget.bridge('uibutton', $.ui.button)",
              "admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js",
              "admin-lte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js",
              "admin-lte/dist/js/adminlte.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Chess-Cabin-Front:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Chess-Cabin-Front:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Chess-Cabin-Front: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",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "Chess-Cabin-Front:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "Chess-Cabin-Front:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "Chess-Cabin-Front",
  "cli": {
    "defaultCollection": "@nativescript/schematics"
  }
}

Damika
  • 622
  • 2
  • 8
  • 17

3 Answers3

19

I've stumbled upon the same issue (with Angular v15.1.0 and TS v4.8.3), upgrading typescript to v4.9.4 solved for me!

  • Just noting, I first tried updating typescript to @latest but that installed version 5.something which threw a different error. typescript@4.9.4 or typescript@4.9.5 both worked – Alec Daling Apr 22 '23 at 05:19
4

I was having this same issue, in my case I was using animations in my own components, so the Brower animations module was already included.

The answer is in this forum, I just added @angular/material without including the animations module  see screenshot.

Julio Cachay
  • 780
  • 5
  • 10
0

For me the following steps worked:

  1. delete folder node_modules
  2. delete file package-lock.json
  3. run npm install
simon
  • 153
  • 2
  • 7