2016-11-29 1 views
0

Die Winkel cli Dokumentation heißt es:Angular Cli Fügen Sie externe Skripte wie auf Fenster

Einige Javascript-Bibliotheken auf den globalen Bereich hinzugefügt werden müssen, und geladen, als ob sie in einem Script-Tag waren. Wir können dies unter Verwendung der apps [0] .scripts und apps [0] .styles-Eigenschaften von angular-cli.json tun.

Aber ich habe versucht, einen dritten Partei-Skript enthält, die eine variable Tour zum Fenster hinzufügen sollen:

"scripts": [ 
    // jQuery, bootstrap, etc... 
    "../node_modules/bootstrap-tour/build/js/bootstrap-tour.min.js" 

Wenn Tour aus dem Fenster zugreifen, bekomme ich, dass Tourundefined ist.

Wenn ich genau das gleiche Skript mit einem Skript-Tag einschließen, ist Tour auf dem Fenster in Ordnung. Ich interessiere mich nicht für Typings in diesem Fall (es gibt keine für diese Bibliothek). Vermisse ich einen Schritt?

Die Problemumgehung, die ich verwende, ist, die statischen JS-Dateien in den Ordner Assets zu setzen - das Problem dort ist, muss ich alle ihre Abhängigkeiten in den Ordner Assets auch, aber ich möchte sie gebündelt, wenn möglich.

Bearbeiten: Die Art und Weise, wie ich auf die Tour zugreife, erfolgt über die Entwicklerkonsole - sie sollte auf dem Fenster erscheinen (und wenn sie statisch enthalten ist). In TypeScript verwende ich declare const Tour, das funktioniert, wenn es auch statisch enthalten ist.

+0

Bitte Code hinzufügen, wie Sie auf die 'Tour'-Variable zugreifen und wo der Fehler auftritt. –

+0

@AlexanderCiesielski Access Tour von der Entwicklerkonsole, wie es auf dem Fenster sein sollte. Wenn es in Typoskript ist, würde ich eine "erklären Const Tour" machen. –

Antwort

0

Ich löste dieses Problem durch Aufruf von require in index.ts für die Dateien, die ich brauchte, nachdem sie in angular-cli.json aufgenommen wurden.

angular-cli.json:

"scripts": [ 
    ... 
    "../node_modules/moment/moment.js", 
    "../node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js" 
    ] 

index.ts:

declare const require; 
require('moment/moment.js'); 
require('eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js'); 
export * from './environment'; 
export * from './app.component'; 
export * from './app.module'; 

Wenn jemand eine angemessenere Weise weiß, lassen Sie es mich wissen!

Verwandte Themen