Angular-cli: Error with Angular Build Optimizer and ES2015 target

[coryrylan]

Bug Report or Feature Request (mark with an x)

• [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.

[clydin]

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

[coryrylan]

@clydin This was running with TS 2.3.4

[filipesilva]

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

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

[filipesilva]

https://github.com/angular/devkit/pull/168 will fix this.

[filipesilva]

Will be out in the next release.

[filipesilva]

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

[filipesilva]

Fixed by https://github.com/angular/devkit/pull/169

[jinder]

@filipesilva Still seeing this issue with CLI 1.5.0-rc.0 and Angular 5 RC 2:

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
    at new xa (main.5df100d5b8f4d4c1c697.bundle.js:1)
    at Object.Ue (main.5df100d5b8f4d4c1c697.bundle.js:1)
    at Object.cDNt (main.5df100d5b8f4d4c1c697.bundle.js:1)
    at n (inline.64db5fe9a39c25345298.bundle.js:1)
    at Object.0 (main.5df100d5b8f4d4c1c697.bundle.js:1)
    at n (inline.64db5fe9a39c25345298.bundle.js:1)
    at window.webpackJsonp (inline.64db5fe9a39c25345298.bundle.js:1)
    at main.5df100d5b8f4d4c1c697.bundle.js:1

On this:

 class xa extends Ni {
                constructor(t, e, n, r, o, i) {
                    this.selector = t,  // ---- Here
                    this.componentType = e,
                    this._inputs = r,
                    this._outputs = o,
                    this.ngContentSelectors = i,
                    this.viewDefFactory = n
                }
                get inputs() {
                    const t = []
                      , e = this._inputs;
                    for (let t in e)
                        ;
                    return t
                }
                get outputs() {
                    const t = [];
                    for (let t in this._outputs)
                        ;
                    return t
                }
                create(t, e, n, r) {
                    if (!r)
                        throw new Error("ngModule should be provided");
                    const o = ie(this.viewDefFactory)
                      , i = o.nodes[0].element.componentProvider.nodeIndex
                      , s = la.createRootView(t, e || [], n, o, r, wa)
                      , a = It(s, i).instance;
                    return new Oa(s,new Sa(s),a)
                }
            }

[prabh-62]

@jinder Check the version of build-optimizer in your node_modules

> yarn list | grep -i build-optimizer
├─ @angular-devkit/[email protected]

It should be >= 0.0.25

If it's less than 0.0.25, remove yarn.lock or package-lock.json from your project and reinstall packages

[jinder]

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

[yokots]

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

[Ore4444]

I get the same error as @yokots

[KensingtonTech]

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

[jmls]

Same issue with angular 6, targeting esnext

[hellraisercenobit]

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`

[filipesilva]

Heya, we are aware this is still broken. The current tracking issue for this problem is https://github.com/angular/devkit/issues/816.

[catull]

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.

[cedvdb]

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

[mvsrinivasan]

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.

[angular-automatic-lock-bot[bot]]

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