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

Lukespacewalker commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

tarmo-randma commented 6 years ago

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

epelc commented 6 years ago

@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 https://github.com/angular/material2/pull/13709#issuecomment-433178869

And the updated fix https://github.com/angular/material2/pull/13834

Frozen-byte commented 6 years ago

Minimal Reproduction Repo: GUI-cTor_minimal_repro.zip

Diegovictorbr commented 4 years ago

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"
    ]
  }
}

angular / components