web-dev-qa-db-fra.com

Utiliser une bibliothèque javaScript externe dans l'application angular 4

J'ai une application angulaire 4 et un composant javascript que j'ai créé dans un fichier javascript: timeline.js. Le composant javascript fonctionne bien mais je souhaite l’utiliser avec Angular 4. Je mets donc mon fichier js dans le dossier assets/js/timeline.js.

Dans le fichier index.html, j'appelle mon fichier js avec <script src="assets/js/timeline.js"></script> et dans app.component.ts, j'ai:

var timeline = new Timeline("timelineVisualization")

Ainsi, normalement, la timeline est créée dans le div qui a id="timelineVisualization".

Mais cela ne fonctionne pas et j'ai une erreur sur le new Timeline: Impossible de trouver le nom Timeline.

Alors, savez-vous comment je peux faire pour appeler le constructeur Timeline à partir de timeline.js?

javascriptangular
13
Adrien

il faut simplement faire 

 import * as Timeline from '../assets/js/timeline.js';

Vous pouvez également faire (en haut de votre fichier):

declare var Timeline: any;

Vérifiez également ci-dessous pour les bonnes pratiques.

28
Deblaton Jean-Philippe

Dans le prolongement de la réponse above de @Deblaton Jean-Philippe et comme bonne pratique générale, il serait peut-être préférable d’inclure vos fichiers js ou d’autres fichiers CSS dans la construction plutôt que de les mettre dans votre index.html. 

Si vous utilisez un bundle, utilisez quelque chose comme ceci. 

  "styles": [
    "styles.scss",
    //Other style files
  ],
  "scripts": [
    "../node_modules/jsplugin/dist/js/plugin.js",
    //Other script files
  ],
14
Srikkant Srinivasan

Essaye ça:

declare const Timeline;
0
Faly

Vous pouvez essayer de trouver vos définitions de type à partir de:

Page Github définitivement typée

Si vous ne pouvez pas trouver votre bibliothèque, vous pouvez écrire vous-même vos interfaces (et essayer de la récupérer sur la page github pour les autres développeurs) et cette interface agira comme un fichier .ts.

Voici un début 

declare global {
    interface Window { 
        Timeline: any
    }
}
0
Volkan Seçkin Akbayır