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

Question

编辑2
我感觉我编写独立的角度库供其他人使用的方法是错误的？
我的第一个想法是编写一个 npm 模块，但它必须是私有的并且不能发布 - 这会工作/容易吗？
难道是我的做法不对？

如何在 Angular 6+ 库中使用 jQuery？

我用

创建了一个库

ng generate library nodeeditor --prefix=lib

然后向其中添加一个 jQuery npm 模块

cd projects/nodeeditor    
npm i --save jquery

但是当说

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

在nodeeditor.component.ts中 （正如我在 Angular 项目中仅在绝对必要时所做的那样）

ng build nodeeditor

给我

构建错误无法调用名称空间（'jQuery'）

有人知道吗？

编辑1
生成的文件夹结构如下所示

Answer 1

npm install jquery --save

.angular-cli.json 或 angular.json:

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

导入jquery文件module.ts文件

import * as $ from 'jquery';

要检查我们的应用程序中包含的 jquery，请在浏览器控制台中写入 $

Answer 2

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

import * as jQuery from 'jquery';

Answer 3

我希望我有办法做到这一点。我知道这有点晚了。但它可能会帮助一些有需要的人。 我可以在我的库中使用 jQuery。这里大多数答案都涵盖了如何在父应用程序中安装 jquery / @types。这是答案的一部分，但不是全部。

由于 Angular 库实现期望节点模块由父应用程序交付，因此我们需要在父应用程序级别安装 jQuery / @types 并将其添加到 angular.json 的脚本部分，就像大多数答案中提到的那样。

那么如何让它在图书馆工作？

我是如何做到这一点的

1. 我在我的库“package.json”文件的“peerDependency”和“devDependency”中添加了jquery和@types。
2. 我在“umdModuleIds”中添加了jquery。 （我相信这完全不是必需的。但我添加了这个以确保在尝试构建时不会说未知的依赖项）。
3. 在我的库的“tsconfig.lib.json”文件中，我在“types”部分添加了“jquery”。

参考：

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"
  ]
}

此后，我构建了我的库，并且 jQuery 开始工作。

注意： 请确保您的父应用程序确实安装了 jQuery 和 @types。

Answer 4

不要犯这个非常严重的错误，在框架中使用框架是没有意义的