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

[FrancescoBorzi]

🐞 bug report

Affected Package

Not sure about the affected package. It worked fine with Angular 9

Is this a regression?

Yes

Description

In our Angular app we use this library that adds a simple wrapper around Forms in order to add some typings:

https://github.com/dirkluijk/ngx-typesafe-forms

It worked fine until Angular 9, now it's failing with:

TypeError: Class constructor FormControl cannot be invoked without 'new'

The source code of the FormControl class is:

https://github.com/dirkluijk/ngx-typesafe-forms/blob/master/projects/ngx-typesafe-forms/src/lib/form-control.ts

🔬 Minimal Reproduction

We are working on it but weren't able to create a minimal reproduction yet.

🔥 Exception or Error

TypeError: Class constructor FormControl cannot be invoked without 'new'

🌍 Your Environment

Angular Version:

Angular CLI: 10.0.0
Node: 12.18.1
OS: darwin x64

Angular: 10.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.8
@angular-devkit/build-angular     0.1000.0
@angular-devkit/build-optimizer   0.901.9
@angular-devkit/build-webpack     0.901.9
@angular-devkit/core              9.1.8
@angular-devkit/schematics        9.1.8
@angular/cdk                      10.0.0
@angular/cli                      10.0.0
@angular/material                 10.0.0
@angular/pwa                      0.901.8
@ngtools/webpack                  9.1.9
@schematics/angular               9.1.8
@schematics/update                0.1000.0
rxjs                              6.5.5
typescript                        3.9.5
webpack                           4.42.0

Anything else relevant?

Worked fine with Angular 9

[JonWallsten]

Same here! I export PaginatorComponent from my library built with ng-packagr and then extends that component in my app.

Edit: Got the same error extending ErrorHandler.

From the library:

From the app:

Error message:

angular.js:4508 ERROR TypeError: Class constructor PaginatorComponent cannot be invoked without 'new'
    at new PaginatorEditComponent (paginator-edit.component.ts:4)
    at PaginatorComponent_Factory (paginator.component.ts:380)
    at NodeInjectorFactory.PaginatorEditComponent_Factory [as factory] (paginator-edit.component.ts:24)
    at getNodeInjectable (angular.js:4342)
    at instantiateAllDirectives (angular.js:8457)
    at createDirectivesInstances (angular.js:7826)
    at Module.ɵɵelementStart (angular.js:14363)
    at InstanceTableComponent_paginator_edit_16_Template (instance-table.component.html:184)
    at executeTemplate (angular.js:7799)
    at renderView (angular.js:7608)

This is also thrown:

angular.js:4508 ERROR Error: Multiple components match node with tagname paginator-edit
    at throwMultipleComponentError (angular.js:5796)
    at findDirectiveDefMatches (angular.js:8544)
    at resolveDirectives (angular.js:8338)
    at elementStartFirstCreatePass (angular.js:14301)
    at Module.ɵɵelementStart (angular.js:14339)
    at InstanceTableComponent_paginator_edit_16_Template (instance-table.component.html:184)
    at executeTemplate (angular.js:7799)
    at renderView (angular.js:7608)
    at TemplateRef.createEmbeddedView (angular.js:10527)
    at ViewContainerRef.createEmbeddedView (angular.js:10596)

which is werid becaause of this:

Target for the applications are ES5.

[JoostK]

Sounds like the library code is bundled using ES2015, while subclasses call their constructors using ES5 conventions. @JonWallsten can you share the bundled code for the subclass PaginatorEditComponent and base class PaginatorComponent?

[JoostK]

Or better yet, a runnable reproduction? 😁 A repo on Github would be appreciated.

[JonWallsten]

@JoostK: This is the code from fesm2015/bundle.js: https://pastebin.com/USAzbtGN

This is from esm2015/components/paginator/paginator.component.js: https://pastebin.com/gAUBXx9w

[JoostK]

@JonWallsten Sorry, I meant the final app bundle.

[JonWallsten]

@JoostK: Cool. I'm on it. Takes a while to build. Also gets these messages:

 Another process, with id 47996, is currently running ngcc. 
 | Waiting up to 250s for it to finish. 
 | (If you are sure no ngcc process is running then you should delete the lock-file at C:/Users/***/repo/oas-web/node_modules/@angular/compiler-cli/ngcc/__ngcc_lock_file__.)
 | Another process, with id 24848, is currently running ngcc. 
 | Waiting up to 250s for it to finish. 
 | (If you are sure no ngcc process is running then you should delete the lock-file at C:/Users/***/repo/oas-web/node_modules/@angular/compiler-cli/ngcc/__ngcc_lock_file__.)

Which is weird since I pre-compile everything. I'll paste the code soon.

Edit: Also need to disable minifying. Impossible to get the correct chunk of code.

[JonWallsten]

@JoostK: Here's PaginatorEditComponent (app): https://pastebin.com/jKTF9qcu

Here's PaginatorComponent (lib): https://pastebin.com/qQ3s8kDD

So if I'm not totally stupid it seems like the app is compiled to ES5 but the code from the library (and Angular ErrorHandler etc) library is not.

[lagoshny]

Have the same issue, but If downgrade ng-packagr from 10.0.0 version to 9.1.5 then all work fine...

[JoostK]

I will transfer this to the CLI repo, as it's doing all the bundling. I'm wondering if angular/angular-cli#17644 could have something to do with it.

For anyone having this issue, can you share a repo on Github as a reproduction?

[lagoshny]

I have reproduced this issue when using @lagoshny/ngx-hal-client library compiled for angular 10 in my app based on angular 7.

The example of app with angular 7 with @lagoshny/ngx-hal-client dependency you can find here https://github.com/lagoshny/ng-example-app.

Note: @lagoshny/ngx-hal-client has two versions with differences only in ng-packagr version:

1.1.1-alfa-unstable (https://github.com/lagoshny/ngx-hal-client/tree/angular10_migration) - (this one used in the example app) compiled for angular 10 with "ng-packagr": "^10.0.0". When run the example app with this version I have error in console "ERROR TypeError: "class constructors must be invoked with 'new'".

1.1.0 (https://github.com/lagoshny/ngx-hal-client) - compiled for angular 10 with "ng-packagr": "^9.1.5". When run the example app with this version all work fine.

In the example app used 1.1.1-alfa-unstable version that you can reproduce this error. If you change version to 1.1.0 all will work fine.

[alan-agius4]

@JonWallsten, can you please provide the output ng version? Are you using a custom Angular CLI builder to build your application? As in the stacktrace I am seeing ‘angular.js` which is not a standard file generated by the CLI.

[JonWallsten]

@alan-agius4: I'm using Webpack/AngularCompilerPlugin, latest version as of yesterday when I migrated. I'll get you a repro in a couple of hours.

[JonWallsten]

@alan-agius4: Repro:

1. Clone https://github.com/JonWallsten/monorepo-new/tree/angular-10-repro (sent you an invite)
2. Run npm run full-install in the root.
3. Run npm run dev:edit in the root.
4. Open: http://localhost:3060
5. Check console for error message

[alan-agius4]

@JonWallsten and @lagoshny, the issue you are experiencing is due to one of the breaking changes in Angular 10. Where the deprecated esm5 and fesm5 formats are no longer generated and form no longer part of the APF spec.

@JonWallsten, since you are not using the Angular CLI, you will need to downlevel the distributed Angular libraries to es5 on your own. You can use Babel or similar tools to achieve this.

@lacolaco, in your case since you are using the Angular package format 10 in an Angular CLI pre version 10, no downleveling is happening when targeting directly ES5, in this case you have 2 options either don't use Angular 10 to build your library, or migrate your applications to use Angular 10. The latter is the recommended approach. Also, it's important to point out that Angular version 7 is no longer supported by the Angular team.

@FrancescoBorzi, I am seeing a mixture of version of Angular devkit packages (0.901.8, 0.901.9, 0.1000.0, 9.1.9), this typically is an indicator of 2 things, either you have dev dependencies in your workspaces which are not need and incorrect, or you are using a 3rd party Angular CLI builder.

More context about the APF changes: https://github.com/angular/angular/pull/36944

[JonWallsten]

@alan-agius4 : I see. So there's no plan to support this either? Using target ES2015 would be the other option, right? I think we still have to support IE11, so that would have to wait though.

[alan-agius4]

@JonWallsten, you can use ES2015 as target which solves the issues, but indeed this won't work for IE 11 which requires ES5.

Indeed, for non Angular CLI users, it is expected that when targetting ES5 and their build pipeline doesn't handle downlevelling they will end up in a broken state, and there won't be any out-of-box support for this scenario.

You have two options for you here, either start using the Angular CLI, which does downlevelling out of the box when targeting ES5 or implement downlevelling in your build pipeline.

[JonWallsten]

@alan-agius4: Thanks! I'll look into it!

[alan-agius4]

Closing as per above explanation.

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