Come si distribuiscono le app angolari?

Come si distribuiscono le app Angular quando raggiungono la fase di produzione?

Tutte le guide che ho visto finora (anche su angular.io ) contano su un server Lite per servire e browserSync per riflettere i cambiamenti - ma quando hai finito con lo sviluppo, come puoi pubblicare l'app?

Importare tutti i .jsfile compilati sulla index.htmlpagina o li minimizzo usando gulp? Funzioneranno? Ho bisogno di SystemJS nella versione di produzione?

In realtà sei qui a toccare due domande in una.

Il primo è Come ospitare la tua applicazione? .
E poiché @toskv ha menzionato la sua domanda davvero troppo ampia per rispondere e dipende da numerose cose diverse.

Il secondo è Come si prepara la versione di distribuzione dell'applicazione? .
Hai diverse opzioni qui:

1. Distribuire così com'è. Solo questo: nessuna minificazione, concatenazione, modifica del nome, ecc. Traspila tutto il tuo progetto ts copia tutte le tue sorgenti js / css / ... risultanti + dipendenze sul server di hosting e sei a posto.

2. Distribuisci utilizzando strumenti di raggruppamento speciali, come webpacko systemjsbuilder.
   Vengono con tutte le possibilità che mancano nel n. 1.
   Puoi comprimere tutto il codice dell'app in un paio di file js / css / ... a cui fai riferimento nel tuo codice HTML. systemjsbuilder ti consente persino di eliminare la necessità di includere systemjscome parte del pacchetto di distribuzione.

3. Puoi utilizzare ng deployAngular 8 per distribuire l'app dalla tua CLI. ng deploydovrà essere utilizzato insieme alla tua piattaforma di scelta (come @angular/fire). Puoi consultare i documenti ufficiali per vedere cosa funziona meglio per te qui

Sì, molto probabilmente dovrai implementare systemjs e raggruppare altre librerie esterne come parte del tuo pacchetto. E sì, sarai in grado di raggrupparli in un paio di file js a cui fai riferimento dalla tua pagina HTML.

Tuttavia, non è necessario fare riferimento a tutti i file js compilati dalla pagina, systemjspoiché un caricatore di moduli se ne occuperà.

So che sembra fangoso - per aiutarti a iniziare con il n. 2 ecco due applicazioni di esempio davvero buone:

Costruttore SystemJS: seme angular2

WebPack: angular2 webpack starter

Semplice risposta. Utilizzare la CLI angolare ed emettere il

ng build 

comando nella directory principale del progetto. Il sito verrà creato nella directory dist ed è possibile distribuirlo su qualsiasi server Web.

Questo verrà compilato per il test, se hai impostazioni di produzione nella tua app che dovresti usare

ng build --prod

Questo costruirà il progetto nella distdirectory e questo può essere inviato al server.

Sono successe molte cose da quando ho pubblicato questa risposta per la prima volta. L'interfaccia della riga di comando è finalmente alla 1.0.0, quindi seguendo questa guida vai all'aggiornamento il tuo progetto dovrebbe avvenire prima di provare a compilare. https://github.com/angular/angular-cli/wiki/stories-rc-update

Con la CLI angolare è facile. Un esempio per Heroku:

1. Crea un account Heroku e installa la CLI

2. Sposta il angular-clidep dependenciesin package.json(in modo che venga installato quando premi Push su Heroku.

3. Aggiungi uno postinstallscript che verrà eseguito ng buildquando il codice viene inviato a Heroku. Aggiungere anche un comando di avvio per un server Node che verrà creato nel passaggio seguente. Ciò posizionerà i file statici per l'app in una distdirectory sul server e avvierà successivamente l'app.

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

4. Crea un server Express per servire l'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);

5. Crea un telecomando Heroku e premi per deporre l'app.

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

Ecco un breve resoconto che ho fatto che ha più dettagli, incluso come forzare le richieste per usare HTTPS e come gestire PathLocationStrategy:)

Uso per sempre :

1. Crea la tua applicazione angolare con angular-cli nella cartella distng build --prod --output-path ./dist

2. Creare il file server.js nel percorso dell'applicazione angolare:

   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. Inizia per sempre forever start server.js

È tutto! la tua applicazione dovrebbe essere in esecuzione!

Spero che questo possa aiutare, e spero che ci proverò durante la settimana.

1. Creare un'app Web in Azure
2. Crea l'app Angular 2 nel codice vs.
3. Webpack su bundle.js.
4. Scarica xml del profilo pubblicato sul sito di Azure
5. Configurare la distribuzione di Azure usando https://www.npmjs.com/package/azure-deploy con il profilo del sito.
6. Deploy.
7. Assaggia la crema.

Se testate un'app come me su localhost o avrete dei problemi con una pagina bianca vuota, utilizzo questo:

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

Spiegazione:

ng build

Costruisci app ma nel codice ci sono molti spazi, schede e altre cose che rendono il codice leggibile dall'uomo. Per il server non è importante l'aspetto del codice. Questo è il motivo per cui utilizzo:

ng build --prod --build-optimizer 

Questo rende il codice fuori produzione e riduce le dimensioni [ --build-optimizer] consente di ridurre più codice].

Quindi alla fine aggiungo --base-href="http://127.0.0.1/my-app/"per mostrare l'applicazione dove si trova 'main frame' [in parole semplici]. Con esso Puoi avere anche più app angolari in qualsiasi cartella.

Per distribuire la tua app Angular2 su un server di produzione, assicurati innanzitutto che l'app sia eseguita localmente sul tuo computer.

L'app Angular2 può anche essere distribuita come app nodo.

Quindi, crea un file punto di ingresso nodo server.js / app.js (il mio esempio usa 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'));
});

Aggiungi anche express come dipendenza nel tuo file package.json.

Quindi distribuirlo nel proprio ambiente preferito.

Ho creato un piccolo blog per la distribuzione su IIS. segui il link

Per distribuire l'applicazione in IIS, attenersi alla seguente procedura.

Passaggio 1: crea l'applicazione Angular usando il comando ng build --prod

Passaggio 2: dopo la compilazione, tutti i file vengono archiviati nella cartella dist del percorso dell'applicazione.

Passaggio 3: Creare una cartella in C: \ inetpub \ wwwroot per nome QRCode .

Passaggio 4: copiare il contenuto della cartella dist nella cartella C: \ inetpub \ wwwroot \ QRCode .

Passaggio 5: Aprire Gestione IIS utilizzando il comando (Window + R) e digitare inetmgr fare clic su OK.

Passaggio 6: fare clic con il pulsante destro del mouse sul sito Web predefinito e fare clic su Aggiungi applicazione .

Passaggio 7: immettere il nome alias "QRCode" e impostare il percorso fisico su C: \ inetpub \ wwwroot \ QRCode .

Passaggio 8: Apri il file index.html e trova la riga href = "\" e rimuovi '\'.

Passaggio 9: ora sfoglia l'applicazione in qualsiasi browser.

Puoi anche seguire il video per una migliore comprensione.

URL del video: https://youtu.be/F8EI-8XUNZc

Se si distribuisce l'applicazione in Apache (server Linux) in modo da poter seguire i seguenti passi: Seguire i seguenti passi :

Step 1 : ng build --prod --env=prod

Passaggio 2 . (Copia dist nel server) quindi dist cartella creata, copia la cartella dist e distribuiscila nella directory principale del server.

Passaggio 3 . Crea il .htaccessfile nella cartella principale e incollalo nel file.htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Ottieni il pacchetto di produzione di caricamento più piccolo e più veloce compilando con il compilatore Ahead of Time e agitando / minimizza l'albero con rollup come mostrato nel ricettario angolare AOT qui: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html

Questo è disponibile anche con la CLI angolare, come indicato nelle risposte precedenti, ma se non hai creato la tua app utilizzando la CLI, dovresti seguire il ricettario.

Ho anche un esempio funzionante con materiali e grafici SVG (supportati da Angular2) che include un pacchetto creato con il ricettario AOT. Troverai anche tutte le configurazioni e gli script necessari per creare il pacchetto. Dai un'occhiata qui: https://github.com/fintechneo/angular2-templates/

Ho realizzato un breve video che dimostra la differenza tra numero di file e dimensioni di una build compilata AoT rispetto a un ambiente di sviluppo. Mostra il progetto dal repository github sopra. Puoi vederlo qui: https://youtu.be/ZoZDCgQwnmQ

Distribuzione angolare 2 nelle pagine di Github

Test della distribuzione di Angular2 Webpack in ghpages

Per prima cosa prendi tutti i file rilevanti dalla distcartella della tua applicazione, per me sono stati: + file css nella cartella risorse + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Quindi inviare questi file nel repository che è stato creato.

1 - Se si desidera che l'applicazione venga eseguita nella directory principale, creare un repository speciale con il nome [nomeutente_di_processo] .github.io e inviare questi file nel ramo principale

2 - Dove vuoi creare queste pagine nella sottodirectory o in un ramo diverso da quello root, crea un ramo gh-pages e invia questi file in quel ramo.

In entrambi i casi il modo in cui accediamo a queste pagine distribuite sarà diverso.

Per il primo caso lo sarà https: // [yourgithubusername] .github.io e per il secondo caso sarà [yourgithubusername] .github.io / [nome repository] .

Se supponi di volerlo distribuire usando il secondo caso assicurati di cambiare l'URL di base del file index.html nella dist poiché tutte le mappature del percorso dipendono dal percorso che hai dato e dovrebbe essere impostato su [/ branchname].

Link a questa pagina

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

Per un modo rapido ed economico per ospitare un'app angolare, ho usato l'hosting Firbase. È gratuito al primo livello ed è molto semplice distribuire nuove versioni utilizzando l'interfaccia della riga di comando di Firebase. Questo articolo spiega i passaggi necessari per distribuire l'app Angular 2 di produzione su Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

In breve, si esegue ciò ng build --prodche crea una cartella dist nel pacchetto e questa è la cartella che viene distribuita su Firebase Hosting.

La distribuzione di Angular 2 in azzurro è semplice

1. Esegui ng build --prod , che genererà una cartella dist con tutto raggruppato in pochi file incluso index.html.

2. Crea un gruppo di risorse e un'app Web al suo interno.

3. Posiziona i file delle cartelle dist usando FTP. In azzurro cercherà index.html per eseguire l'applicazione.

Questo è tutto. La tua app è in esecuzione!

A partire dal 2017 il modo migliore è usare angular -cli (v1.4.4) per il tuo progetto angolare.

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

Non è necessario aggiungere --aot esplicitamente come è attivato per impostazione predefinita con --prod. E l'uso di --output-hashing è secondo le tue preferenze personali riguardo allo scoppio della cache.

È possibile aggiungere esplicitamente il supporto CDN aggiungendo:

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

se prevedi di utilizzare CDN per l'hosting che è notevolmente veloce.

Con la CLI angolare , è possibile utilizzare il comando seguente:

ng build --prod

Genera una cartella dist con tutto il necessario per distribuire l'applicazione.

Se non hai pratica con i server web, ti consiglio di usare Angular to Cloud . Devi solo comprimere la cartella dist come file zip e caricarla sulla piattaforma.

Direi che molte persone con esperienza Web prima di angolare, sono abituate a distribuire i loro artefatti all'interno di una guerra (ad esempio jquery e html all'interno di un progetto Java / Spring). Ho finito per farlo per aggirare il problema CORS, dopo aver tentato di mantenere separati i miei progetti angolari e REST.

La mia soluzione era quella di spostare tutti i contenuti angolari (4), generati con CLI, dalla mia app a MyJavaApplication / angular. Quindi ho modificato la mia build Maven per usare maven-resources-plugin per spostare i contenuti da / angular / dist alla radice della mia distribuzione (ad esempio $ project.build.directory} / MyJavaApplication). L'angolo carica le risorse dalla radice della guerra per impostazione predefinita.

Quando ho iniziato ad aggiungere il routing al mio progetto angolare, ho ulteriormente modificato maven build per copiare index.html da / dist a WEB-INF / app. E, aggiunto un controller Java che reindirizza tutte le chiamate di riposo lato server all'indice.

Segui il link qui sotto,

Cambia la tua pagina Index.html Percorsi dei file di script Cambia il tuo percorso component.html in caso di errore che non trovi la posizione

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