__WEBPACK_IMPORTED_MODULE_5_jquery __（...）。modal不是函数

Question

我正在尝试打开bootstrap模式，但它不能在fullcalendar angular 2中工作。

dayClick: function(date, jsEvent, view) {
        (<any>$('#myModal33')).modal('show');
        $('#click_date').val(date._d);
      }

我明白了：

  

WEBPACK_IMPORTED_MODULE_5_jquery （...）。模态不是函数

如果我删除了这个import * as $ from 'jquery';，那么模态工作正常，但我也需要jQuery。

Answer 1

只是改变：

import * as $ from 'jquery';

为：

import * as $AB from 'jquery';

这解决了我的问题。现在它的工作就像vroom vroom .... yeheeeee .....

Answer 2

可接受的答案确实有效，但这是我的想法，为什么$AB有效，而不是$。

在@types/jquery页上，该包包含全局值$, Symbol and jQuery。在这种情况下，您需要从包中导入所有内容，但不能覆盖这三个变量本身。

因此，只需将以下行添加到您的app.module.ts中，您就可以在整个应用程序中使用$标记。

import * as AnythingThatIsNotDollarSignOrSymbolOrjQuery from "jquery"

Answer 3

我认为这个问题已得到解答。 Managing jQuery plugin dependency in webpack

使用ProvidePlugin注入隐式全局变量

大多数遗留模块依赖于特定全局变量的存在，比如jQuery插件对$或jQuery的影响。在这种情况下，您可以配置webpack，以便在遇到全局$标识符时添加var $ = require（“jquery”）。

可能需要

custom.typings.d.ts 来防止打字稿错误。

您可以安装“@ types / jquery”，可能不需要此文件。

declare var $: any;

<强> webpack.config.js

var webpack = require("webpack");

...

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
]