Angular 10 support

[Dhenaux]

Hi,

Any plans to support angular 10 ?

Thank you

npm WARN mat-table-exporter@9.0.2 requires a peer of @angular/common@^9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN mat-table-exporter@9.0.2 requires a peer of @angular/core@^9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN mat-table-exporter@9.0.2 requires a peer of @angular/material@^9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN mat-table-exporter@9.0.2 requires a peer of @angular/cdk@^9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN mat-table-exporter@9.0.2 requires a peer of tslib@^1.10.0 but none is installed. You must install peer dependencies yourself.

[HalitTalha]

Hi there, package.json states our known peer dependencies that we have support for. Angular 10 could be compatible, have you tried building along with an Angular 10 application?

[arian-22]

Maybe it will serve as a reference

[mocleiri]

@HalitTalha I've tried mat-table-exporter in angular 10. It works fine in ng serve but there are issues with aot turned on to build the static site (ng build --prod).

The build will work but then at runtime the site breaks throwing this error to the console:

ERROR Error: Export of name 'matTableExporter' not found!

My work around for now is to turn off aot by editing two settings in angular.json:

projects -> myproject -> architect -> build -> options -> aot to false

projects -> myproject -> architect -> build -> configurations -> production -> buildOptimizer to false

This fairly old post (from 2017) lead me to try turning off the aot build: https://github.com/angular/angular-cli/issues/4551#issuecomment-280376180

Dependencies:

"dependencies": {
    "@angular/animations": "~10.0.14",
    "@angular/cdk": "^10.1.3",
    "@angular/common": "~10.0.14",
    "@angular/compiler": "~10.0.14",
    "@angular/core": "~10.0.14",
    "@angular/forms": "~10.0.14",
    "@angular/localize": "^10.0.14",
    "@angular/material": "^10.1.3",
    "@angular/platform-browser": "~10.0.14",
    "@angular/platform-browser-dynamic": "~10.0.14",
    "@angular/router": "~10.0.14",
    "@fortawesome/angular-fontawesome": "^0.7.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.8",
    "@angular/cli": "~10.0.8",
    "@angular/compiler-cli": "~10.0.14",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "bootstrap": "^4.4.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "mat-table-exporter": "^9.0.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }

ng version:

Angular CLI: 10.0.8
Node: 12.13.1
OS: win32 x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cdk                      10.1.3
@angular/cli                      10.0.8
@angular/material                 10.1.3
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

[mocleiri]

@HalitTalha I just filed a pull request for upgrading to angular 10: https://github.com/HalitTalha/ng-material-extensions/pull/88

I had some issues with ivy tree shaking dropping out the examples but I figured out how to keep them.

I will try my project with the provisional version 10 release and report back.

[nsumaila]

On my project it builds with Angular 10.2.1 and material 10.2.1 even with --aot and --prod flags on. but the directive #exporter="matTableExporter" would only be available inside mat-table tag, so I couldn't use the usual

<button mat-raised-button (click)="exporter.exportTable()">Excel

instead I declared the directive inside the ts file using viewchild

@ViewChild(MatTableExporterDirective) exporter: MatTableExporterDirective;

and a

exportTable() { this.exporter.exportTable(); }

on the .html

<button mat-raised-button (click)="exportTable()">Excel

[HalitTalha]

Thanks everyone 👍 I'm really sorry for being kind of inactive for the last few months. I'll look into PRs as soon as I can.

[HalitTalha]

@nsumaila This is interesting. Could you check if your mat-table was inside some other structural directive like an *ngIf?

Maybe we already have ng10 support however we will definitely do update soon thanks to @mocleiri

@ccosmincc , thanks for helping on the reviews. 👍

[HalitTalha]

@HalitTalha I just filed a pull request for upgrading to angular 10: #88

I had some issues with ivy tree shaking dropping out the examples but I figured out how to keep them.

I will try my project with the provisional version 10 release and report back.

Not suprised by the issue with example js files. It would be great if we could find out a way to obtain the source contents of example components on the fly. When I first implemented the showcase part of the workspace I had checked how angular material guys implemented this, If memory serves, their approach was building the example components in a customized way so the source content is put simply in a string variable in the built component and then inject those, let's say, in an examples array that you show off. My initial thought was to make something similar however I didn't want to complicate building, seemed a bit of an overkill for the scale of the repository. Any ideas?

[aponski]

Any news on this? I would like to update my project form Angular v9 to Angular v11 but I'm blocked with this extension :(

[HalitTalha]

You can update your project to ng11, ng-material-extensions packages are compatible.