How to use jquery in a Angular 15 npm package?

Question

I create my own (private) npm packages based on Angular with Typescript.

I'm creating a package with a file named pdf-viewer.service.ts with the following content:

import { BehaviorSubject, Subject } from 'rxjs';
// ....
import * as $ from 'jquery';

@Injectable({
  providedIn: 'root'
})
export class PDFViewerService {
  constructor() {
    // $(.....)
  }
}

When I place this package directly in my main project, everything is working fine.

But when I build the package and publish it to my private repo and access it from there it isn't working.

I get this error:

ERROR TypeError: (jquery__WEBPACK_IMPORTED_MODULE_0___namespace_cache || jquery__WEBPACK_IMPORTED_MODULE_0___namespace_cache) is not a function

Some background info
After building and publishing the package it creates a PDFViewer.service.d.ts with the following content:

import { BehaviorSubject, Subject } from 'rxjs';
// ....
// Note that the jquery import is missing here!!!!!!!!!!!!

@Injectable({
  providedIn: 'root'
})
export declare class PDFViewerService {
  constructor();
}

How can i make this work?

Does this answer your question? [How to use jQuery with Angular?](https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular) — Heretic Monkey, May 16 '23 at 11:47
@HereticMonkey No it didn't. I found a solution (see my answer) — Ceelearn anddo, May 16 '23 at 13:38
You cannot call a namespace just as the error indicates. Change your import to `import $ from "jquery";` — Aluan Haddad, May 16 '23 at 19:48
Well, I know that's the only correct way. Make sure you have `--esModuleInterop` enabled in your tsconfig.json — Aluan Haddad, May 21 '23 at 23:46

Ceelearn anddo · Accepted Answer · 2023-05-16T13:37:28.100

0

After spending some time on it, I have managed to find a solution.

I have added the following code to the angular.json file of my main project:

{
  ".....": {
    "architect": {
       "build": {
         "options": {
           "styles": [
             "...."
           ],
           "scripts": [
             "./node_modules/jquery/dist/jquery.js"
           ]
         }
       }
    }
  }
}

And changed the service to:

/// <reference types="jquery" />

import {BehaviorSubject, Subject} from 'rxjs';
declare var $: any;

// ....

edited May 16 '23 at 13:37

answered May 16 '23 at 11:42

Ceelearn anddo

69
8

I strongly recommend against this approach – Aluan Haddad May 22 '23 at 00:04
No explanation? – Ceelearn anddo May 22 '23 at 07:35
Your referencing jQuery as a global, which removes all the benefits of the module system, then you add insult to injury by removing the very type information that you added the reference directive to receive in the first place with your `declare var` – Aluan Haddad May 22 '23 at 13:49

How to use jquery in a Angular 15 npm package?

1 Answers1