2017-03-24 1 views
0

Ich habe die heroes tutorial durchlaufen und meine eigene Angular2-Anwendung erstellt, indem ich einige der Komponenten geändert habe. Aber im Grunde ist es dasselbe wie das Helden-Tutorial.Bereitstellen von Helden-Anwendung von angular2

Alles hat wunderbar mit meiner IDE, npm usw. gearbeitet, und ich bin jetzt bereit, meine Anwendung in die Produktion zu bringen ... und bin völlig verloren.

In meiner Indexdatei sehe ich, dass es einige Verweise auf einige node_module Dateien gibt.

<script src="node_modules/core-js/client/shim.min.js"></script> 
<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 

Cool, da will ich nicht 30000 Dateien auf meinem Server-Dump, erstelle ich einen Ordner lib in meiner app, und kopieren Sie die erforderlichen Dateien dort, dann verlinke ich zu ihnen:

<script src="lib/shim.min.js"></script> 
<script src="lib/zone.js"></script> 
<script src="lib/system.src.js"></script> 

Ich stelle alles auf meinem App-Server im Internet bereit. Der nächste Fehler, den ich bekommen ist:

http://frontangle.com/angular2charts/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js fehlgeschlagen Ressource laden: der Server mit einem Status von 500

reagierte sieht

OK, wie ich mehr Dateien importieren muß, so dass ich vermute, dass Sie müssen Bits und Stücke aus den mehr als 30.000 node_module Dateien herauszupicken.

Wenn ich meine systemjs.config Datei aussehen dann sehe ich das:

// angular bundles 
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
    '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', 
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 

    // other libraries 
    'rxjs':      'npm:rxjs', 
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 
    'ng2-charts': 'node_modules/ng2-charts', 
    'angular2-color-picker': 'node_modules/angular2-color-picker' 

Bin ich recht in der Annahme, dass, anstatt über diese Dateien zu kopieren und dann für jede einzelne Winkel js-Datei eines HTML-Import tun das ist hier aufgeführt, ich könnte nur einige angular.min.js Datei referenzieren, die sich um alle eckigen Dateien kümmern würde, die hier aufgeführt sind?

Alle diese eckigen Dateien stammen von package.json und werden als Version 2.4.5 importiert. Also brauche ich etwas wie angular.2.4.5.min.js in meinem neuen lib-Verzeichnis, um all diese Dateien zu kapseln? Das ist alles was ich brauche, oder? Gibt es diese verteilbare Datei irgendwo in der Gesamtstruktur von Verzeichnissen, die npm in mein Projekt gezogen hat?

Als nächstes, rxjs. Nehme ich einfach die jxjs.min.js im Verzeichnis "Bundles"? Und kopieren Sie das in meinen Ordner lib?

HINWEIS: Ich möchte nicht Webpack oder CLI oder einige ausgefallene Build-Tools verwenden. Ich möchte nur wissen, wie ich meine einfache App funktioniere.

+0

Ehrlich gesagt, Sie sind besser dran mit Webpack. Sehen Sie sich die [Angular CLI] (https://angular.io/docs/ts/latest/cli-quickstart.html) an (die den Wechsel von SystemJS zu webpack vorgenommen hat). Schlagen Sie auch in [Angular docs on webpack] (https://angular.io/docs/ts/latest/guide/webpack.html) nach, wenn Sie lernen möchten, wie Sie sich selbst bündeln können, bevor Sie das cli-Tool verwenden –

Antwort

0

Verwenden Sie eckige CLI und und bauen Sie mit der --prod Flagge. Dies minimiert/uglify Ihre Dateien für das Hosting auf den Server.