typescript - Tether használata webpack-kel (Angular CLI)

Egy projektet fejlesztek Angular CLI használatával. Tehát telepítettem a tetőhöz a tether-t a npm install tether --save parancs használatával, és importáltam a függőséget az app.component.ts fájlba a import * as Tether from 'tether' segítségével.

Amikor megpróbálom inicializálni a Tethert a new Tether({ ... }) segítségével, a konzolon a következő hiba jelenik meg:

KIVÉTEL: A WEBPACK_IMPORTED_MODULE_4_tether nem egy konstruktor

Ha kiírom a Tether változót a console.log(Tether) segítségével, akkor úgy tűnik, egy üres objektumot kapok.

Tudnátok segíteni nekem? Soha nem használtam sem TypeScriptet, sem Webpacket, szóval elnézést, ha valami nyilvánvalót kihagytam itt.

Válasz #1

Ha a Bootstrap 4-et használja, akkor a tether.js már függőségként szerepel. Ez működhet.

Angular-cli használata

Először telepítse a Bootstrapet az npm-ről:

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.

Webpackhez

Ha webpacket használsz:

Állítsa be a bootstrap-loader-t a dokumentációban leírtak szerint;

Telepítse a tether.js-t az npm segítségével;

Add hozzá a tether.js-t a webpack ProvidePlugin pluginhoz:

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

A Bootstrap 4 már nem használja a window.tether címkét

Note that using Bootstrap 4.0.0-alpha.6,

A Bootstrap már nem a "window.Tether"-et ellenőrzi, hanem a globális "Tether" változót, így a webpack konfiguráció a következőképpen alakul

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

Válasz #2

Mivel az Angular-cli-t használod, hozzá kell adnod azt az angular-cli.json fájlodhoz

A fájlodban (angular-cli.json) illeszd be a scripts tömb alá:

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

A CSS-t illessze be a stílusokba.

Remélem, ez működik.