Class constructor UpgradeComponent cannot be invoked without 'new' after Update to Angular 10

Question

I just started to upgrade an Angular project from 9.1.0 to 10.0.12 It is still a hybrid app and has couple of components upgraded (from Angular JS) as described in the Angular docs

However after the Update to Angular 10 those upgraded components would not load and result in the following error

Class constructor UpgradeComponent cannot be invoked without 'new' (at new MyUpgradedComponentDirective)

I searched the Changelog and didn't found any information regarding UpgradeComponent.

score 4 · Answer 1 · answered Oct 24 '20 at 00:52

Changing jit to true might be not the best solution - that will switch the directive to the mode, when it's compiled in browser runtime, instead of being served as pre-compiled JS code.

It seems like the issue described here might be solved with setting tsconfig.json output property to ES2015 if you have older version there.

More details can be found here: https://github.com/angular/angular-cli/issues/18067

score 1 · Accepted Answer · answered Aug 25 '20 at 15:04

After endless search without results I went to trial & error mode.
I discovered that there is a jit property on the @Directive, if set to true the mentioned error goes away.

With adding jit: true the upgraded component code looks something like this

@Directive({
    selector: 'my-angular-selector',
    jit: true,
})
export class MyDirective extends UpgradeComponent {
    constructor(elementRef: ElementRef, injector: Injector) {
        super('angularJsDirectiveSelector', elementRef, injector);
    }
}

Class constructor UpgradeComponent cannot be invoked without 'new' after Update to Angular 10

2 Answers2