ng-packagr: Library including CommonJS dependency fails in Angular 13

Type of Issue

[ X ] Bug Report
[ ] Feature Request

Description

We are upgrading our application that uses several libraries to Angular 13. One of the libraries depends on sockjs-client. This library now fails to load the sockjs-client module correctly after the upgrade.

How To Reproduce

Here’s a sample application to show the issue: https://github.com/iamthechad/ng-lib-test

Build the library with npx ng build sample-lib, then run the application with npm start.

If the application component uses the sockjs-client module directly it works correctly. However, if the sockjs-client usage is in the library and exposed through a service, this error is shown in the console:

TypeError: (sockjs_client__WEBPACK_IMPORTED_MODULE_0___namespace_cache || (intermediate value)(intermediate value)) is not a constructor
    at TestService.createSocket (main.js:151)
    at AppComponent.ngOnInit (main.js:28)
    at callHook (vendor.js:23142)
    at callHooks (vendor.js:23111)
    at executeInitAndCheckHooks (vendor.js:23062)
    at refreshView (vendor.js:30100)
    at renderComponentOrTemplate (vendor.js:30199)
    at tickRootContext (vendor.js:31430)
    at detectChangesInRootView (vendor.js:31455)
    at RootViewRef.detectChanges (vendor.js:42027)

This behavior is not limited to sockjs-client and happens with other CommonJS modules.

Expected Behaviour

The sockjs-client module should be resolved correctly when it is used within a library.

Version Information

ng-packagr: 13.1.2
@angular/compiler: 13.1.1
rollup: 2.63.0
typescript: 4.5.4
node: 14.17.6
npm: 6.14.15
sockjs-client: 1.5.2

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 17
Comments: 23 (3 by maintainers)

Most upvoted comments

for me, in case of use moment.js, helped this approach import moment in library code this way

import moment from 'moment/moment';

while in project, import looks like this

import * as moment from 'moment/moment';

gmixo on Sep 28, 2022

You also need to change the following import https://github.com/iamthechad/ng-lib-test/blob/5a935d43245cb1d97707331620a75ad6d4e7a1b8/projects/sample-lib/src/service/test.service.ts#L2 to a default import instead of a namespace import.

alan-agius4 on Jan 17, 2022

I’ ve solved this issue for moment library. Basically the solution is explained in angular-calendar source code (here). So credits for this go to @mattlewis92

Hope this helps someone else. Thank you!

michelebombardi on Sep 6, 2022

I’m facing the same issue after upgrading from Angular 12 to Angular 13.

hofsa on Jan 7, 2022