Error with Angular Build Optimizer and ES2015 target

Bug Report or Feature Request (mark with an `x`)

bug report -> please search issues before submitting

Versions.

macOS
Angular CLI 1.5.0-beta.1
Angular 4.4.3
TS 2.3.4

Repro steps.

In a new cli app set the target to es2015. This works with ng serve --prod and ng build --prod. Run ng serve --prod --build-optimizer or ng build --prod --build-optimizer and there will be a runtime error on application start up.

main.39bafd92ae514fbdcd5b.bundle.js:1 Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
    at Be (main.39bafd92ae514fbdcd5b.bundle.js:1)
    at Object.<anonymous> (main.39bafd92ae514fbdcd5b.bundle.js:1)
    at Object.nkKW (main.39bafd92ae514fbdcd5b.bundle.js:1)
    at n (inline.36c967fef94b0262187c.bundle.js:1)
    at Object.cDNt (main.39bafd92ae514fbdcd5b.bundle.js:1)
    at n (inline.36c967fef94b0262187c.bundle.js:1)
    at Object.0 (main.39bafd92ae514fbdcd5b.bundle.js:1)
    at n (inline.36c967fef94b0262187c.bundle.js:1)
    at window.webpackJsonp (inline.36c967fef94b0262187c.bundle.js:1)
    at main.39bafd92ae514fbdcd5b.bundle.js:1

From the main bundle

class Be extends Ve {
  constructor(e) {
    // missing super call here
  }
  
  toString() {
    return `InjectionToken ${this._desc}`
  }
}
...

In the compiled class there is on super call on a derived class. When the build optimizer is not used the super call is there. The TS application code has no extended bases classes so I'm guessing its coming from the vendors but unfortunately something is broken with the source mapping for me with es2015 as well.

What version of typescript is the project using? There is the possibility of some issues with several of the build optimizer passes when used with 2.4+ and es2015+.

@clydin

@clydin This was running with TS 2.3.4

Found the problem, super calls are being marked as pure:

class ExtendedClass extends BaseClass {
    constructor(e) { /*@__PURE__*/ super(e); }
    toString() { return this._desc; }
}

angular/devkit#168 will fix this.

fix(@angular-devkit/build-optimizer): don't add pure to super calls

Will be out in the next release.

@clydin

Reopening as @clydin brought up a couple more scenarios where the build optimizer is broken on es2015 input.

@prabh-62

@prabh-62 Yup, that seems to have done the trick! Thanks.

@filipesilva

@filipesilva This bug reproduce when use angular v6 , cli v6, and rxjs v6.1.0 to build target es2015. The error is Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor at rxjs AsyncScheduler.js .

@yokots

I get the same error as @yokots

Same issue with Angular 6. I can confirm that it works if targeting ES5.

Same issue with angular 6, targeting esnext

Same with latest v6 and es2015 target

`
yarn ng s --prod

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor`

Heya, we are aware this is still broken. The current tracking issue for this problem is angular/devkit#816.

Still seeing his on Angular 6.0.1:

main.0a1fe70472d685fb5aba.js:1 Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
    at new <anonymous> (main.0a1fe70472d685fb5aba.js:1)
    at Object.zUnb (main.0a1fe70472d685fb5aba.js:1)
    at p (runtime.6afe30102d8fe7337431.js:1)
    at Object.10 (main.0a1fe70472d685fb5aba.js:1)
    at p (runtime.6afe30102d8fe7337431.js:1)
    at n (runtime.6afe30102d8fe7337431.js:1)
    at Array.e [as push] (runtime.6afe30102d8fe7337431.js:1)
    at main.0a1fe70472d685fb5aba.js:1

When expanding the obfuscated code, it looks like this:

        const L = new class extends class { // <--- Why is this "new class extends class" ??????
            constructor(e=null) {
                this.modifiers = e, // <-- Why is this one okay ?  No call to super() !!
                e || (this.modifiers = [])
            }
            hasModifier(e) {
                return -1 !== this.modifiers.indexOf(e)
            }
        }
        {
            constructor(e, t=null) {
                this.name = e   // <---  OFFENDING LINE, there is a super() missing!!
            }
            visitType(e, t) {
                return e.visitBuiltinType(this, t)
            }
        }

Had to switch off build-optimizer for the time being.

Are there scenarios that we need to avoid to not have this issue ? It appeared out of nowhere and we target es6.

class iu extends ru{
  constructor(n,e=ru.now){
    this.actions=[],this.active=!1
    //....
  }
}
```

fix(@angular-devkit/build-optimizer): don't add pure to super calls

Can someone tell me how to make this work? I am on

I updated uglifyjs-webpack-plugin.

Turned off build optimizer, went down to ES5, went up to ES2015. No love yet.

Update 'buildOptimizer' option to false cause of es2015 target

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.}

Navigation Menu

Repository navigation

Error with Angular Build Optimizer and ES2015 target #7799

Bug Report or Feature Request (mark with an `x`)

Versions.

Repro steps.

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Error with Angular Build Optimizer and ES2015 target #7799

Description

Bug Report or Feature Request (mark with an x)

Versions.

Repro steps.

Activity

clydin commented on Sep 23, 2017

coryrylan commented on Sep 25, 2017

filipesilva commented on Sep 26, 2017

filipesilva commented on Sep 26, 2017

filipesilva commented on Sep 26, 2017

filipesilva commented on Sep 26, 2017

4 remaining items

jinder commented on Oct 12, 2017

yokots commented on May 4, 2018

Ore4444 commented on May 6, 2018

TimUnderhay commented on May 7, 2018

jmls commented on May 7, 2018

hellraisercenobit commented on May 15, 2018

filipesilva commented on May 15, 2018

catull commented on May 16, 2018

cedvdb commented on Jun 1, 2018

mvsrinivasan commented on Jun 13, 2018

angular-automatic-lock-bot commented on Sep 8, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Bug Report or Feature Request (mark with an `x`)