2016-02-25 6 views
21

Alle Anleitungen schlägt vor, npm zu installieren, aber ich suche nach einem Weg ohne es.Entwicklung auf Angular2 mit TS aber ohne NPM

There are Angular2 files available, aber keine von ihnen sind TypeScript-Code.

Was muss ich tun? Benötige ich Angular2.ts oder spezifische Angular2-xx.js und .d.ts Dateien?

UPDATE: Ich habe über NPM heruntergeladen und den vollständigen Quellbaum bekommen, in dem es schwierig ist, bestimmte Dinge zu finden. Die Suche nach .d.ts für Angular2 ergab keine Ergebnisse. Eine Menge von .ts und .d.ts Dateien sind in der großen Sammlung von Code.

Antwort

11

In der Tat sind diese Dateien eine gebündelte Version von Angular2 und seine Abhängigkeiten. Sie können in einer mit TypeScript geschriebenen Anwendung verwendet werden. In der Tat kann TypeScript nicht direkt in Browsern verwendet werden. Sie müssen sie vorverarbeiten, um sie mit dem TypeScript-Compiler in ES-Code zu kompilieren, oder sie im Browser direkt mit der TypeScript-Bibliothek übertragen.

Dies kann in SystemJS direkt über das Konfigurationsattribut transpiler konfiguriert werden (siehe unten).

Zuerst einfach diese Dateien in HTML-Datei hinzufügen:

<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> 

Wenn Sie eine Anwendung ohne NPM implementieren möchten, können Sie Ihre Typoskript Dateien innerhalb der Weg des browser.It transpile können wir tun, wenn plunkr verwenden. Dafür benötigen Sie SystemJS zu konfigurieren, wie unten beschrieben:

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

Seien Sie vorsichtig Ihre Typoskript Dateien unter einem app Ordner

Hier ist eine einfache (und vollständige) plunkr beschreibt, wie das tun, um zu definieren: https://plnkr.co/edit/vYQPePG4KDoktPoGaxYu?p=info.

Sie können den entsprechenden Code herunterladen und den Code lokal mit einem statischen HTTP-Server wie http-server verwenden, ohne NPM zu verwenden. Dies könnte ein guter Ausgangspunkt für Ihren Anwendungsfall sein ...

bearbeiten

Wenn Ihre Typoskript Dateien von VS kompiliert werden, müssen Sie die SystemJS Konfiguration anzupassen, wie unten beschrieben:

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

Auf diese Weise lädt SystemJS Ihre JS-Dateien beim Import. Zum Beispiel: System.import('app/boot') wird die app/boot.js und nicht die TypeScript eine verwenden

+1

Ich benutze VS, es konvertiert .ts in .js automatisch. –

+0

Großartig! Nehmen wir also die JS-Datei für Angular2 und ihre Abhängigkeiten von code.angularjs.org und konfigurieren Sie SystemJS, um Ihre kompilierten JS-Dateien zu verwenden, und es sollte funktionieren ;-) –

+1

Aber dies wird In-Browser-Kompilierung führen, bin ich richtig? –

Verwandte Themen