在网络包中使用系绳(Angular CLI)

Question

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

当我尝试初始化Tether时,new 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:

按文档中的描述设置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'
    })
]