Unable to locate module: Issue: Unable to locate '@angular/cdk/tree' or '@angular/material/tree'

Currently utilizing Angular 5 and attempting to create a tree view that resembles a table layout.

https://stackblitz.com/edit/angular-hhkrr1?file=main.ts

Encountering errors while trying to import:

import {NestedTreeControl} from '@angular/cdk/tree'; {MatTreeNestedDataSource} from '@angular/material/tree';

The specific errors received are:

ERROR in ./src/app/app.module.ts Module not found: Error: Can't resolve '@angular/cdk/tree' in 'XXX' ERROR in ./src/app/AgileBOM/agile-bom.tabs.component.ts Module not found: Error: Can't resolve '@angular/cdk/tree' in 'XXX' ERROR in ./src/app/AgileBOM/agile-bom.tabs.component.ts Module not found: Error: Can't resolve '@angular/material/tree' in 'XXX'

Attempts to resolve the issue by running "npm install" and installing angular material & cdk have been unsuccessful.

Seeking advice on what may be causing this problem.

Answer №1

The introduction of the Tree component in Angular Material 6 calls for an upgrade to Angular 6. Ensuring compatibility with the Tree component requires updating your application's Angular dependencies from version 5.x.

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

What is the best way to center align the placeholder in an ion-input field?

What is the best way to center align the placeholder in ion-input? Here's a screenshot of my current ionic input fields with left alignment. I've attempted to move the alignment to the center, but I've been unsuccessful. Can someone please ...

Exploring potential arrays within a JSON file using TypeScript

Seeking guidance on a unique approach to handling array looping in TypeScript. Rather than the usual methods, my query pertains to a specific scenario which I will elaborate on. The structure of my JSON data is as follows: { "forename": "Maria", ...

Guide to inheriting functions from a parent component in Angular 2

Hello, I am a beginner in the realm of angular2 and would appreciate any assistance in refining my vocabulary and terminology. Currently, I have a class that consists of two directives structured as follows: In parent.component.ts, the Parent component i ...

Unraveling the mysteries of Typescript with async await

I'm facing a peculiar issue in my code that I'm struggling to identify. try { const result = await somePromise.catch((err) => { console.log(new Date()); // displays time, t0 console.log('Stats', eventLoopStats.se ...

Is there a way to recursively convert property types from one to another in an object that contains optional properties?

The scenario: I am currently working with MongoDB and a REST API that communicates using JSON. MongoDB uses objects instead of identifiers for documents, but when these objects are stringified (such as in a response body), they get converted into strings. ...

Exploring the power of Typescript and Map in Node.js applications

I am feeling a little perplexed about implementing Map in my nodejs project. In order to utilize Map, I need to change the compile target to ES6. However, doing so results in outputted js files that contain ES6 imports which causes issues with node. Is t ...

Issue with Typescript and react-create-app integration using Express

I'm relatively new to Typescript and I decided to kickstart a project using create-react-app. However, I encountered an issue while trying to connect my project to a server using express. After creating a folder named src/server/server.ts, React auto ...

Zero's JSON Journey

When I make an HTTP request to a JSON server and store the value in a variable, using console.log() displays all the information from the JSON. However, when I try to use interpolation to display this information in the template, it throws the following er ...

Heroku deployment of Angular application encounters launching issue

Currently, I am facing a challenge with deploying my Angular App to Heroku using Git. The application works perfectly fine when run locally through the Angular CLI at localhost. To serve the static files, I have included a small Node.js server. Despite He ...

I believe my routing may be incorrect. Alternatively, the issue might lie elsewhere

I am facing an issue with Angular routing, where I want the navigation bar to persist while changing the background. However, the navigation bar overlaps on top of the background when I try to achieve this. [! [Check out my routing file] (https://i.stack. ...

Refreshing the browser does not load the Angular2 component and instead shows a 404 error

During my exploration of Angular 2, I developed a basic restaurant management application. Now, I am delving into more advanced techniques such as creating an app bundle, minification, and optimizing the application. The authentication component in my app ...

The reason behind encountering the "UNMET PEER DEPENDENCY" error within Angular 2

Is there a way to properly set up angular2-flash-messages in my angular-src directory instead of the root? I attempted to use npm install angular2-flash-messages, but encountered the following error: ├── UNMET PEER DEPENDENCY @angular/<a href="/c ...

Encountering an error with TypeScript in combination with Angular 2 and Grunt. The error message is TS

Currently in my angular2 Project, I am utilizing grunt for automating the compilation of my typescript files. Everything seems to be working fine as my files are compiling, but I keep encountering errors: app/webapp/ng2/audit_logs/auditLogs.ts(2,3): erro ...

Tips for extracting a value from a geojson response using a specific key

When analyzing the geojson response below, I am trying to access the following: Type and Segments To achieve this, I attempted the following: return data["type"] //does not work, error received return data["features"][0]["properties"]["segments"] ...

Ways to invoke the function in a separate component

How can I use ViewChild to call a method in a different component? I have a method in the piechart component that I want to access from the app component using ViewChild. In my piechart.component.ts file: export class PiechartComponent { constructor() ...

Node-server hosted in Azure experiencing difficulties with websockets connectivity

I have a simple example that works fine on my local machine but fails to work properly when deployed on Azure. The original issue I had related to a CORS error, which I have since resolved by editing it out. However, I am still struggling to get WebSockets ...

Should an HTML canvas in Angular be classified as a Component or a Service?

I have a basic drawing application that uses an MVC framework in TypeScript, and I am looking to migrate it to Angular. The current setup includes a Model for data handling, a View for rendering shapes on the canvas, and a Controller to manage interactio ...

Ways to access a nested property within an array

I'm having an issue when trying to access a sub property of an array. Here's the snippet in question: ngOnInit() { this.menus = this.navService.defaultMenu; console.log(this.getMenusItem()); this.registerChangeInProjects(); } T ...

angular2 utilize rxjs to search for threads based on user input

Hey there! I'm working on creating a mini forum inspired by stackoverflow and I'm currently in the process of adding a basic text filter for thread titles. I've recently delved into rxjs and pipes, and this is what I've come up with so ...

What are some ways to incorporate advanced/nested type variables when using arrow functions?

Is there a way to use "advanced/nested" type variables, similar to how T is utilized in this function declaration, when working with arrow functions? function wrapInObject<T>(key: string) { return (x: T) => ({ [key]: x }); } I attempted to ach ...