web-dev-qa-db-fra.com

Angular2: importer un fichier js externe dans un composant

Je vais importer ce fichier d3gauge.js dans un de mes fichiers angular2, fichier memmon.component.ts. 

import '../../../../js/d3gauge.js';
export class MemMonComponent {
    createMemGauge() {
        new drawGauge(this.opt);  //drawGauge() is a function inside d3gauge.js
    }
}

et dans le fichier de modèle correspondant, ajoutez 

<script src="../../../../js/d3gauge.js"></script>

Mais cela ne fonctionne pas, drawGaugen'est pas trouvé. 

Alors, 

  1. quelles sont les étapes correctes pour importer un fichier JS externe dans angular2? 
  2. depuis que j'utilise webpack, est-il possible de le faire dans webpack? Je me réfère à cette question , la solution webpack ne fonctionne pas pour moi car .ensure ne peut pas être résolue.
javascriptangularwebpack
48
Bing Lu

Idéalement, vous devez disposer d'un fichier .d.ts pour que les saisies permettent à Linting de fonctionner.

Mais il semble que d3gauge n'en ait pas, vous pouvez demander aux développeurs de fournir et espérer qu'ils écouteront.

Vous pouvez également résoudre ce problème spécifique en procédant de la sorte.

declare var drawGauge: any;

import '../../../../js/d3gauge.js';
export class MemMonComponent {
    createMemGauge() {
        new drawGauge(this.opt);  //drawGauge() is a function inside d3gauge.js
    }
}

Si vous l'utilisez dans plusieurs fichiers, vous pouvez créer un fichier d3gauage.d.ts avec le contenu ci-dessous.

declare var drawGauge: any;

et le référencer dans votre fichier boot.ts (bootstrap) en haut, comme ceci

///<reference path="../path/to/d3gauage.d.ts"/>
59
Ankit Singh

Après avoir perdu beaucoup de temps à trouver sa solution, j'en ai trouvé un . Pour votre commodité, j'ai utilisé le code complet avec lequel vous pouvez remplacer l'intégralité de votre fichier.

C'est une réponse générale. Supposons que vous souhaitiez importer un fichier nommé testjs.js dans votre composant angulaire 2 . Créez testjs.js dans votre dossier d’actifs:

assets> testjs.js 

function test(){
    alert('TestingFunction')
}

inclure testjs.js dans votre index.html

index.html 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Project1</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <script src="./assets/testjs.js"></script>

</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

Dans votre app.component.ts ou dans tout fichier de composant.ts où vous voulez appeler ceci, déclarez une variable et appelez la fonction comme ci-dessous:

app.component.ts 

import { Component } from '@angular/core';

declare var test: any;


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app works!';


  f(){
    new test();
  }
}

Enfin dans votre app.component.html testez la fonction

app.component.html 

<h1>
  <button (click)='f()'>Test</button>
</h1>
35
Muhammad Rehan Qadri

Au lieu d'inclure votre extension de fichier js dans index.html, vous pouvez l'inclure dans le fichier .angular-cli-json.

Ce sont les étapes que j'ai suivies pour que cela fonctionne.

  1. Commencez par inclure votre fichier js externe dans assets/js
  2. Dans .angular-cli.json - ajoutez le chemin du fichier sous scripts: [../app/assets/js/test.js]
  3. Dans le composant où vous souhaitez utiliser les fonctions du fichier js.

Déclarez en haut où vous souhaitez importer les fichiers en tant que

Declare const Test:any;

Après cela, vous pouvez accéder à ses fonctions comme par exemple Test.add()

7
Sitaram

L’approche suivante a fonctionné dans Angular 5 CLI.

Par souci de simplicité, j’ai utilisé une démo similaire à d3gauge.js créée et fournie par oliverbinns - que vous pouvez facilement trouver sur Github.

Alors tout d'abord, j'ai simplement créé un nouveau dossier nommé externalJS au même niveau que le dossier assets. J'ai ensuite copié les 2 fichiers .js suivants.

  • d3.v3.min.js
  • d3gauge.js

Je me suis ensuite assuré de déclarer les deux directives liées dans main index.html

<script src="./externalJS/d3.v3.min.js"></script>
<script src="./externalJS/d3gauge.js"></script>

J'ai ensuite ajouté un code similaire Dans un composant gauge.component.ts comme suit:

import { Component, OnInit } from '@angular/core';

declare var d3gauge:any; <----- !
declare var drawGauge: any; <-----!

@Component({
  selector: 'app-gauge',
  templateUrl: './gauge.component.html'
})

export class GaugeComponent implements OnInit {
   constructor() { }

   ngOnInit() {
      this.createD3Gauge();
   }

   createD3Gauge() { 
      let gauges = []
      document.addEventListener("DOMContentLoaded", function (event) {      
      let opt = {
         gaugeRadius: 160,
         minVal: 0,
         maxVal: 100,
         needleVal: Math.round(30),
         tickSpaceMinVal: 1,
         tickSpaceMajVal: 10,
         divID: "gaugeBox",
         gaugeUnits: "%"
    } 

    gauges[0] = new drawGauge(opt);
    });
 }

}

et enfin, j'ai simplement ajouté un div dans gauge.component.html 

<div id="gaugeBox"></div>

et voilà ! :)

 enter image description here

3
PeteZaria

Vous pouvez aussi essayer ceci:

import * as drawGauge from '../../../../js/d3gauge.js';

et juste new drawGauge(this.opt); dans votre code-ts. Cette solution fonctionne en projet avec angular-cli intégré dans laravel sur lequel je travaille actuellement. Dans mon cas, j'essaie d'importer la bibliothèque poliglot (btw: très bon pour les traductions) à partir de node_modules:

import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
...
export class Lang 
{
    constructor() {

        this.polyglot = new Polyglot({ locale: 'en' });
        ...
    }
    ...
}

Cette solution est bonne car j n’ai pas besoin de copier les fichiers de node_modules :).

METTRE À JOUR

Vous pouvez aussi regarder sur cette LISTE de manières d’inclure des bibliothèques dans angular.

1
Kamil Kiełczewski

Voici un moyen simple je l'ai fait dans mon projet.

disons que vous devez utiliser clipboard.min.js Et pour l'exemple, disons qu'à l'intérieur de clipboard.min.js, il existe une fonction appelée test2().

pour utiliser la fonction test2 () il vous faut:

  1. faites référence au fichier .js dans votre fichier index.html.
  2. importer clipboard.min.js dans votre composant.
  3. déclarer une variable qui vous utilisera pour appeler la fonction.

voici seulement les parties pertinentes de mon projet (voir les commentaires):

index.html: 

<!DOCTYPE html>
<html>
<head>
    <title>Angular QuickStart</title>
    <base href="/src/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="/node_modules/core-js/client/shim.min.js"></script>


    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
        System.import('main.js').catch(function (err) { console.error(err); });
    </script>

    <!-- ************ HERE IS THE REFERENCE TO clipboard.min.js -->
    <script src="app/txtzone/clipboard.min.js"></script>
</head>

<body>
    <my-app>Loading AppComponent content here ...</my-app>
</body>
</html>

app.component.ts: 

import '../txtzone/clipboard.min.js';
declare var test2: any; // variable as the name of the function inside clipboard.min.js

@Component({
    selector: 'txt-zone',
    templateUrl: 'app/txtzone/Txtzone.component.html',
    styleUrls: ['app/txtzone/TxtZone.css'],
})



export class TxtZoneComponent implements AfterViewInit {

    // call test2
    callTest2()
    {   
        new test2(); // the javascript function will execute
    }

}
0
jonathana

1) Insérez d’abord le chemin du fichier JS dans un fichier index.html file: 

<script src="assets/video.js" type="text/javascript"></script>

2) Importez le fichier JS et déclarez la variable dans composant.ts :

  • import './../../../assets/video.js';

  • declare var RunPlayer : any; 

    NOTE: Le nom de la variable doit être identique au nom d'une fonction dans le fichier js

3) Appelez la méthode js dans le composant 

ngAfterViewInit(){

    setTimeout(() => {
        new RunPlayer();
    });

}
0
Sukhdevsinh Jadeja