webentwicklung-frage-antwort-db.com.de

Verwenden Sie eine externe JavaScript-Bibliothek in der Anwendung "angle 4"

Ich habe eine eckige 4-Anwendung und eine Javascript-Komponente, die ich in einer Javascript-Datei erstellt habe: timeline.js. Die Javascript-Komponente funktioniert gut, aber ich möchte sie mit eckig 4 ​​verwenden. Also lege ich meine js-Datei in den Ordner assets/js/timeline.js.

In der Datei index.html rufe ich meine js-Datei mit <script src="assets/js/timeline.js"></script> auf und in app.component.ts habe ich:

var timeline = new Timeline("timelineVisualization")

Normalerweise wird die Zeitleiste im div erstellt, das id="timelineVisualization" hat.

Aber es funktioniert nicht und ich habe einen Fehler im new Timeline: Name Timeline kann nicht gefunden werden.

Wissen Sie, wie ich den Timeline-Konstruktor von timeline.js aufrufen kann?

13
Adrien

sie müssen es einfach tun 

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

Sie können auch (oben in Ihrer Datei) Folgendes tun:

declare var Timeline: any;

Überprüfen Sie auch unter auf bewährte Verfahren.

Um nur die oben Antwort von @Deblaton Jean-Philippe zu erweitern, ist es als allgemeine Praxis empfehlenswert, Ihre Js- oder andere CSS-Dateien als Teil des Builds zu verwenden, anstatt sie in Ihre index.html zu setzen. 

Wenn Sie einen Bundler verwenden, verwenden Sie so etwas. 

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

Weiter oben etwas mehr

wir können die Bibliothek auf andere Weise zum Projekt hinzufügen

  1. Hinzufügen in HTML

    <html lang="en">
     <script src="https://nexplayer.nexplayersdk.com/latest/nexplayer.js"> 
     </script>
     <head>
     </head>
     <body>
       <app-root></app-root>
     </body>
    </html>
    
  2. Hinzufügen in angle.json oder .angular-cli.json

    "scripts": [
        "../node_modules/jsplugin/dist/js/plugin.js",
         //Other script files
     ],
    
  3. komponente hinzufügen

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

das zweite ist, den Namen der Bibliothek zu deklarieren

  1. fügen Sie die Komponente hinzu

     import { OnInit } from '@angular/core';
     declare var library: any;
    
  2. in der Typdefinition (* .d.ts) .Erstellen Sie, wenn die Datei src/typings.d.ts nicht vorhanden ist, andernfalls öffnen Sie sie und fügen Sie ihr Paket hinzu

    declare module 'your-library'
    
2
Paul Cheriyan

Versuche dies:

declare const Timeline; 
0
Faly

Sie können versuchen, Ihre Typdefinitionen zu finden:

Definitiv getippte Github-Seite

Wenn Sie Ihre Bibliothek nicht finden, können Sie Ihre Schnittstellen selbst schreiben (und versuchen, sie für andere Entwickler auf die Github-Seite zu ziehen). Diese Schnittstelle verhält sich wie eine .ts-Datei.

Hier ist ein Anfang 

declare global {
    interface Window { 
        Timeline: any
    }
}