Uploading notwendigen Abhängigkeiten für Angular2 App in einen Web-Host

Question

Ich bin neu in Angular2 und haben ein wenig Verwirrung mit der node.js und der eckigen2 Rahmenfunktion und Beziehung.

Ich kann meine App mit dem Lite-Server auf localhost ausführen, aber mein Problem ist das Hochladen der App zum Hosting-Service. Es gibt keine Tutorials oder Anleitungen, was zu tun ist, wenn die App fertig ist, also habe ich versucht, ein Paket mit Webpack zu erstellen, aber ich bin nicht erfolgreich. Ich weiß, es ist eine schlechte Übung, alle node_modules von npm installiert hochladen, aber bin ich richtig, wenn Sie versuchen, solche Bündel zu machen?

Eine weitere Klarstellung wäre, wenn mein app meine app nur durch das Hochladen läuft die html, css und js Dateien (die in den node_modules einschließlich)? oder muss ich einen Host konfigurieren, der Node.js ermöglicht, meine Anwendung auszuführen?

Answer 1

In Angular2, wenn Sie Typoskript verwenden, müssen Sie die Webapp übertragen, diese transpile legte die Dateien in/Dist-Ordner. Wenn Sie ES6 verwenden, verwenden Sie die App im Stammordner von Ihnen entwickeln.

ich öffne die "index.html" in ihrem browser von dir/dist ordner, die app in angular2 funktioniert.

Im index.html Sie haben diesen Code

System.import('system-config.js').then(function() { 
    System.import('main'); 
}).catch(console.error.bind(console)); 

In Ihrem main.js des/dist Sie diesen Code

var _1 = require('./app/'); 

In diesem Ordner benötigen Sie diese (zB)

var ng_fire_component_1 = require('./ng-fire.component'); 

dies erfordert Aufruf an Ihre Hauptkomponente der Webbapp ... In dieser Logik läuft Ihre App nur mit Öffne die index.html, wenn ng-fire.component deine Root-Komponente ist.

---

In Knoten, den Sie benötigen lediglich einen Web-Server erstellen, diesen Webserver (wenn Gebrauch ausdrücken js) Sie rufen müssen die index.html

router.get('/', function(req, res){ 
    res.sendfile('yourAPPfolder/index.html'); 
}); 

und Ihre webApp seinen Lauf wieder, wenn Sie die öffnen www.yourweb.com/ oder localhost: yourPort/

Für die letzte Frage, wenn Sie den Server verwenden, haben Sie den Ordner/dist in diesem Ordner importieren Sie haben alle Dateien, die brauchen.

Ich empfehle den Winkel ci (https://cli.angular.io) für die Arbeit mit angular2 ... wenn Sie anderen Anbietern Datei oder Anbieter Ordner müssen Sie in der Datei Winkel-cli-build.js

beispielsweise hinzufügen:

/* global require, module */ 

var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); 

    module.exports = function(defaults) { 
     return new Angular2App(defaults, { 
     vendorNpmFiles: [ 
      'systemjs/dist/system-polyfills.js', 
      'systemjs/dist/system.src.js', 
      'zone.js/dist/*.js', 
      'es6-shim/es6-shim.js', 
      'reflect-metadata/*.js', 
      'rxjs/**/*.js', 
      '@angular/**/*.js' 
     ] 
     }); 
    };