Angular2 - Importazione di javascript di terze parti in SystemJS

Question

fileSaver non viene mappato per qualche motivo. angular2-jwt sta funzionando bene.

ho fatto npm install file-saver -save per ottenere il file-saver poi fatto riferimento come segue (ho un compito sorso per spostare il file js per librerie directory e vedo il file lì)

in index.htmlI hanno incluso lo script in src e system.config

<script src="libs/file-saver/FileSaver.js"></script> 

<!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
     packages: {   
      app: { 
      format: 'register', 
      defaultExtension: 'js' 
      } 
     } , 
     map: { 
      "angular2-jwt": "libs/angular2-jwt/angular2-jwt.js" 
      ,"fileSaver":"libs/file-saver/FileSaver.js" 
     } 
     }); 
     System.import('app/bootstrap') 
      .then(null, console.error.bind(console)); 
    </script> 

component.ts

qui non è trovare il FileSaver

import {SaveAs} from 'fileSaver';  

l'errore che ottengo è questo

error TS2307: Cannot find module 'fileSaver'. 

Qualche idea di cosa c'è che non va qui?

Answer 1

Nel mio caso ho fatto funzionare in questo modo:

package.json:

"dependencies": { 
    // ... all angular dependencies 
    "file-saver": "1.3.2" 
}, 

index.html:

<!-- all angular dependencies and other 3rd party --> 
<script src="node_modules/file-saver/FileSaver.js"></script> 

typings.json:

// other typings needed 
"filesaver": "github:DefinitelyTyped/DefinitelyTyped/FileSaver/FileSaver.d.ts#d21f1bd1fd079bbc18bc88ed71d2be7f5707e33a" 

utilizzo:

var blob = new Blob([this.response], {type: 'application/zip'}); 
saveAs(blob, 'project.zip'); 

È necessario eseguire un npm install prima di eseguirlo.

Ecco, spero che sia d'aiuto.

Questo non ti consente di import {SaveAs} from 'fileSaver'; né è il completamento del codice completo, ma almeno funziona

Answer 2

Un'altra opzione è il dato da JSMike qui: https://github.com/angular/angular-cli/issues/999

"Questa è davvero solo un errore dattiloscritto. Basta aggiungere quanto segue a src/typings.d.ts "

declare module 'filesaver' { 
    var saveAs: any; 
    export = saveAs; 
} 

"e usare"

import filesaver = require('filesaver'); 

filesaver.saveAs(blob, filename); 

Answer 3

Nel installato la biblioteca e le tipizzazioni (@types). Quindi,

import {saveAs} from 'file-saver'; 

lavorato. Inoltre, ho dovuto impostare il formato del modulo di file saver per CJs esplicitamente nella configurazione del sistema JS:

"packages":{ 
    "file-saver":{ 
      "main":"FileSaver.js", 
      "format": "cjs" 
    } 
} 

Per quanto ho capito SystemJS riconosceranno di file-saver come modulo di AMD per impostazione predefinita. Forse c'è qualcosa di sbagliato nella definizione del modulo AMD in file-saver, ma non ne ho una comprensione molto profonda. (Vedi anche https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js#L182)

Senza impostare il formato del modulo CJ, ho ottenuto "fileSaver.saveAs non è una funzione" in fase di esecuzione.