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

4
votes

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

3
angularangular-material
Show us what you have tried, some code! – Faisal

3 Answers

7
votes

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",
    ...
  }
}
0
votes

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

0
votes

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>`