Question

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

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

EXCEPTION：WEBPACK_IMPORTED_MODULE_4_tether不是构造函数

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

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

Answer 1

如果您使用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：

按照docs;

中的描述设置bootstrap-loader

通过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'
    })
]

Answer 2

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

在你的文件（angular-cli.json）中将它包含在scripts数组中：

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

在样式中包含css。

希望这会成功。

Answer 3

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

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

查看精彩的Exploring ES6 book on modules了解详情。

在网络包中使用tether（Angular CLI）

3 个答案: