Wie setzen Sie Angular-Apps ein?

Sind Sie eigentlich hier berühren sich zwei Fragen in einer. Erste ist, wie das hosten Ihrer Anwendung. Und wie @toskv erwähnt, es ist wirklich zu breit zu beantwortende Frage und hängt von vielen verschiedenen Dingen. Zweite ist genauer - wie bereiten Sie das deployment-version der Anwendung. Sie haben mehrere Möglichkeiten hier:

1. Bereitstellen, wie es ist. Nur, dass - keine Verkleinerung, Verkettung, die name manglings etc. Transpile alle Ihre ts-Projekt, kopieren Sie die js/css - /... - Quellen + die Abhängigkeiten zu den hosting-server, und Sie sind gut zu gehen.
2. Bereitstellen mit speziellen Paket-tools. Wie webpack oder systemjs builder. Sie kommen mit allen Möglichkeiten, die fehlt in #1. Sie können packen Sie alle Ihre app-code in nur ein paar js - /css - /... - Dateien, die Sie verweisen, in den html-Code. Systemjs buider erlaubt Ihnen sogar, um loszuwerden, müssen systemjs als Teil Ihrer Bereitstellung-Paket.

Ja, werden Sie wahrscheinlich benötigen, um die Bereitstellung systemjs und eine Reihe von anderen externen Bibliotheken als Teil des Pakets. Und ja, Sie werden in der Lage sein, zu bündeln und Sie in nur ein paar js-Dateien verweisen Sie aus der html-Seite. Sie haben keinen Bezug alle Ihre kompiliert js-Dateien von der Seite, obwohl - systemjs als Modul loader wird sich darum kümmern.

Ich weiß, es klingt matschig - um Ihnen helfen, sich mit der #2 hier sind zwei wirklich gute Beispiel-Anwendungen:

SystemJS-generator: angular2 Samen

WebPack: angular2 webpack starter

Aussehen, wie Sie es tun - und ich hoffe, dies wird Ihnen helfen, Ihren Weg zu finden, die Bündelung apps, die Sie stellen.

InformationsquelleAutor der Antwort Amid

Mit den Eckigen CLI-es ist einfach. Ein Beispiel für Heroku:

1. Erstellen einer Heroku-account und installieren Sie die CLI

2. Bewegen Sie den angular-cli dep auf die dependencies im package.json (so, dass es installiert wird, wenn Sie drücken Sie auf Heroku.

3. Hinzufügen postinstall Skript, das ausgeführt wird ng build wenn der code gedrängt auf Heroku. Auch fügen Sie einen start-Befehl für einen Node-server, der erzeugt wird in dem folgenden Schritt Fort. Dadurch werden die statischen Dateien für die app auf eine dist Verzeichnis auf dem server, und starten Sie die app anschließend.

"scripts": {
  //...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

1. Erstellen Sie einen Express-server zu dienen, die app.

//server.js
const express = require('express');
const app = express();
//Run the app by serving the static files
//in the dist directory
app.use(express.static(__dirname + '/dist'));
//Start the app by listening on the default
//Heroku port
app.listen(process.env.PORT || 8080);

1. Erstellen Sie eine remote Heroku und push-to-depoy die app.

heroku create
git add .
git commit -m "first deploy"
git push heroku master

Hier ist eine schnelle writeup ich habe, dass hat weitere Einzelheiten, einschließlich der Frage, wie force-Anfragen an HTTPS verwenden und zu behandeln, wie PathLocationStrategy 🙂

InformationsquelleAutor der Antwort cienki

Um die Bereitstellung Ihrer Angular2 app zu einem Produktions-server, in Erster Linie, sicherzustellen, dass Ihre app wird lokal auf Ihrem Rechner.

Angular2 app kann auch eingesetzt werden als Knoten app.

So erstellen Sie einen Knoten entry-point-Datei server.js/app.js (mein Beispiel verwendet express)

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    //if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    //if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

Hinzufügen express als Abhängigkeit in deinem Paket.json-Datei.

Dann installieren Sie es auf Ihrer bevorzugten Umgebung.

Ich haben zusammen einen kleinen blog für die Bereitstellung auf IIS. Folgen Sie link

InformationsquelleAutor der Antwort Oduwole Oluwasegun

Zum Bereitstellen Ihrer Anwendung in IIS befolgen Sie die unten aufgeführten Schritte.

Schritt 1: Erstellen Sie Ihre Winkel-Anwendung mit dem Befehl ng build --prod

Schritt 2: Nach dem build alle Dateien gespeichert sind, im dist-Ordner der Anwendung Weg.

Schritt 3: Erstellen Sie einen Ordner in C:\inetpub\wwwroot mit Namen QRCode.

Schritt 4: Kopieren Sie den Inhalt des dist Ordner zu C:\inetpub\wwwroot\QRCode Ordner.

Schritt 5: Öffnen Sie den IIS-Manager mithilfe des Befehls " (Fenster + R) und geben inetmgr klicken Sie auf OK.

Schritt 6: Rechte Maustaste auf Default Web Site und klicken Sie auf Anwendung Hinzufügen.

Schritt 7: Eingabe der Alias-Namen 'QRCode' und legen Sie den physischen Pfad zu C:\inetpub\wwwroot\QRCode.

Schritt 8: Öffnen Sie index.html - Datei und suchen Sie die Zeile href="\" und entfernen '\'.

Schritt 9: Nun durchsuchen-Anwendung in jedem browser.

Außerdem können Sie das video zum besseren Verständnis.

Video-url: https://youtu.be/F8EI-8XUNZc

InformationsquelleAutor der Antwort Avadhesh Maurya

Mit Winkel-CLIkönnen Sie folgenden Befehl verwenden:

ng build --prod

Erzeugt es einen dist Ordner mit allem was Sie brauchen, um die Anwendung bereitstellen.

Wenn du keine Praxis mit web-Servern, empfehle ich Ihnen,Winkel-Cloud. Sie müssen nur komprimieren den dist-Ordner als zip-Datei und laden Sie Sie in die Plattform.

InformationsquelleAutor der Antwort Bruno Oliveira

Ich mit für immer:

1. Bauen Sie Ihre Winkel-Anwendung mit Winkel-cli zu dist Ordner ng build --prod --output-path ./dist

2. Erstellen server.js - Datei in Ihrem Winkel Anwendung Pfad:

   const express = require('express');
   const path = require('path');
   
   const app = express();
   
   app.use(express.static(__dirname + '/dist'));
   
   app.get('/*', function(req,res) {
       res.sendFile(path.join(__dirname + '/dist/index.html'));
   });
   app.listen(80);

3. Starten immer forever start server.js

Das ist alles! Ihre Anwendung sollte ausgeführt werden!

InformationsquelleAutor der Antwort Yakir Tsuberi

Für eine schnelle und günstige Möglichkeit zum hosten eines Winkel-app, ich habe mit dem Firbase hosting. Es ist kostenlos auf der ersten Ebene, und eine sehr einfache Bereitstellung neuer Versionen mit dem FB-CLI. Dieser Artikel hier beschreibt die erforderlichen Schritte zum bereitstellen Ihrer Produktion eckig 2-app auf FB: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

Kurz gesagt, Sie führen ng build --prod schafft ein dist-Ordner im Paket-und das ist der Ordner, wird bereitgestellt, um FB-Hosting.

InformationsquelleAutor der Antwort npesa92

Ich würde sagen, eine Menge von Menschen, die mit Web-Erfahrung vor eckig, werden verwendet, um die Bereitstellung Ihrer web-Artefakten im inneren eines Krieges (z.B. jquery und html innerhalb einer Java/Spring-Projekt). Ich endete damit, diesen zu umgehen, CORS-Problem, nach dem Versuch, um meine Winkel-und REST-Projekten zu trennen.

Meine Lösung ist, verschieben Sie alle eckig (4) Inhalt, erzeugt mit CLI, von my-app MyJavaApplication/Winkel. Dann habe ich das ausgearbeitete mein Maven-build zu verwenden maven-resources-plugin zum verschieben der Inhalte von /eckig/dist, um die Ursache meiner Verteilung (d.h. $ - Projekt.bauen.directory}/MyJavaApplication). Winkel-Belastungen-Ressourcen von der Wurzel des Krieges standardmäßig.

Als ich begann, hinzufügen von routing auf meiner Winkel-Projekt, habe ich weiter modifiziert maven-build zu kopieren index.html aus /dist, um WEB-INF/app. Und, fügte ein Java-controller leitet alle server-Seite-rest-calls auf den index.

InformationsquelleAutor der Antwort Wallace Howery

Folgen Sie einfach dem unten stehenden link,

Ändern Sie Ihre Index.html Seite-Skript-Datei-Pfade
Ändern Sie Ihre component.html Pfad incase Ihr immer Fehler konnte nicht finden, den Ort

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev bereitstellen

InformationsquelleAutor der Antwort Muhamed Shafeeq