Library including CommonJS dependency fails in Angular 13 #2215
Comments
|
I confirmed that this works correctly in Angular 12. |
|
I'm facing the same issue after upgrading from Angular 12 to Angular 13. |
|
You should be able to consume CJS modules by using synthetic default imports. https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports |
|
That does seem to fix the issue, but it's a breaking change. Do we know if this is due to the TS version used in Angular 13, or does it have to do with how version 13 of ng-packagr builds libraries? |
|
This change seems to be the side-effect of the updated Rollup setup. |
|
I tried using allowSyntheticDefaultImports in the example https://github.com/iamthechad/ng-lib-test:
And I still get an error in the console |
|
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. |
|
We are facing the same issue. I'll try to provide as much information as possible: We are trying to use a javascript file into typescript and are re-exporting it for use along several components. The library manufacturer provided as the JS file as a CJS and as a UMD file. The re-export looks like this: import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CdkDirectivesModule, CdkPipesModule, CdkTranslateModule } from '@cwa/cdk';
import { PositionTableModule } from './position-table/position-table.module';
export * from './position-table/position-table.module';
export * from './position-table/position-table.component';
import * as __spider from './spider';
export const Spider = __spider;
@NgModule({
declarations: [],
exports: [ PositionTableModule ],
imports: [
CommonModule,
CdkDirectivesModule,
CdkPipesModule,
CdkTranslateModule
]
})
export class SharedModule { }When we are using the CommonJS-file, the dist/fesm2015/shared.mjs looks like this: // Following line is just a copy of the original spider.js file
exports["spider-library"] = /* code of the .js file, unmodified and directly copied into the shared.mjs. It is not assigned to any variable which means it can't be used by the follow-up re-export */;
var __spider = /*#__PURE__*/Object.freeze({
__proto__: null
});
const Spider = __spider;When changing from a namespaced to a default import, like this: we get a compilation error from ng-packagr: Building entry point '@hidden-name/shared'✔ Compiling with Angular sources in Ivy partial compilation mode. Trying the same steps with the UMD module javascript file yields the same results :( |
|
I notice, in order to get this work, sockjs-client must be on both projects package.json, the library and the main app. |
|
I have same issue, but with library "node-polyglot" |
|
Same issue here with Inputmask. I have In fact, using the reproduction that I posted to angular/angular#47078, the error still occurs even after changing every https://github.com/angular/angular/files/9282262/ng-lib-dependency-issue.tgz Unfortunately, without a workaround this issue is completely blocking an upgrade to Angular 13. |
|
Same issue here with moment! Any workaround? |
@antch @mounthorse-slns |
|
@m0cs I have |
|
These are my dependencies on main app: and these on my library (I maintain the library): I have activated The test application in the library works but if I publish it (with
I've tried almost everything and I think the issue is |
|
@mounthorse-slns moment on the library side is under "dependencies", but i don't think that's the problem, neither |
|
@m0cs Related to the first part, on library side Moment is under |
|
I' ve solved this issue for Hope this helps someone else. |
|
Hey @mounthorse-slns what's your case? i mean, moment is on the library project, but not in the main app? |
|
for me, in case of use moment.js, helped this approach while in project, import looks like this |
|
@m0cs my case was that moment was in both projects but with Angular 14 seems that dependencies are not bundled anymore while publishing so I put moment only on the main app and passed the dependency to the library. |
|
@michelebombardi HI! I am facing the same problem right now. I have watched repository you dropped earlier but I can`t understand how it solves the problem. What exactly have you done to solve this problem? |
@yegormk did you try this? same dependency on both projects. |
Type of Issue
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 thesockjs-clientmodule 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 withnpm start.If the application component uses the
sockjs-clientmodule directly it works correctly. However, if thesockjs-clientusage is in the library and exposed through a service, this error is shown in the console:This behavior is not limited to
sockjs-clientand happens with other CommonJS modules.Expected Behaviour
The
sockjs-clientmodule should be resolved correctly when it is used within a library.Version Information
The text was updated successfully, but these errors were encountered: