Tips for resolving the error "CDK_TABLE was not found in @angular/cdk/table in Angular 9"

Recently upgraded from version 8 to 9 of Angular. Followed all migration steps carefully, including updating Angular Material by changing paths from @angular/material to @angular/material/table. However, upon running 'ng serve', the following error is encountered:

ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/table.js 55:23-32
"export 'CDK_TABLE' was not found in '@angular/cdk/table'

This is how my package.json looks like:

  "dependencies": {
    "@angular/animations": "9.0.7",
    "@angular/cdk": "9.1.3",
    // more dependencies ...
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.900.7",
    // more dev dependencies ...
  }

The majority of imports used are for Angular Material Table, such as:

import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

Is there a mismatch between versions of certain packages or is it another issue causing this error?

angulartypescriptangular-material

Answer №1

By running the command npm install @angular/cdk --save, you can fix this issue.

Answer №2

Recently came across a similar issue where the packages in `packages.json` were out of sync.

Ensure you are using the latest versions: 9.20 for `material` packages:

"@angular/material": "^9.2.0",
"@angular/cdk": "^9.2.0",

Additionally, make sure to update your `@angular` packages to version 9.1.0 (specific command may vary depending on your package manager).

Answer №3

A crucial point to note is that most material components now have their individual paths. If your imports appear as 

import {MatTableModule} from '@angular/material'
, make sure to change them to 
import {MatTableModule} from '@angular/material/table';
or 
import {CdkTableModule} from '@angular/cdk/table';

After upgrading a project to v9, I can confirm that the other 3 imports (

import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

) are working correctly.

I hope this information proves useful.

Answer №4

Make sure that the versions of

@angular/cdk
@angular material

in your package.json file match.

As of 07/08/2021, my versions are up to date:

"@angular/cdk": "^12.2.0",
"@angular/material": "^12.2.0",

Wishing you a wonderful day.

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

A Guide to Iterating Through Arrays of Objects Using TypeScript

Currently, I am engrossed in an Angular project where I am fetching an object containing an array of objects from an API. The object being passed to the API as a parameter through my service is called "reportData". Here is an example of the data retrieve ...

arraysangulartypescriptjavascript-objects

typescript function discrimination

const enum Tag { Friday = 'Friday', Planning = 'Planing', } const test = (tag: Tag, task:/* ??? */): string => {/* some logic */} If tag is set to Tag.Friday, then the function task should expect a parameter of type (tour: strin ...

typescriptoverloadingdiscriminated-union

Incorporating the Chartist plugin into an Angular 5 application

Currently, I am facing an issue while attempting to create a project in Angular 5 that involves utilizing chartist @types and js files of chartist plugins. Interestingly, the files compile without any issues in Angular 4, but encounter difficulties when t ...

angulartypescriptchartist.js

An array of Promise<Employee> cannot be used as a parameter for an array of type Employee[]

I am currently facing an issue with loading my Collection of Employees from a Firestore Database and fetching a 'Workday' for each Employee, which is stored as a Document in a Subcollection named 'Employees'. Below is the code snippet I ...

javascripttypescriptfirebaseasync-awaitgoogle-cloud-firestore

What is the process for extracting the "path expression" from an interface in TypeScript?

My goal is to achieve the following structure: type Post = { id: number title: string author: { name: string } comments: { text: string }[] } type ExtractPathExpressions<T> = ??? type Paths = ExtractPathExpressions<Post> / ...

typescriptunion-typesrecursive-type

Using event.target to pass HTML form data to FormData is causing an error stating that the Argument of type 'EventTarget' cannot be assigned to a parameter of type 'HTMLFormElement'

Looking to extract data from a form and store it in FormData: const handleSubmit = (e: FormEvent<HTMLFormElement>) => { e.preventDefault(); const formData = new FormData(e.target as HTMLFormElement); const value = formData.get(' ...

javascriptreactjstypescript

What is the best way to leverage the Nextjs Link tag while also incorporating the data-dismiss attribute?

Currently, I am working on a Next.js project. In the mobile view, my navigation menu utilizes a modal to toggle the navbar. However, I have encountered an issue where when I click on a navigation link, the data gets dismissed but the link itself does not n ...

reactjstypescriptnavigationbootstrap-modalnext.js

Accordion's second child element experiencing issues with grid properties

I have set the parent element display:"Grid" and specified the gridColumnStart for my child elements as shown below. It seems to be working correctly for the first child element, but not for the second one. Please find my code attached: return ( ...

reactjstypescriptmaterial-uigridaccordion

Instructions on how to access a JSON file in an angular-cli npm test by importing it

With Angular version 4.2.4 and angular-cli at version 1.1.3, the code snippet below is used: import languagesJsonRaw from './languages/en.json'; import countriesJsonRaw from './countries/en.json'; export const languages = prepareLangu ...

angulartypescriptkarma-runnerangular-cli

WebStorm is maxing out the CPU at full capacity

Currently using WebStorm 11 for development in Angular2, I've noticed a significant increase in CPU usage when the IDE is open. While the ng serve command runs smoothly in the background with minimal impact on performance, opening WebStorm causes CPU ...

node.jsperformanceangularnpmwebstorm

What is the best way to combine two arrays of objects with varying values for the same key, and add a new object to the mix?

I have two arrays: arr1 = [ { "OwnershipNumber": 0, "ID": null, "Name": "Contractor LLC", "ContrEmployeeTypeId": 0, "ContactEmail": "", "ContactPhone": "", "VeteranEmployeeMilitaryAffiliation": "", "SocialSecurityNumber": ...

javascriptarraysangulartypescript

Using Javascript or ES6, you can compare a nested array object with another array of elements and generate a new array based on

I am dealing with a complicated array structure as shown below sectionInfo = [{id: 1, name:'ma'}, {id: 2, name:'na'}, {id: 3, name:'ra'}, {id: 4, name:'ka'}, {id: 5, name:'pa'}]; abc = [{id:'1' ...

javascriptarraysjsontypescriptobject

Dynamic Field Validation in Angular 6: Ensuring Data Integrity for Dynamic Input Fields

After successfully implementing validation for one field in my reactive form, I encountered an issue with validating dynamically added input fields. My goal is to make both input fields required for every row. The challenge seems to be accessing the forma ...

javascriptangularangular6angular-reactive-forms

Error: The specified path in the MEAN stack must be either a string or Buffer

I am currently utilizing Angular 5 on the front-end, Node for back-end operations, and MongoDB as the database. My current challenge involves attempting to save an image to the database, but I keep encountering an error. Determining whether the issue lies ...

node.jsmongodbangularexpressangular5

Steps for importing jQuery to vendor.ts in Angular 2 webpack

Currently, I am in the process of setting up my Angular 2 app using webpack. As I review the vendor.ts file, I notice this specific structure. // Angular 2 import '@angular/platform-browser'; import '@angular/platform-browser-dynamic'; ...

angulartypescript

Angular 4 Project Encountering Display Issues with Bootstrap 4 Glyphicons

Currently, I am working on enhancing an Angular 4 Project that incorporates Bootstrap 4 with Sass. One of the challenges I encountered is utilizing glyphicons. When I implement the code snippet below: <button class="btn btn-sm btn-primary"><span ...

angulartwitter-bootstrapbootstrap-4glyphicons

sass-loader in webpack ignoring tsconfig paths

It appears that the Sass-loader is not utilizing the path alias declared in the typescript configuration. When using @use or @import, it results in a "not found" error. Webpack resolve: { plugins: [new TsconfigPathsPlugin()], tsconfig "paths&quo ...

typescriptwebpacktsconfigsass-loader

Creating a FormArray with multiple dimensions in Angular 4: A step-by-step guide

For my dynamic form project, I am using the ng-formly npm tool to create a form with sections and tabs, all controlled by a single submit button. According to the library's documentation, I have defined an interface called TabType which specifies diff ...

angularangular-reactive-formsformarray

Changing the names of the remaining variables while object destructuring in TypeScript

UPDATE: I have created an issue regarding this topic on github: https://github.com/Microsoft/TypeScript/issues/21265 It appears that the syntax { ...other: xother } is not valid in JavaScript or TypeScript, and should not compile. Initial Query: C ...

javascripttypescriptdestructuring

Error TS5083: Unable to locate the file node_modules/gts/tsconfig-google.json while setting up Angular CLI on MacOS

I encountered issues while trying to install Angular CLI on my Mac using sudo npm install -g @angular/cli. The latest error message I received is as follows: npm WARN deprecated @npmcli/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cf ...

node.jsangularnpmnpm-install