在自定义 Angular 6+ 库中使用 jQuery

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

Answer 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

Answer 2

您应该按如下方式更改导入：

import * as jQuery from 'jquery';

Answer 3

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

1. I added the jquery and @types in "peerDependencies" and "devDependencies" of my library "package.json" file.
2. 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).
3. 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.