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

Question

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

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