Menu
Just migrated from 8 to 9. Done everything step by step, I am using angular material, migrated it as well, changed all paths from @angular/material -> @angular/material/table . Now when i run ng serve, i get this error :
ERROR in ./node_modules/@angular/material/__ivy_ngcc__/fesm2015/table.js 55:23-32
"export 'CDK_TABLE' was not found in '@angular/cdk/table'
Package.json :
"dependencies": {
"@angular/animations": "9.0.7",
"@angular/cdk": "9.1.3",
"@angular/common": "9.0.7",
"@angular/compiler": "9.0.7",
"@angular/core": "9.0.7",
"@angular/fire": "^5.2.3",
"@angular/forms": "9.0.7",
"@angular/material": "^9.1.3",
"@angular/material-moment-adapter": "^9.2.0",
"@angular/platform-browser": "9.0.0",
"@angular/platform-browser-dynamic": "9.0.7",
"@angular/platform-server": "9.0.7",
"@angular/pwa": "^0.901.0",
"@angular/router": "9.0.7",
"@angular/service-worker": "9.0.7",
"@kolkov/angular-editor": "^1.0.2",
"@ngmodule/material-carousel": "^0.6.0",
"@nguniversal/express-engine": "^9.1.0",
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^4.0.0",
"@nicky-lenaers/ngx-scroll-to": "^3.0.1",
"@squadette/hammerjs": "^2.1.0-pre3",
"@types/core-js": "^2.5.3",
"bootstrap": "^4.4.1",
"compression": "^1.7.4",
"core-js": "^3.6.4",
"dotenv": "8.2.0",
"express": "4.17.1",
"firebase": "^7.6.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"http-status-codes": "^1.4.0",
"jwt-decode": "^2.2.0",
"localstorage-polyfill": "^1.0.1",
"m": "^1.5.6",
"moment": "^2.24.0",
"ngx-material-timepicker": "^5.3.0",
"path": "^0.12.7",
"rxjs": "~6.5.5",
"subsink": "^1.0.0",
"tslib": "^1.10.0",
"zone.js": "^0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.900.7",
"@angular/cli": "9.0.7",
"@angular/compiler-cli": "9.0.7",
"@angular/language-service": "9.0.7",
"@nguniversal/builders": "9.0.2",
"@types/express": "4.17.3",
"@types/jasmine": "3.5.9",
"@types/jasminewd2": "2.0.8",
"@types/node": "13.9.2",
"codelyzer": "^5.2.1",
"enhanced-resolve": "^3.3.0",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.4.1",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-jasmine": "3.0.1",
"karma-jasmine-html-reporter": "1.5.2",
"protractor": "5.4.3",
"ts-loader": "^5.2.0",
"ts-node": "8.7.0",
"tslint": "6.1.0",
"typescript": "3.7.5"
}
How to fix this error ? I am using angular material table mostly with these imports :
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
Any of packages versions mismatch or another problem ?
604
Add the CdkTableModule to your app.module.ts file: Inside of the table.component.ts, we’ll start by creating a BehaviorSubject of an array of heroes, as well as a BehaviorSubject of the columns to show in our table: This tableDataSource$ will serve as our DataSource input for our Angular CDK Table.
Speaking of Angular Material team, they do not choose to support these kind of extra cases so it was left to community. The already published solutions and examples on the internet was either to export the native-table rendered in the page or to export the json array instead of the table itself.
The basic steps for developing CDK tables are to first define a template for how your table’s headers, footers, and regular cells look like for each column of your table. To do this, we’ll create a <ng-container> element for each of our columns that we would want to show. Here’s an example of an ng-container for the name of our heroes:
Cell definition for a CDK table. Captures the template of a column's data row cell as well as cell-specific properties. Header cell definition for a CDK table. Captures the template of a column's header cell and as well as cell-specific properties. Footer cell definition for a CDK table.
Stumbled on this too. Turns out the packages got de-synced somehow in packages.json.
Make sure you have latest version for all: 9.20 for material packages:
"@angular/material": "^9.2.0",
"@angular/cdk": "^9.2.0",
Also, update your @angular packages to 9.1.0 (command depends on your package manager).
188
Using npm install @angular/cdk --save should resolve this.
34
Verify that in your package.json the
@angular/cdk
@angular material
are at the same version.
Mine on 07/08/2021 are at latest version:
"@angular/cdk": "^12.2.0",
"@angular/material": "^12.2.0",
Have a nice day.
37
An important note is that most material components have individual paths now, so in case your imports looks like import {MatTableModule} from '@angular/material' you should change them to import {MatTableModule} from '@angular/material/table'; or import {CdkTableModule} from '@angular/cdk/table';
As I have upgraded 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';
) look ok.
Hope it helps
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
