got error in prod build

[pongsathornp35room]

i got error while build in prod ERROR in Directive CdkTableExporter in C:/Users/...../node_modules/cdk-table-exporter/cdk-table-exporter.d.ts has no selector, please add it! Can't resolve all parameters for CdkTableExporter in C:/Users/...../node_modules/cdk-table-exporter/cdk-table-exporter.d.ts: ([object Object], [object Object], [object Object], ?). Cannot determine the module for class CdkTableExporter in C:/Users/..../node_modules/cdk-table-exporter/cdk-table-exporter.d.ts! Add CdkTableExporter to the NgModule to fix it. how to fix it.

thank you

[HalitTalha]

Sorry for the late reply, Could you share your package.json?

[rezassss]

i got error too while build in prod

Directive CdkTableExporter in E:/Angular/myproject/node_modules/cdk-table-exporter/cdk-table-exporter.d.ts has no selector, please add it! { "name": "fuse", "version": "8.0.0", "license": "https://themeforest.net/licenses/terms/regular", "scripts": { "ng": "ng", "start": "ng serve --open", "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false", "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false", "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev", "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json", "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod", "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json", "lint": "ng lint", "e2e": "ng e2e", "bundle-report": "webpack-bundle-analyzer dist/stats.json", "test": "node spec/spec_runner.js" }, "private": true, "dependencies": { "@agm/core": "1.0.0-beta.5", "@angular-material-extensions/google-maps-autocomplete": "2.0.0", "@angular-material-extensions/jumbotron": "2.0.0", "@angular/animations": "8.0.0", "@angular/cdk": "8.0.0", "@angular/common": "8.0.0", "@angular/compiler": "8.0.0", "@angular/core": "8.0.0", "@angular/flex-layout": "8.0.0-beta.26", "@angular/forms": "8.0.0", "@angular/http": "7.2.15", "@angular/material": "8.0.0", "@angular/material-moment-adapter": "8.0.0", "@angular/platform-browser": "8.0.0", "@angular/platform-browser-dynamic": "8.0.0", "@angular/pwa": "0.803.6", "@angular/router": "8.0.0", "@angular/service-worker": "8.2.14", "@auth0/angular-jwt": "3.0.0", "@ng-bootstrap/ng-bootstrap": "2.2.0", "@ngrx/effects": "8.0.0-beta.2", "@ngrx/router-store": "8.0.0-beta.2", "@ngrx/store": "8.0.0-beta.2", "@ngrx/store-devtools": "8.0.0-beta.2", "@ngx-translate/core": "11.0.1", "@swimlane/dragula": "3.8.0", "@swimlane/ngx-charts": "11.1.0", "@swimlane/ngx-datatable": "15.0.0", "@swimlane/ngx-dnd": "7.0.0", "@teamhive/lottie-player": "1.0.0", "@types/prismjs": "1.16.0", "angular-calendar": "0.27.8", "angular-datatables": "8.0.0", "angular-dynamic-number": "2.5.1", "angular-file-saver": "1.1.3", "angular-in-memory-web-api": "0.8.0", "bootstrap": "4.3.1", "cdk-table-exporter": "9.0.0", "chart.js": "2.8.0", "classlist.js": "1.1.20150312", "core-js": "3.1.3", "d3": "5.9.2", "datatables.net": "1.10.19", "datatables.net-dt": "1.10.19", "date-fns": "1.30.1", "file-saver": "2.0.2", "hammerjs": "2.0.8", "jquery": "3.4.1", "lodash": "4.17.15", "lottie-web": "5.6.6", "mat-table-exporter": "9.0.0", "material-design-lite": "1.3.0", "moment": "2.24.0", "ng2-charts": "2.2.4", "ng2-select2": "1.0.0-beta.16", "ngrx-store-freeze": "0.2.4", "ngx-color-picker": "7.5.0", "ngx-cookie-service": "2.2.0", "ngx-file-drop": "8.0.7", "ngx-lottie": "5.3.2", "ngx-mat-select-search": "2.0.0", "ngx-print": "1.2.0-beta.3", "perfect-scrollbar": "1.4.0", "prismjs": "1.16.0", "rxjs": "6.5.2", "save": "2.4.0", "select2": "4.0.10", "web-animations-js": "github:angular/web-animations-js#release_pr208", "webpack-dev-server": "3.8.1", "xlsx": "0.15.2", "zone.js": "0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "0.800.0", "@angular/cli": "8.0.0", "@angular/compiler-cli": "8.0.0", "@angular/language-service": "8.0.0", "@angularclass/hmr": "2.1.3", "@types/datatables.net": "1.10.17", "@types/file-saver": "2.0.1", "@types/googlemaps": "3.38.0", "@types/jasmine": "3.3.13", "@types/jasminewd2": "2.0.6", "@types/jquery": "3.3.31", "@types/lodash": "4.14.132", "@types/node": "8.9.5", "codelyzer": "5.0.1", "jasmine-core": "3.4.0", "jasmine-spec-reporter": "4.2.1", "karma": "4.1.0", "karma-chrome-launcher": "2.2.0", "karma-coverage-istanbul-reporter": "2.0.5", "karma-jasmine": "2.0.1", "karma-jasmine-html-reporter": "1.4.2", "protractor": "5.4.2", "ts-node": "7.0.1", "tslib": "1.9.3", "tslint": "5.15.0", "typescript": "3.4.5", "webpack-bundle-analyzer": "3.3.2" } }

[HalitTalha]

If you are not using cdk-table-exporter specifically you shouldn't have it as a dependency. Could you uninstall cdk-table-exporter and try building again? Seems like ng update script has added a directive decorator to cdkTableExporter when we updated to ng 9: 3ed177b3c0fab211bc7f994fe9377cae783bebec I'm labeling this as a bug to be fixed in the next patch release.

[rezassss]

yes it work, i uninstall mat-table exporter and uninstall cdk-table-exporter. than i install using npm install --save mat-table-exporter@1.2.5. and it works, thanks bro

[HalitTalha]

OK you found the solution, I missed you used Angular 8. Any version below 9 should use @1.2.5.

So anyone having this issue should check the Angular version and if it is not Angular 9, mat-table-exporter@1.2.5 is the way to go.

[pongsathornp35room]

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "IRPCversion1": { "projectType": "application", "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/IRPCversion1", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": false, "assets": [ "src/favicon.ico", "src/assets", "src/web.config" ], "styles": [ "src/custom-theme.scss", "src/styles.css" ], "scripts": [] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ] }, "es5": { "tsConfig": "./tsconfig-es5.app.json" } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "IRPCversion1:build" }, "configurations": { "production": { "browserTarget": "IRPCversion1:build:production" }, "es5": { "browserTarget": "IRPCversion1:build:es5" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "IRPCversion1: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", "src/web.config" ], "styles": [ "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.css" ], "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": "IRPCversion1:serve" }, "configurations": { "production": { "devServerTarget": "IRPCversion1:serve:production" } } } } } }, "defaultProject": "IRPCversion1" }

[pongsathornp35room]

sorry for late

[HalitTalha]

No problem @pongsathornp35room , what you posted is not package.json, could you please post it, or if you can tell what's your angular version that is also fine.

[pongsathornp35room]

{
    "name": "irpcversion1",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve --port 4201 --proxy-config proxy.conf.json",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "~8.2.3",
        "@angular/cdk": "~8.2.2",
        "@angular/common": "~8.2.3",
        "@angular/compiler": "~8.2.3",
        "@angular/core": "~8.2.3",
        "@angular/forms": "~8.2.3",
        "@angular/material": "^8.2.3",
        "@angular/material-moment-adapter": "^9.0.0-rc.5",
        "@angular/platform-browser": "~8.2.3",
        "@angular/platform-browser-dynamic": "~8.2.3",
        "@angular/router": "~8.2.3",
        "@progress/kendo-angular-common": "^1.2.1",
        "@progress/kendo-angular-dateinputs": "^4.2.0",
        "@progress/kendo-angular-intl": "^2.0.0",
        "@progress/kendo-angular-l10n": "^2.0.0",
        "@progress/kendo-angular-popup": "^3.0.4",
        "@sweetalert2/ngx-sweetalert2": "^6.0.1",
        "@types/googlemaps": "^3.39.1",
        "angular-material": "^1.1.21",
        "angular-material-icons": "^0.7.1",
        "angular-moment": "^1.3.0",
        "angular-paginator": "^3.0.0",
        "classlist.js": "^1.1.20150312",
        "file-saver": "^2.0.2",
        "hammerjs": "^2.0.8",
        "mat-icon-import": "^0.1.1",
        "mat-select-autocomplete": "^1.3.0",
        "mat-table-exporter": "^1.2.5",
        "moment": "^2.24.0",
        "ng-onload": "^0.8.0",
        "ng-pick-datetime": "^7.0.0",
        "ng-pick-datetime-moment": "^1.0.8",
        "ng2-search-filter": "^0.5.1",
        "ngx-bootstrap": "^5.3.2",
        "ngx-material-timepicker": "^5.2.3",
        "ngx-spinner": "^8.1.0",
        "rxjs": "~6.4.0",
        "sweetalert2": "^8.19.0",
        "tslib": "^1.10.0",
        "web-animations-js": "^2.3.2",
        "xlsx": "^0.15.5",
        "zone.js": "~0.9.1"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.803.9",
        "@angular/cli": "~8.3.0",
        "@angular/compiler-cli": "~8.2.3",
        "@angular/language-service": "~8.2.3",
        "@types/jasmine": "~3.3.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "^5.0.0",
        "jasmine-core": "~3.4.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.1.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~2.0.1",
        "karma-jasmine-html-reporter": "^1.4.0",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.15.0",
        "typescript": "~3.5.3"
    }
}

[pongsathornp35room]

sorry HalitTalha my bad

[roykathurima]

ERROR in : Directive _MatOptionBase in /Users/content/Documents/work/final_youpoach/youpoach_test/node_modules/@angular/material/core/index.d.ts has no selector, please add it! : Can't resolve all parameters for _MatOptionBase in /Users/content/Documents/work/final_youpoach/youpoach_test/node_modules/@angular/material/core/index.d.ts: ([object Object], [object Object], ?, [object Object]). : Directive _MatOptgroupBase in /Users/content/Documents/work/final_youpoach/youpoach_test/node_modules/@angular/material/core/index.d.ts has no selector, please add it! : Cannot determine the module for class _MatOptionBase in /Users/content/Documents/work/final_youpoach/youpoach_test/node_modules/@angular/material/core/index.d.ts! Add _MatOptionBase to the NgModule to fix it. Cannot determine the module for class _MatOptgroupBase in /Users/content/Documents/work/final_youpoach/youpoach_test/node_modules/@angular/material/core/index.d.ts! Add _MatOptgroupBase to the NgModule to fix it.

[roykathurima]

what could be possibly wrong in my case...