2016-02-25 4 views
21

Tutte le guide suggeriscono di installare npm, ma sto cercando un modo senza di esso.Sviluppo su Angular2 con TS ma senza NPM

There are Angular2 files available, ma nessuno di questi è codice TypeScript.

Quindi cosa devo fare? Sono necessari Angular2.ts o specifici file Angular2-xx.js e .d.ts?

AGGIORNAMENTO: ho scaricato Angular2 tramite NPM e ottenuto l'albero di origine completo, in cui è difficile trovare elementi specifici. La ricerca di .d.ts per Angular2 non ha restituito risultati. Un sacco di file .ts e .d.ts sono nella vasta collezione di codice.

risposta

11

In realtà, questi file sono una versione in bundle di Angular2 e delle sue dipendenze. Possono essere utilizzati all'interno di un'applicazione scritta con TypeScript. Di fatto, TypeScript non può essere utilizzato immediatamente dai browser. È necessario pre-elaborarli per compilarli in codice ES con il compilatore TypeScript o per trasferirli nel browser direttamente con la libreria TypeScript.

Questo può essere configurato all'interno di SystemJS direttamente tramite l'attributo di configurazione transpiler (vedere di seguito).

Prima è sufficiente aggiungere i file nel file HTML:

<script src="https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js"></script> 
<script src="https://code.angularjs.org/tools/system.js"></script> 
<script src="https://code.angularjs.org/tools/typescript.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.2/Rx.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.2/angular2.dev.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.2/http.dev.js"></script> 

Se si desidera implementare un'applicazione senza NPM, è possibile transpile i file tipografico nel modo in cui il browser.It che facciamo quando si utilizza plunkr. Per questo è necessario configurare SystemJS come descritto di seguito:

<script> 
    System.config({ 
    transpiler: 'typescript', 
    typescriptOptions: { 
     emitDecoratorMetadata: true 
    }, 
    packages: { 
     'app': { 
     defaultExtension: 'ts' 
     } 
    } 
    }); 
    System.import('app/main') 
     .then(null, console.error.bind(console)); 
</script> 

stare attenti a definire i file dattiloscritto sotto un app cartella

Ecco un semplice (e completo) plunkr che descrive come fare: https://plnkr.co/edit/vYQPePG4KDoktPoGaxYu?p=info.

È possibile scaricare il codice corrispondente e utilizzare il relativo codice localmente con un server HTTP statico come http-server senza utilizzare NPM. Questo potrebbe essere un buon punto di partenza per il vostro caso d'uso ...

Modifica

Se i file dattiloscritto sono compilati da VS, è necessario adattare la configurazione SystemJS, come descritto di seguito:

<script> 
    System.config({ 
    packages: { 
     app: { 
     defaultExtension: 'js', 
     } 
    } 
    }); 
    System.import('app/boot') 
     .then(null, console.error.bind(console)); 
</script> 

In questo modo, SystemJS caricherà i file JS durante l'importazione. Ad esempio: System.import('app/boot') utilizzerà lo app/boot.js e non il TypeScript

+1

Uso VS, converte automaticamente .ts in .js. –

+0

Ottimo! Quindi includi il file JS per Angular2 e le sue dipendenze da code.angularjs.org e configura SystemJS per utilizzare i file JS compilati e dovrebbe funzionare ;-) –

+1

Ma questo causerà la compilazione nel browser, sono corretto? –

Problemi correlati