Javascript semplice come servizio Angular 2

Ho bisogno di aggiungere un file JavaScript di terze parti ospitato in un componente Angular 2. Questo file viene aggiornato each volta che viene apportta una modifica nei sisthemes proprietari associati di produttori di terze parti, quindi non posso semplicemente abbassare una copia, includerla localmente e importrla nel progetto.

In genere includere questo file in un livello superiore in un tag di script e quindi utilizzare semplicemente declare <windowvar>: any per accedere a esso. Tuttavia, in questo caso, poiché il componente sta cercando di caricare lo script, non posso dichiarare la variabile di window perché non esiste nell'object window al momento del caricamento del componente che genera un errore.

Posso caricare lo script aggiungendo manualmente un tag di script e che funziona, tuttavia ho bisogno dell'accesso alla variabile di window che crea per utilizzarla correttamente. E non posso usare semplicemente un intervallo per cercarlo perché il tipo di carattere genera una condizione che <windowvariable> does not exist on object window .

C'è qualche modo che posso 1) caricare il file JavaScript ospitato all'interno del componente e 2) get l'accesso alla variabile di window creata dal file JavaScript caricato?

    Aggiornamento 1: Basato sui commenti, la soluzione precedente non ti aiuterà.

    Puoi farlo usando OpaqueToken in Angular2

    1 . Creare un token utilizzato per trovare un'istanza come sotto in un file ts separato.

     import { OpaqueToken } from '@angular/core' export let name_of_The_Token = new OpaqueToken('name_Of_The_Window_Object'); 

    2. Nel tuo App.module , devi importre e dichiarare una variabile che è il nome dell'object di window che rende il Token come servizio angular2 in modo da poter utilizzare le properties; ei methods in quel file javascript nei tuoi componenti.

     import { name_of_The_Token } from '/* file_Path */'; declare let name_Of_The_Window_Object : any; //below your import statements 

    Fase 3: iniettatelo agli arrays provider del tuo module.

     { provide : name_of_The_Token , useValue : name_Of_The_Window_Object } 

    Guida per utilizzare questo token nei componenti

    1. Import il token come qualsiasi altro servizio e @Inject dal angular-core

        import { name_of_The_Token } from '/* file_Path */'; import { Inject } from '@angular/core'; 
    2. In constructor del componente

        constructor(@Inject( name_of_The_Token ) private _serviceObject : any ) 
    3. Qualsiasi where nel tuo componente è ansible utilizzare le variables ei methods del tuo file javascript come

        this._serviceObject.method1() this._serviceObject.variable1 ..... 

    Nota : Un inconveniente è che non si otterrà intellisense .

    Superamento: Se stai cercando intellisense, occorre avvolgere i methods e le variables all'interno di un'interface e utilizzarla nel tipo ** (invece di qualsiasi) ** del tuo token come

     export interface myCustom { method1(args): return_Type; method2(args): void; ..... } 

    LIVE DEMO di ToasterService

    In pratica, stai cercando di raccogliere una libreria di javascript "module globale" da un CDN. (Suppongo che il lib di terze parti non sia in CommonJS, AMD, UMD o in un altro module, dato che è accessibile tramite una sola variabile globale.)

    Quindi la prima domanda è where è il file corrispondente? D.ts? Esso contiene i nomi e le interfacce che informano Typescript della "forma" della libreria, così come la dichiarazione che la variabile globale esisterà. Se la tua terza parte non lo fornisce, dovrai scriverla da soli. Conterrà non solo la dichiarazione del var globale, come

    declare var theGlobalVarInQuestion: IInterfaceOfStuffInsideLibrary;

    ma anche la dichiarazione di tale interface, le sue properties; e le sue tipologie, fino in fondo. Come questo: https://github.com/catamphetamine/libphonenumber-js/blob/master/index.d.ts

    Puoi includere il file .d.ts in / node_modules / @ types / nameOfSaidLibrary ma dovresti controllarlo nel tuo repo di origine (con una ginnastica npm prune ansible) soprattutto perché una npm prune lo rimuoverà. Oppure, se lo metti altrove, modificare la properties; typeroots di typeroots per guardare in entrambi i luoghi in aggiunta alla sua solita / node_modules / @ tipi / cartella.

    Per essere chiari, il file .d.ts non (e non deve) effettivamente creare la variabile; solo afferma che sarà lì in modo che il compilatore Typescript non si lamenta. Sia che sia presente durante il runtime sia deciso però tu stai caricando il js.

    Se non lo si carica tramite il tag di script nell'indice.html, è ansible eseguire un'istruzione di import nel componente che consuma (data la giusta configuration di SystemJS o qualsiasi altra cosa si utilizza) oppure il componente che consuma in modo dinamico e aggiungere un nuovo tag di script all'indice.html. Basta assicurarsi che il caricatore del module non sta cercando di scaricare e immediatamente confonderlo con il resto della tua applicazione durante il tempo di costruzione. Sembra che tu desideri che il lib sia scaricato nuovamente each volta in fase di runtime.