0

我正在使用 Angular CLI 开发一个项目。所以我使用 安装了系绳npm install tether --save，并在 app.component.ts 中使用import * as Tether from 'tether'.

当我尝试使用new Tether({ ... })它初始化 Tether 时，会在控制台中打印以下错误：

例外：WEBPACK_IMPORTED_MODULE_4_tether 不是构造函数

如果我使用它打印 Tether 变量，console.log(Tether)它会给我一个似乎是空对象的东西。

你们能帮帮我吗？我以前从未使用过 typescript 和 webpack，所以如果我在这里遗漏了一些明显的东西，我很抱歉。

4

3 回答 3

6

如果您使用的是 bootstrap4，那么 tether.js 已经是一个依赖项。这可能有效

使用 Angular-cli

首先，从 npm 安装 Bootstrap：

npm install bootstrap@next

Then add the needed script files to angular-cli.json --> scripts:



 "scripts": [
          "../node_modules/jquery/dist/jquery.js",
          "../node_modules/tether/dist/js/tether.js",
          "../node_modules/bootstrap/dist/js/bootstrap.js"
           ],

Finally add the Bootstrap CSS to the angular-cli.json --> styles array:

    "styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"`enter code here`
],

Restart ng serve if you're running it, and Bootstrap 4 should be working on your app.

对于 Webpack

如果你使用 webpack：

按照文档中的说明设置引导加载程序；

通过 npm 安装 tether.js；

将 tether.js 添加到 webpack ProvidePlugin 插件中：

 plugins: [
        <... your plugins here>,
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "window.Tether": 'tether'
        })
    ]

Bootstrap 4 不再使用标签 window.tether

Note that using Bootstrap 4.0.0-alpha.6,

Bootstrap 不再检查“window.Tether”，而是检查全局变量“Tether”，因此 webpack 配置变为

plugins: [
    <... your plugins here>,
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        "Tether": 'tether'
    })
]
于 2017-02-14T13:45:14.820 回答
3

由于您使用的是 Angular-cli，因此您必须将其添加到 angular-cli.json

在您的文件（angular-cli.json）中，将其包含在脚本数组下：

 "scripts": [
            "other/scripts/you've used"
            "../node_modules/tether/dist/js/tether.min.js",
            "../node_modules/tether-shepherd/dist/js/shepherd.min.js"
        ],

在样式中包含 css。

希望这行得通。

于 2017-02-14T11:45:15.337 回答
0

使用import Tether from 'tether';此导入默认导出的系绳，这恰好是TetherClass您尝试实例化的。

该代码import * as Tether导入库的所有（默认和命名）导出，您需要new Tether.TetherClass().

查看关于模块的伟大的Exploring ES6书籍以获取详细信息。

于 2017-02-06T13:17:49.903 回答