Components: Stepper with target ES6 - markForCheck Error

Created on 21 Oct 2018  路  6Comments  路  Source: angular/components

Bug

Using a horizontal stepper produces an error:

ERROR TypeError: Cannot read property 'markForCheck' of undefined at MatHorizontalStepper._stateChanged (stepper.js:352)

There's a Stackoverflow question (https://stackoverflow.com/questions/48036238/stepper-angular-material-cannot-read-property-markforcheck-of-undefined) . Both workarounds do work.

What is the expected behavior?

Should work out of the box with ES6 and plain ng serve.

What are the steps to reproduce?

Here's a stackblitz, _however it's working_ - probably they're not using plain ng serve but ng build?

https://stackblitz.com/edit/angular-ancwcw

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

ng: 7.0
ts: 3.1.3
Windows 10

EDIT: The stackblitz did not save my changes properly ... see attachment instead.
angular-5furhj.zip

EDIT 2: Updated stackblitz now working. I needed to create an account to save. Same as attachement.

P5

Most helpful comment

I am experiencing the same issue.
Angular: 7.0.0
Angular/Material: 7.0.0
Typescript: 3.1.3
OS: Ubuntu 16.04

My tsconfig.json file:

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

Chrome produces this error message:

ERROR TypeError: Cannot read property 'markForCheck' of undefined
    at MatHorizontalStepper._stateChanged (stepper.js:352)
    at MatStep.ngOnChanges (stepper.js:179)

Firefox produces this error message:
ERROR TypeError: "this._changeDetectorRef is undefined"

Switching target back to ES5 as a workaround fix.

All 6 comments

I am experiencing the same issue.
Angular: 7.0.0
Angular/Material: 7.0.0
Typescript: 3.1.3
OS: Ubuntu 16.04

My tsconfig.json file:

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

Chrome produces this error message:

ERROR TypeError: Cannot read property 'markForCheck' of undefined
    at MatHorizontalStepper._stateChanged (stepper.js:352)
    at MatStep.ngOnChanges (stepper.js:179)

Firefox produces this error message:
ERROR TypeError: "this._changeDetectorRef is undefined"

Switching target back to ES5 as a workaround fix.

+1

Thanks for your issue! This is being tracked with https://github.com/angular/angular/issues/27267 now.

+1

+1

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alaawerfelli picture alaawerfelli  路  148Comments

julianobrasil picture julianobrasil  路  78Comments

mmalerba picture mmalerba  路  77Comments

abdulkareemnalband picture abdulkareemnalband  路  165Comments

jelbourn picture jelbourn  路  171Comments