Stepper - Angular Material - Cannot read property 'markForCheck' of undefined

问题

Can't get the angular material stepper fine. The stepper display as asked and when clicked on the header is moving, but an error come and say:

Cannot read property markForCheck of undefined

Also when i want to use the buttons directives throw an error like,

Cannot read property previous of undefined

Maybe some help

Code: I just copy paste the default code from the angular material page:

https://material.angular.io/components/stepper/overview

I load angular material in an child module from my main.

Maybe the lazy loading cause this problem ?

Version:

"@angular/animations": "^5.1.2",
"@angular/cdk": "^5.1.2",
"@angular/common": "^5.1.2",
"@angular/compiler": "^5.1.2",
"@angular/compiler-cli": "^5.1.2",
"@angular/core": "^5.1.2",
"@angular/forms": "^5.1.2",
"@angular/http": "^5.1.2",
"@angular/material": "^5.1.2",
"@angular/platform-browser": "^5.1.2",
"@angular/platform-browser-dynamic": "^5.1.2",
"@angular/platform-server": "^5.1.2",
"@angular/router": "^5.1.2",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25",
"@ngui/auto-complete": "^0.16.0",
"@swimlane/ngx-charts": "^6.1.0",
"@types/file-saver": "0.0.1",
"@types/lodash": "^4.14.73",
"angular-2-data-table": "^0.1.2",
"angular-datatables": "^4.2.0",
"angular2-datatable": "^0.6.0",
"angular2-multiselect-dropdown": "^1.3.6",
"angular2-promise-buttons": "^2.0.1",
"chart.js": "^2.7.0",
"core-js": "^2.4.1",
"d3": "^4.11.0",
"datatables.net": "^1.10.15",
"datatables.net-buttons": "^1.5.1",
"datatables.net-buttons-dt": "^1.5.1",
"datatables.net-dt": "^1.10.15",
"file-saver": "^1.3.3",
"hammerjs": "^2.0.8",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"ng2-charts": "^1.6.0",
"ng2-pdf-viewer": "^1.2.2",
"ng2-slimscroll": "^2.0.1",
"ngx-chips": "^1.6.2",
"ngx-cookie-service": "^1.0.7",
"ngx-dropzone-wrapper": "^4.6.0",
"rxjs": "^5.5.6",
"sweetalert2": "^6.6.8",
"web-animations-js": "^2.3.1",
"xlsx": "^0.11.5",
"zone.js": "^0.8.16"

Stephane

回答1:

I had the same issue when transpiling my typescript to es6. Chrome didn't seem to recognise es6 modules and so the necessary imports were not loaded for material's stepper.

Check your tsconfig.json (not the tsconfig.app.json) Are you transpiling your typescript to es6? if so, you can change that to es5, it works now for me

tsconfig.json 
{
  ...
  "compilerOptions": {
    ...
    "target": "es5",
    ...
  }
}

回答2:

Using the --aot option makes the errors dissappear, dont know why.

回答3:

I'm having the same issue, changing the target in the tsconfig.json did not work for me. However, the vertical stepper works without any issue.

`<mat-vertical-stepper>`

来源：https://stackoverflow.com/questions/48036238/stepper-angular-material-cannot-read-property-markforcheck-of-undefined

标签

angular

angular-material