[Table] Does not work when targetting ES6 since Angular Material 6.4.2-6.4.5 (6.4.1 is working fine)

[Lukespacewalker]

Bug, feature request, or proposal:

[Table] Does not work when targeting ES6 since Angular Material 6.4.2-6.4.5 (6.4.1 is working fine)

What is the expected behavior?

Angular Material Table should be rendered correctly
(I have to revert @angular/material back to 6.4.1 as 6.4.2 - 6.4.5 are unable to render the table.

What is the current behavior?

OverdueComponent.html:39 ERROR TypeError: Cannot read property 'find' of undefined
    at MatHeaderRowDef.ngOnChanges (table.js:324)
    at MatHeaderRowDef.ngOnChanges (table.js:376)
    at checkAndUpdateDirectiveInline (core.js:11642)
    at checkAndUpdateNodeInline (core.js:13252)
    at checkAndUpdateNode (core.js:13191)
    at debugCheckAndUpdateNode (core.js:14147)
    at debugCheckDirectivesFn (core.js:14090)
    at Object.eval [as updateDirectives] (OverdueComponent.html:46)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14078)
    at checkAndUpdateView (core.js:13156)

_differs is undefined at table.js:324

    ngOnChanges(changes) {
        // Create a new columns differ if one does not yet exist. Initialize it based on initial value
        // of the columns property or an empty array if none is provided.
        if (!this._columnsDiffer) {
            const /** @type {?} */ columns = (changes['columns'] && changes['columns'].currentValue) || [];
            this._columnsDiffer = this._differs.find(columns).create();
            this._columnsDiffer.diff(columns);
        }
    }

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Target : ES6
Browser: Firefox, Chrome, Edge

  "dependencies": {
    "@angular/animations": "6.1.3",
    "@angular/cdk": "6.4.5",
    "@angular/common": "6.1.3",
    "@angular/compiler": "6.1.3",
    "@angular/core": "6.1.3",
    "@angular/forms": "6.1.3",
    "@angular/http": "6.1.3",
    "@angular/material": "6.4.5",
    "@angular/material-moment-adapter": "6.4.5",
    "@angular/platform-browser": "6.1.3",
    "@angular/platform-browser-dynamic": "6.1.3",
    "@angular/platform-server": "6.1.3",
    "@angular/router": "6.1.3",
    "@coachcare/datepicker": "^0.9.9",
    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
    "aspnet-prerendering": "^3.0.1",
    "core-js": "^2.5.7",
    "jasmine": "^3.2.0",
    "moment": "^2.22.2",
    "moment-recur-ts": "^1.3.1",
    "moment-timezone": "^0.5.21",
    "ngx-mat-select-search": "^1.3.0",
    "open-iconic": "^1.1.1",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.7.3",
    "@angular/cli": "^6.1.3",
    "@angular/compiler-cli": "6.1.3",
    "@angular/language-service": "6.1.3",
    "@types/jasmine": "^2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.7.1",
    "codelyzer": "^4.4.4",
    "jasmine-core": "~3.2.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.3.0",
    "protractor": "^5.4.0",
    "ts-node": "^7.0.1",
    "tslint": "~5.11.0",
    "typescript": "2.9.2"
  }

[spike008t]

I do have the same issue with v6.4.5 targeting es5 but only on spec, but works correctly if served under develop

All my table spec tests failed with the mentioned error.

[epelc]

Any update on this? It's kind of a big deal not being able to target ES6.

[tarmo-randma]

Still unable to use ES6 on v7.0.2. MatTableModule throws "ctorParameters.map is not a function"

[epelc]

@tarmo-randma There was 2 fixes one didn't make it into 7.0.2 but it should be good on master or the next release.

See our discussion here #13709 (comment)

And the updated fix #13834

[Frozen-byte]

Related to angular/angular-cli#12832

Minimal Reproduction Repo:
GUI-cTor_minimal_repro.zip

[Diegovictorbr]

Got this error when i upgraded from Angular 7 to 9 and tried to use mat-table. Very problematic. Here are the relevant files:

package.json

{
  "name": "ccr-relatorios",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "pbuild": "ng build --prod --base-href .",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.0.4",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "~9.0.4",
    "@angular/compiler": "~9.0.4",
    "@angular/core": "~9.0.4",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~9.0.4",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "~9.0.4",
    "@angular/platform-browser-dynamic": "~9.0.4",
    "@angular/router": "~9.0.4",
    "@swimlane/ngx-charts": "^13.0.2",
    "angular-double-slider": "^2.0.2",
    "bootstrap": "^4.3.1",
    "core-js": "^2.5.4",
    "ng2-charts-x": "^2.0.6",
    "ng2-ion-range-slider": "^2.0.0",
    "ng5-slider": "^1.1.14",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "xlsx": "^0.15.4",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.0-next.1",
    "@angular/cli": "~9.1.0-next.1",
    "@angular/compiler-cli": "~9.0.4",
    "@angular/language-service": "~9.0.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "^5.11.0",
    "typescript": "^3.7.5"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}