CommonJS modules used in a Library are not loaded properly during Application runtime

[antch]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

Yes

Description

When consuming an Angular Library that imports a CommonJS dependency, the dependency isn't imported correctly. This is most obvious when there is a default import that is supposed to be able to be used as a constructor, for example:

import Inputmask from 'inputmask';

new Inputmask();

The above succeeds in the application code itself, but not from library code consumed by the application. Instead of the imported type being a function as it should be, it is an object.

Reproduction attached: ng-lib-dependency-issue.tgz

Please provide a link to a minimal reproduction of the bug

https://github.com/angular/angular/files/9282262/ng-lib-dependency-issue.tgz

Please provide the exception or error you saw

TypeError: inputmask__WEBPACK_IMPORTED_MODULE_2__ is not a constructor

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.1.1
Node: 14.19.3
Package Manager: npm 6.14.17 
OS: darwin x64

Angular: 14.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1401.1
@angular-devkit/build-angular   14.1.1
@angular-devkit/core            14.1.1
@angular-devkit/schematics      14.1.1
@schematics/angular             14.1.1
ng-packagr                      14.1.0
rxjs                            7.5.6
typescript                      4.7.4

Angular CLI: 13.3.9
Node: 14.19.3
Package Manager: npm 6.14.17
OS: darwin x64

Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.9
@angular-devkit/build-angular   13.3.9
@angular-devkit/core            13.3.9
@angular-devkit/schematics      13.3.9
@angular/cdk                    13.3.9
@angular/cli                    13.3.9
@schematics/angular             13.3.9
ng-packagr                      13.3.1
rxjs                            6.6.3
typescript                      4.6.4
webpack                         5.70.0

Anything else?

For the reproduction, just run:

npm i
ng build lib
ng serve

The repro is using the latest version of Angular, but I came across this initially while attempting to upgrade from Angular 12.2.16 to 13.3.11, so the issue is present there as well. It's currently blocking my upgrade to Angular 13. This worked fine in Angular 12 and in previous versions.

The issue is also reproducible in component tests.

[antch]

I just realized that this has already been reported in ng-packagr: ng-packagr/ng-packagr#2215.
Closing this.

[angular-automatic-lock-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.}