Use jQuery in a custom Angular 6+ library

Question

EDIT2
I get the feeling my approach to write an independent angular library for others to use is wrong?
My first thought was writing a npm module but it has to be private and cant be published - would that work / be easy?
Is my approach wrong?

How do I use jQuery in my Angular 6+ library?

I created a library with

ng generate library nodeeditor --prefix=lib

Then added a jQuery npm module to it with

cd projects/nodeeditor    
npm i --save jquery

But when stating

import * as jQuery from 'jquery/dist/jquery.min.js'

in nodeeditor.component.ts (as I did in Angular projects only when absoloutely necessary)

ng build nodeeditor

gives me

BUILD ERROR Cannot call a namespace ('jQuery')

Anyone got any idea?

EDIT1
Generated folder structure looks like this

import $ from 'jquery'; or import { $ } from 'jquery'; or import * as JQuery from 'jquery'; pick your poison. if this doesn't work, delete the module and add it again. — Bargros
– Bargros, Commented May 3, 2019 at 12:33
import { $ } from 'jquery'; also does not work - testing next — Martin Eckleben
– Martin Eckleben, Commented May 3, 2019 at 12:42
import * as JQuery from 'jquery'; also does not work but thank you anyway for your time! — Martin Eckleben
– Martin Eckleben, Commented May 3, 2019 at 12:43

Paaarth · Accepted Answer · 2019-05-03 12:38:36Z

1

npm install jquery --save

.angular-cli.json or angular.json:

"scripts": [
  "node_modules/jquery/dist/jquery.js"
]

Import jquery file module.ts file

import * as $ from 'jquery';

to check jquery included in our application write $ in the browser console

answered May 3, 2019 at 12:38

Paaarth

4,4693 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Martin Eckleben Over a year ago

There is no angular.cli.json / angular.json in the library (which I later intend to distribute without its parent angular project) only in the source app module / angular project

Paaarth Over a year ago

LOL which angular version are you using?

Martin Eckleben Over a year ago

Added a picture to show the generated folder structure. Using "@angular/common": "~7.2.0", "@angular/compiler": "~7.2.0", "@angular/core": "~7.2.0",

Paaarth Over a year ago

I can see the angular.json file 3rd after src folder

Martin Eckleben Over a year ago

Sure there is one in the main angular app but I intend to write a library "nodeeditor" and later only distribute the library that should be completely independent from the project its being used in. The one you see is from the angular project I run the library in for development.

|

Nithya Rajan · Accepted Answer · 2019-05-03 12:25:20Z

0

You should change your import as follows:

import * as jQuery from 'jquery';

answered May 3, 2019 at 12:25

Nithya Rajan

4,93422 silver badges34 bronze badges

2 Comments

Martin Eckleben Over a year ago

Nope still same sorry. Also I guess I habituated to do it like that because everything else also didnt work in normal Angular projects. Ill check that back.

Martin Eckleben Over a year ago

I was wrong import * as jQuery from 'jquery'; generally works but not in this case.

Kiran · Accepted Answer · 2021-10-05 07:29:45Z

I hope I've a way to do this. I know this is a bit late. But it might help some one in need. I'm able to use the jQuery in my library. Here most of the answers cover how to install jquery / @types in the parent application. That is part of the answer but not all.

Since angular library implementation expect the node modules to be delivered by the parent application, we need to install jQuery / @types at the parent app level and add that to scripts section of the angular.json like mentioned in the most of the answers.

How to make it work in library then?

How I approached this is

I added the jquery and @types in "peerDependencies" and "devDependencies" of my library "package.json" file.
I added the jquery in "umdModuleIds". (I believe this is totally not required. But I added this to make sure, it will not say unknown dependency when try to build).
In my library's "tsconfig.lib.json" file I added the "jquery" in the "types" section.

Ref:

package.json

    {
      "name": "testing-lib",
      "version": "0.0.1",
      "peerDependencies": {
        "@angular/common": "^10.0.9",
        "@angular/core": "^10.0.9",
        "bootstrap": "^4.4.1",
        "jquery": "^3.5.1",
        "@types/jquery": "^3.5.1",
        "ngx-toastr": "13.2.1",
        "@angular/material": "^9.0.0"
      },
      "dependencies": {
        "tslib": "^2.0.0"
      },
      "devDependencies": {
        "ckeditor4-angular": "^2.1.0",
        "jquery": "^3.5.1",
        "bootstrap": "^4.4.1",
        "ngx-toastr": "13.2.1",
        "@types/jquery": "^3.5.1",
        "@angular/material": "^9.0.0"
      }
    }

ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/testing-lib",
  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      "ckeditor4-angular": "ckeditor4-angular",
      "ngx-toastr": "ngx-toastr",
      "bootstrap": "bootstrap",
      "jquery": "jquery",
      "@angular/material": "@angular/material"
    },
    "styleIncludePaths": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ]
  }
}

tsconfig.lib.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "declaration": true,
    "inlineSources": true,
    "types": [
      "jquery"
    ],
    "lib": [
      "dom",
      "es2018"
    ]
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

After this I build my library and the jQuery started to work.

Note: Please make sure your parent app does have jQuery and @types installed.

Collectives™ on Stack Overflow

Use jQuery in a custom Angular 6+ library

3 Answers 3

14 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related