在 .NET 中使用 jQuery/jQuery-UI 生成 Angular 4 App

Question

我正在尝试在 Microsoft 的 SpaTemplate/JavaScript 服务（dontnet new angular）生成的 Angular 4 应用程序中使用 jQuery / jQuery UI。这里没有使用 Angular-CLI，也没有 angular-cli.json 文件。

我已经对此进行了搜索，在 SO 上发现了一些使用 CLI 生成的项目的点击量，但我似乎无法使用我的项目。

我已经通过 NPM 安装了 jQuery 和 jQuery-UI（jQuery 已经存在，但我根据另一个 SO 帖子的答案卸载并重新安装了它）。这会将它们放在 node_modules 文件夹中，并在 webpack.config.vendor.js、package.json 和 package-lock.json 文件中列出它们。

webpack.config.vendor.js：

entry: {
        vendor: [
            '@angular/animations',
            '@angular/common',
            '@angular/compiler',
            '@angular/core',
            '@angular/forms',
            '@angular/http',
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/router',
            'jquery',
            'jquery-ui',
            'bootstrap',
            'bootstrap/dist/css/bootstrap.css',
            'es6-shim',
            'es6-promise',
            'event-source-polyfill',
            'zone.js',
        ]
    },

package.json

"dependencies": {
"jquery": "^3.2.1",
"jquery-ui": "^1.12.1",
//others removed to keep this short

},

package-lock.json（依赖部分）

    "jquery": {
  "version": "3.2.1",
  "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz",
  "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c="
},
"jquery-ui": {
  "version": "1.12.1",
  "resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.12.1.tgz",
  "integrity": "sha1-vLQEXI3QU5wTS8FIjN0+dop6nlE="
},

现在，我迷失的是如何在组件 TS 文件中使用它们。我知道 jQuery 正在工作，因为这个模板使用 Bootstrap 并且汉堡导航在移动设备上工作得很好。 Bootstrap 使用 jQuery 制作下拉动画。

其他帖子说要将此添加到组件 TS 文件中：

declare var $:any;

当我尝试在组件的 ngOnInit 部分执行 $('#myElement').datepicker() 时，这样做会导致错误：

vendor.js?v=HQi6Yanr6lb0tcDpEWxOLi8IMea49FFYgwADBy-xMjk:31 ERROR Error: Uncaught (in promise): ReferenceError: $ is not defined
ReferenceError: $ is not defined

另一个 SO 帖子说这样做而不是声明：

import * as $ from 'jQuery';

这给了我一个不同的错误，因为它不知道 jQuery-UI：

[ts] 类型上不存在属性“datepicker” 'jQuery'。

最后另一个答案是这样说的（对于 Angular2）：

import $ from 'jquery';
import 'jqueryui';

但是，jquery 导入不起作用，因为它说 jquery 没有默认导出。而且我还必须将 jqueryui 更改为 jquery-ui。无论哪种方式，这都行不通。

我错过了什么？我似乎在那里找到了相互矛盾的答案，它们都与使用 Angular-CLI 生成的应用程序有关，而我没有奢侈地使用它。感谢您的帮助。

Answer 1

您是否在添加新参考后重新构建了供应商捆绑包？ 每次将新的 npm 包添加到供应商配置时，都应该执行此命令：

webpack --config webpack.vendor.config.js

Answer 2

看来您需要 JQuery 的类型定义。为 JQuery 搜索“@type/jquery”包并使用 NPM 添加它。

我会避免将 JQuery 与 Angular 一起使用，因为在大多数情况下它不能很好地工作。 JQuery 在 DOM 上工作，而 Angular 在虚拟 DOM 上工作，这会导致很多混乱和错误。有可能让它运行，但在很多情况下都很挣扎。也有可能是第三方 jQuery 库因此无法正常运行。

如果您需要 UI 组件，请使用一些专为 Angular 设计的组件：

• https://ng-bootstrap.github.io/#/components/datepicker/examples
• https://ng-bootstrap.github.io/
• https://angular.io/resources