In my development process, I often create my own npm packages using Angular and Typescript.
One of the packages I am currently working on is a PDF viewer service, which includes a file named pdf-viewer.service.ts with the following code:
import { BehaviorSubject, Subject } from 'rxjs';
// ....
import * as $ from 'jquery';
@Injectable({
providedIn: 'root'
})
export class PDFViewerService {
constructor() {
// $(.....)
}
}
When I directly include this package in my main project, everything works perfectly without any issues.
However, once I build and publish the package to my private repository and try to access it from there, it fails to work properly.
The error message I encounter is:
ERROR TypeError: (jquery__WEBPACK_IMPORTED_MODULE_0___namespace_cache || jquery__WEBPACK_IMPORTED_MODULE_0___namespace_cache) is not a function
A bit of context:
After building and publishing the package, it generates a PDFViewer.service.d.ts file with the missing jquery import, which may be causing the issue:
import { BehaviorSubject, Subject } from 'rxjs';
// ....
// Note that the jquery import is missing here!!!!!!!!!!!!
@Injectable({
providedIn: 'root'
})
export declare class PDFViewerService {
constructor();
}
I am seeking advice on how to resolve this issue and make the package work correctly when accessed from the private repository. Any insights or solutions would be greatly appreciated.