Utilisation externe de la bibliothèque javaScript dans angulaire 4 application

J'ai angulaire 4 application et j'ai un composant javascript que j'ai créé dans un fichier javascript : timeline.js. Le composant javascript fonctionne bien, mais je veux l'utiliser avec angulaire 4. Alors, j'ai mis 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")

Donc, normalement, le scénario est créé dans le div qui a id="timelineVisualization".

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

Donc, savez-vous comment je peux faire pour appeler la Timeline constructeur de timeline.js ?

OriginalL'auteur Adrien | 2017-07-06

angular javascript

27

il vous suffit de faire
```
 import * as Timeline from '../assets/js/timeline.js';
```
Vous pouvez aussi le faire (en haut de votre fichier) :
```
declare var Timeline: any;
```
Vérifier également ci-dessous de bonnes pratiques.

Ok merci, cela fonctionne avec le declare var Timeline: any;
Si j'utilise votre méthode suggérée, dois-je encore besoin d'inclure le chemin d'accès à la bibliothèque, dans la section "scripts" de la .fichier json comme suggéré dans la réponse par @Srikkant Srinivasan?
Oui, vous avez besoin d'un moyen de télécharger ce script à partir de votre application. La mauvaise solution serait de le mettre dans votre index.html la bonne solution serait de le mettre dans votre colis.json

OriginalL'auteur
14

Juste s'étendant sur la ci-dessus réponse par @Deblaton, Jean-Philippe et comme une bonne pratique, il pourrait être préférable d'inclure votre js ou d'autres fichiers css dans le cadre de la construction au lieu de les mettre dans votre index.html.

Si vous utilisez un système de regroupement, utiliser quelque chose comme cela.
```
  "styles": [
    "styles.scss",
    //Other style files
  ],
  "scripts": [
    "../node_modules/jsplugin/dist/js/plugin.js",
    //Other script files
  ],
```
OriginalL'auteur
0

Essayez ceci:
```
declare const Timeline; 
```
OriginalL'auteur
0

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

Franchement Tapé La Page Github

Si vous ne trouvez pas votre bibliothèque, vous pouvez écrire vos interfaces vous-même (et à essayer de tirer la demande à la page github pour les autres développeurs) et cette interface va agir comme un .ts fichier.

Ici est un début
```
declare global {
    interface Window { 
        Timeline: any
    }
}
```
OriginalL'auteur
-1

S'étendant au-dessus ansewer peu plus

nous pouvons ajouter la bibliothèque pour le projet de manière différente
1. L'ajout dans le code HTML
```
<html lang="en">
 <script src="https://nexplayer.nexplayersdk.com/latest/nexplayer.js"> 
 </script>
 <head>
 </head>
 <body>
   <app-root></app-root>
 </body>
</html>
```
2. Ajoutant angulaire.json ou .angulaire de la cli.json
```
"scripts": [
    "../node_modules/jsplugin/dist/js/plugin.js",
     //Other script files
 ],
```
3. l'ajout d'un composant
```
import * as Timeline from '../assets/js/timeline.js';
```
la deuxième chose est de déclarer le nom de la bibliothèque
1. ajouter dans le composant
```
 import { OnInit } from '@angular/core';
 declare var library: any;
```
2. dans la définition de type (*.d.ts).Créer si la src/typings.d.ts n'existe pas, sinon, l'ouvrir, et d'ajouter votre paquet à
```
declare module 'your-library'
```
ce que u veux dire par le contrôleur ?
Désolé @Mohamed . Je voulais composant

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.