typescript - Tetherin käyttäminen Webpackin kanssa (Angular CLI)

Kehitän projektia käyttäen Angular CLI:tä. Joten asensin tetherin komennolla npm install tether --save ja importoin riippuvuuden tiedostossa app.component.ts käyttämällä import * as Tether from 'tether'.

Kun yritän alustaa Tetherin komennolla new Tether({ ... }), konsoliin tulee seuraava virheilmoitus:

POIKKEUS: WEBPACK_IMPORTED_MODULE_4_tether ei ole konstruktori

Jos tulostan Tether-muuttujan käyttämällä console.log(Tether), se antaa minulle sen, mikä vaikuttaa tyhjältä objektilta.

Voisitteko auttaa minua? En ole koskaan käyttänyt enkä TypeScriptiä enkä Webpackia ennen, joten pahoittelen, jos jätän jotain ilmiselvää huomaamatta.

Vastaus #1

Jos käytät bootstrap4:ää, tether.js on jo riippuvuus. Tämä saattaa toimia

Angular-clin käyttö

Asenna ensin Bootstrap npm:stä:

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.

Webpackille

Jos käytät webpackia:

Määritä bootstrap-loader ohjeiden mukaisesti;

Asenna tether.js npm:n kautta;

Lisää tether.js webpackin ProvidePlugin-laajennukseen:

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

Bootstrap 4 ei enää käytä tunnistetta window.tether

Note that using Bootstrap 4.0.0-alpha.6,

Bootstrap ei enää tarkista "window.Tether", vaan globaalia muuttujaa "Tether", joten webpack-konfiguraatiosta tulee

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

Vastaus #2

Koska käytät Angular-cli:tä, sinun täytyy lisätä se angular-cli.json-tiedostoosi

Sisällytä se tiedostoosi (angular-cli.json) scripts-taulukon alle:

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

Lisää CSS tyyleihin.

Toivottavasti tämä onnistuu.