Angular Storybook TypeError: Class constructor SimpleChange cannot be invoked without 'new'

[RaySheikh]

Describe the bug I'm using storybook for angular 12. It seems somehow storybook is transpiling es6 native classes to es5. The issue happens when extending a native angular class and calling the super function. This works fine in an angular project but when I add this component in storybook it throws error: Class constructor SimpleChange cannot be invoked without 'new'. Can someone please help with this?

To Reproduce

import { SimpleChange } from '@angular/core';

export class OverlayChange extends SimpleChange {

    constructor(previousValue: any, currentValue: any, firstChange: boolean = false) {
        super(previousValue, currentValue, firstChange);
    }

    isChanged(): boolean {
        return this.currentValue !== this.previousValue;
    }
}

position(position: OverlayPosition) {
        this.changes.position = new OverlayChange (this._position, position);
        this._position = position;
        return this;
    }

System using angular 12 and storybook 6.3.6

Additional context tsconfig:

{
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "declarationMap": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true,
    "inlineSources": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "types": [
      "node"
    ],
    "lib": [
      "dom",
      "es2018"
    ]
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

[Marklb]

If you change "compilerOptions.target" in your tsconfig to "es2015", or higher, then the error will not happen.

I am not sure if "es5" should work or not, because I haven't looked into the differences in a while. Someone that knows more about the differences between those targets may be able to give an explanation why.

[RaySheikh]

@Marklb I tried that and it does not work. All the stories disappear if i use anything other than "es5"

[Marklb]

@RaySheikh You may need to provide a repro. I was able to reproduce the problem by setting "target" to "es5" in a project of mine and changing the "target" to "es2015" let me initialize an OverlayChange object.

I have tried changing to "es5" and back to "es2015" in a few projects with the same result each time.

[RaySheikh]

@Marklb @shilman If i switch target to ES2015 all of the stories disappear and i get the following error: index.js:49 Unexpected error while loading ./test-button.stories.ts: ReferenceError: Cannot access 'xyz' before initialization. If i temporarily remove xyz. I get the same error with a different component. The stories load fine with es5but all the extended classes break. Any way we can keep es5 option because it seems es2015 is causing a lot of my components to break. This is a fairly large project and a private repo i'll try to reproduce what i can.