Error: Trying to access a property that does not exist on an undefined object (retrieving 'kind

Currently, I am working on a project using angular-CLI. When I attempted to create a new module yesterday, an error popped up in the terminal saying 

Cannot read properties of undefined (reading 'kind')

(only this error there wasn't any other explanations)

After that, I noticed that the same error occurs when trying to create new components with Angular. Surprisingly, there are no issues with the ng serve command, which works perfectly fine.

I would appreciate it if someone could assist me in resolving this issue. I will provide some files below, but feel free to ask for more details by commenting as I am struggling to pinpoint the problem. Thank you in advance!

package.json

{
  "name": "chess-cabin-front",
  "version": "0.0.0",
  ...
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  ...
}
angulartypescriptangular-cli

Answer №1

Encountered a similar problem with Angular version 15.1.0 and TypeScript version 4.8.3, but upgrading to TypeScript version 4.9.4 resolved the issue for me!

Answer №2

Encountering the same issue, I discovered that my problem stemmed from using animations within my custom components, resulting in the Brower animations module being already included.

The solution can be found on this platform. Simply by adding @angular/material without including the animations module https://i.sstatic.net/bIgxR.png.

Answer №3

Here are the steps that helped me:

  1. Remove the directory node_modules
  2. Delete the file package-lock.json
  3. Execute npm install

Answer №4

The reason for this error is that some dependencies are missing in your project directory. To resolve it, you need to clean and rebuild your dependencies by following these steps: Step 1: Remove the node_modules folder

  1. $ rm -rf node_modules

For Windows users:

$ rmdir /s node_modules

Step 2: Clear the cache

  1. npm cache clean --force

Step 3: Install a new node_module folder

  1. npm install

For more detailed information, please visit this link

Answer №5

My recommendation would be to compare the branches using git diff to identify any differences in your project. In my situation, the only change was the version of 

@angular-devkit/core": "16.2.8"
. I resolved this by reverting back to 
"@angular-devkit/core": "16.2.0"
, which solved the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble resolving this issue with an Unexpected Application Error! It seems that I cannot set the property value of #<TextFieldBase2> since it only has a

Currently, I'm utilizing TypeScript, React Hook Form, Yup validation, and Fluent UI. Every time I attempt to submit a form, I encounter the error 'Unexpected Application Error! Cannot set property value of # which has only a getter'. https:/ ...

reactjstypescriptreact-hook-formfluent-uifluentui-react

Retrieve all values of a specific enum type in TypeScript

When working with Typescript, I am looking to retrieve all values of an enum type and store them in an array. In C#, a similar method would look like this: public static TEnum[] GetValues<TEnum>() where TEnum : Enum { return Enum.GetValues(typeof ...

typescript

The ViewChild element is not defined

Check out the code snippet below. // ... @ViewChild('searchBar', {static: false}) searchBar: IonSearchbar; @ViewChild('locations', {static: false}) locationsList: IonList; // ... ngAfterViewInit() { this.searchBarInputSub ...

angularviewchild

Is there a more effective way to implement a Custom Validator using .forEach?

I have developed my own validation class as a learning exercise. Do you think this is an effective approach, or do you have suggestions for improvement? import { AbstractControl } from '@angular/forms'; export class ProjectNameValidator { pr ...

angulartypescript

Arrange the items that are missing from Array B to be located at the bottom of Array A, organized in a file tree structure

I have two arrays containing different types of objects. Each object in the arrays has a title assigned to it. My goal is to compare these two arrays based on their titles and move any files that are not included in the bottom part of the fileStructure arr ...

javascriptarraystypescriptsorting

Verifying the Presence of an Image in the Public Directory of Next JS

My TypeScript Next.js project contains a large number of images in the public folder. I am wondering if there is a way to verify the existence of an image before utilizing the <Image /> component from next/image. I have managed to achieve this using ...

typescriptnext.jsfile-existsnext.js13

The error was thrown by the internal module loader in Node.js at line 1029

I encountered this Console Error - "Error: Cannot find module". Below is the detailed error message in the console. Any solutions? node:internal/modules/cjs/loader:1029 throw err; ^ Error: Cannot find module '/home/hiranwj/list' at Mo ...

angularnpm

Essential parameters needed in a Typescript function signature

My code includes the following type definition: type FuncWithRequiredParams = (a: number, b: number, c:string) => void const func1: FuncWithRequiredParams = (a: number, b: number, c: string) => {} // This is functional const func2: FuncWithRequiredP ...

typescript

leveraging external libraries with angular

Is there a way to integrate third-party libraries into Angular 4? Typically, I follow the code snippet below: <html> <head> <title>Bootstrap CDN Simple Example</title> <link href="//netdna.bootstrapcdn.com/ ...

angular

I am curious if there exists a VSCode plugin or IDE that has the ability to show the dependencies of TypeScript functions or provide a visual representation

Are there any VSCode plugins or IDEs available that can display the dependency of TypeScript functions or show a call stack view? I am looking for a way to visualize the call stack view of TypeScript functions. Is there a tool that can help with this? Fo ...

javascripttypescriptvisual-studio-codeidewebstorm

What is the method for typing an array of objects retrieved from realmDB?

Issue: Argument type 'Results<Courses[] & Object>' cannot be assigned to the parameter type 'SetStateAction<Courses[]>'. Type 'Results<Courses[] & Object>' lacks properties such as pop, push, reverse, ...

typescriptreact-nativerealm

Tips for utilizing ngModel within *ngFor alongside the index?

Currently, I am dynamically generating mat-inputs using *ngFor. My goal is to store each value of [(ngModel)] in a separate array (not the one used in *ngFor) based on the index of the *ngFor elements. Here's my implementation: <div *ngFor="let i ...

angulartypescriptformsngfor

A guide on the correct way to fork an Ionic Stencil Component

I am interested in customizing the columns and position of ion-datetime to use it in my Ionic app. However, I am unsure how to approach this without resorting to messy copy-and-paste solutions. Are there any better methods for achieving this customizatio ...

angularionic-frameworkionic4stenciljs

The Heart of the Publisher-Subscriber Design Paradigm

After reading various online articles on the Publisher-Subscriber pattern, I have found that many include unnecessary domain-specific components or unreliable information inconsistent with OOP standards. I am seeking the most basic and abstract explanatio ...

typescriptoopdesign-patternsarchitecturesystem

The Nginx server seems to be having trouble reading Gzip files, despite having Gzip compression enabled

Despite having already enabled gzip compression on my nginx server, PageSpeed Insights still suggests enabling text compression for certain files. However, the mentioned files such as main.js, polyfills.js, and styles.css have already been gzipped using th ...

angularnginxgzip

Ways to Access HTTP Request Headers in Angular 6 upon Page Load

Is it possible to retrieve request header information in Angular 6/7 upon application initialization? I specifically require access to header values for security and access management purposes, as these values are set in the headers during the usage of th ...

angulartypescripthttp

Verify an entry with exactly 7 numerical digits

When inputting data, the user is limited to entering only 7 figures. If more than 7 figures are entered, an error message will display: "You need 7 digits". For instance, if the user enters something like this: 12345678910 The error message is correctly ...

angular

Tips for integrating Angular Material styles into Sonarque

Can Sonarqube analyze my Angular application prominently using Angular Material? The styling I have is: .some-class { mat-icon { color: red; } } Since Angular Material is globally added through angular.json configuration, So ...

angularsonarqubeangular-material

Encountered a Solana Error while handling Instruction 2: custom program error with code 0x1000078

While attempting to create an AMM Pool using the 'ammCreatePool.ts' script from the raydium-sdk repository, I encountered the following error message. I executed the script directly with ts-node src/ammCreatePool.ts and made modifications so that ...

typescripttokensolana

Issue: Oops! The digital envelope routines are not supported in Angular while attempting to run the project

I encountered an error when running the command below: ng s The error message is as follows: Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:68:19)at Object.createHash (node:crypto:138:10)at BulkUpdateDe ...

node.jsangulartypescriptnpm