typescript - Utilisation de tether avec webpack (Angular CLI)

Je développe un projet en utilisant Angular CLI. J'ai donc installé Tether en utilisant npm install tether --save, et j'ai importé la dépendance dans app.component.ts en utilisant import * as Tether from 'tether'.

Lorsque j'essaie d'initialiser Tether avec new Tether({ ... }), il affiche l'erreur suivante dans la console :

EXCEPTION : WEBPACK_IMPORTED_MODULE_4_tether n'est pas un constructeur

Si j'imprime la variable Tether en utilisant console.log(Tether), cela me donne ce qui semble être un objet vide.

Pourriez-vous m'aider ? Je n'ai jamais utilisé ni TypeScript ni Webpack auparavant, alors je suis désolé si je rate quelque chose d'évident ici.

Réponse #1

Si vous utilisez Bootstrap 4, alors tether.js est déjà une dépendance. Cela pourrait fonctionner

Utilisation d'Angular-cli

Tout d'abord, installez Bootstrap depuis npm :

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.

Pour Webpack

Si vous utilisez webpack :

Configure le chargeur bootstrap comme décrit dans la documentation ;

Installez tether.js via npm ;

Ajoutez tether.js au plugin ProvidePlugin de webpack :

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

Bootstrap 4 n'utilise plus la balise window.tether

Note that using Bootstrap 4.0.0-alpha.6,

Bootstrap ne vérifie plus "window.Tether" mais la variable globale "Tether", donc la configuration webpack devient

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

Réponse #2

Puisque vous utilisez Angular-cli, vous devrez ajouter cela à votre angular-cli.json

Dans votre fichier (angular-cli.json), incluez-le sous le tableau des scripts :

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

Inclure le CSS dans les styles.

J'espère que ça va marcher.