Comment déployez-vous des applications angulaires?

Comment déployez-vous les applications Angular une fois qu'elles atteignent la phase de production?

Tous les guides que j'ai vus jusqu'à présent (même sur angular.io ) comptent sur un serveur léger pour servir et browserSync pour refléter les changements - mais lorsque vous avez terminé le développement, comment pouvez-vous publier l'application?

Dois-je importer tous les .jsfichiers compilés sur la index.htmlpage ou est-ce que je les minimise à l'aide de gulp? Vont-ils travailler? Ai-je besoin de SystemJS dans la version de production?

Vous êtes ici en train de toucher deux questions en une.

Le premier est Comment héberger votre application? .
Et comme @toskv l'a mentionné, sa question est vraiment trop large pour être répondue et dépend de nombreuses choses différentes.

Le second est Comment préparez-vous la version de déploiement de l'application? .
Vous avez plusieurs options ici:

1. Déployez tel quel. Juste ça - pas de minification, de concaténation, de changement de nom, etc. Transpilez tout votre projet ts, copiez toutes vos sources js / css / ... + dépendances résultantes sur le serveur d'hébergement et vous êtes prêt à partir.

2. Déployez à l'aide d'outils de regroupement spéciaux, tels que webpackou systemjsBuilder.
   Ils viennent avec toutes les possibilités qui manquent au n ° 1.
   Vous pouvez regrouper tout le code de votre application dans quelques fichiers js / css / ... que vous référencez dans votre HTML. systemjsbuilder vous permet même de vous débarrasser de la nécessité d'inclure systemjsdans votre package de déploiement.

3. Vous pouvez utiliser à ng deploypartir d'Angular 8 pour déployer votre application à partir de votre CLI. ng deploydevra être utilisé en conjonction avec votre plateforme de choix (telle que @angular/fire). Vous pouvez consulter les documents officiels pour voir ce qui fonctionne le mieux pour vous ici

Oui, vous aurez probablement besoin de déployer un systemjstas d'autres bibliothèques externes dans le cadre de votre package. Et oui, vous pourrez les regrouper dans quelques fichiers js que vous référencez à partir de votre page HTML.

Vous n'êtes pas obligé de référencer tous vos fichiers js compilés à partir de la page - systemjscar un chargeur de module s'en chargera.

Je sais que cela semble trouble - pour vous aider à démarrer avec le n ° 2, voici deux très bons exemples d'applications:

Générateur SystemJS: angular2 seed

WebPack: démarreur webpack angular2

Réponse simple. Utilisez la CLI angulaire et émettez le

ng build 

commande dans le répertoire racine de votre projet. Le site sera créé dans le répertoire dist et vous pourrez le déployer sur n'importe quel serveur Web.

Cela sera construit pour le test, si vous avez des paramètres de production dans votre application, vous devez utiliser

ng build --prod

Cela construira le projet dans le distrépertoire et cela peut être poussé vers le serveur.

Beaucoup de choses se sont passées depuis que j'ai publié cette réponse pour la première fois. L'interface de ligne de commande est enfin à 1.0.0, donc en suivant ce guide, mettez à niveau votre projet avant d'essayer de construire. https://github.com/angular/angular-cli/wiki/stories-rc-update

Avec la CLI angulaire, c'est facile. Un exemple pour Heroku:

1. Créez un compte Heroku et installez la CLI

2. Déplacez le angular-clidep à dependenciesen package.json(afin qu'il soit installé lorsque vous pousser à Heroku.

3. Ajoutez un postinstallscript qui s'exécutera ng buildlorsque le code sera poussé vers Heroku. Ajoutez également une commande de démarrage pour un serveur Node qui sera créé à l'étape suivante. Cela placera les fichiers statiques de l'application dans un distrépertoire sur le serveur et démarrera l'application par la suite.

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

4. Créez un serveur Express pour servir l'application.

// 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. Créez une télécommande Heroku et appuyez pour déposer l'application.

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

Voici un bref résumé que j'ai fait qui contient plus de détails, y compris comment forcer les demandes à utiliser HTTPS et comment gérer PathLocationStrategy:)

J'utilise avec forever :

1. Créez votre application Angular avec le dossier angular-cli to distng build --prod --output-path ./dist

2. Créez le fichier server.js dans le chemin de votre application Angular:

   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. Commencez pour toujours forever start server.js

C'est tout! votre application devrait être en cours d'exécution!

J'espère que cela peut aider, et j'espère que je pourrai essayer cela pendant la semaine.

1. Créer une application Web sur Azure
2. Créez une application Angular 2 dans vs code.
3. Webpack à bundle.js.
4. Télécharger le profil XML du site Azure publié
5. Configurez Azure-deploy à l'aide de https://www.npmjs.com/package/azure-deploy avec le profil de site.
6. Déployer.
7. Goûtez la crème.

Si vous testez l'application comme moi sur localhost ou si vous rencontrez des problèmes avec une page blanche vierge, j'utilise ceci:

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

Explication:

ng build

Créez une application, mais dans le code, il y a de nombreux espaces, onglets et autres éléments qui permettent au code d'être lu par l'homme. Pour le serveur, l'apparence du code n'est pas importante. C'est pourquoi j'utilise:

ng build --prod --build-optimizer 

Cela crée du code pour la production et réduit la taille [ --build-optimizer] permet de réduire plus de code].

Donc, à la fin, j'ajoute --base-href="http://127.0.0.1/my-app/"pour montrer l'application où se trouve le «cadre principal» [en termes simples]. Avec lui, vous pouvez même avoir plusieurs applications angulaires dans n'importe quel dossier.

Afin de déployer votre application Angular2 sur un serveur de production, assurez-vous avant tout que votre application s'exécute localement sur votre machine.

L'application Angular2 peut également être déployée en tant qu'application de nœud.

Alors, créez un fichier de point d'entrée de nœud server.js / app.js (mon exemple utilise 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'));
});

Ajoutez également express en tant que dépendance dans votre fichier package.json.

Ensuite, déployez-le sur votre environnement préféré.

J'ai créé un petit blog pour le déploiement sur IIS. suivre le lien

Pour déployer votre application dans IIS, suivez les étapes ci-dessous.

Étape 1: Créez votre application Angular à l'aide de la commande ng build --prod

Étape 2: Après la construction, tous les fichiers sont stockés dans le dossier dist du chemin de votre application.

Étape 3: Créez un dossier dans C: \ inetpub \ wwwroot par le nom QRCode .

Étape 4: Copiez le contenu du dossier dist dans le dossier C: \ inetpub \ wwwroot \ QRCode .

Étape 5: Ouvrez le Gestionnaire des services Internet à l'aide de la commande (Fenêtre + R) et tapez inetmgr cliquez sur OK.

Étape 6: Faites un clic droit sur le site Web par défaut et cliquez sur Ajouter une application .

Étape 7: Entrez le nom d'alias 'QRCode' et définissez le chemin physique sur C: \ inetpub \ wwwroot \ QRCode .

Étape 8: Ouvrez le fichier index.html et recherchez la ligne href = "\" et supprimez '\'.

Étape 9: Parcourez maintenant l'application dans n'importe quel navigateur.

Vous pouvez également suivre la vidéo pour une meilleure compréhension.

URL de la vidéo: https://youtu.be/F8EI-8XUNZc

Si vous déployez votre application dans Apache (serveur Linux), vous pouvez suivre les étapes suivantes: Suivez les étapes suivantes :

Étape 1 : ng build --prod --env=prod

Étape 2 . (Copiez dist dans le serveur) puis le dossier dist créé, copiez le dossier dist et déployez-le dans le répertoire racine du serveur.

Étape 3 . Crée un .htaccessfichier dans le dossier racine et collez-le dans le.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>

Vous obtenez le paquet de production de chargement le plus petit et le plus rapide en compilant avec le compilateur Ahead of Time, et tree-shake / minify avec rollup comme indiqué dans le livre de recettes angulaire AOT ici: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html

Ceci est également disponible avec l'Angular-CLI comme indiqué dans les réponses précédentes, mais si vous n'avez pas créé votre application à l'aide de la CLI, vous devez suivre le livre de recettes.

J'ai également un exemple de travail avec des matériaux et des graphiques SVG (soutenu par Angular2) qui comprend un ensemble créé avec le livre de recettes AOT. Vous trouvez également toute la configuration et les scripts nécessaires pour créer le bundle. Découvrez-le ici: https://github.com/fintechneo/angular2-templates/

J'ai fait une vidéo rapide démontrant la différence entre le nombre de fichiers et la taille d'une compilation compilée AoT par rapport à un environnement de développement. Il montre le projet du référentiel github ci-dessus. Vous pouvez le voir ici: https://youtu.be/ZoZDCgQwnmQ

Déploiement Angular 2 dans les pages Github

Test du déploiement d'Angular2 Webpack dans ghpages

Commencez par récupérer tous les fichiers pertinents du distdossier de votre application, pour moi c'était les: + fichiers css dans le dossier assets + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Ensuite, poussez ces fichiers dans le référentiel que vous avez créé.

1 - Si vous voulez que l'application s'exécute sur le répertoire racine - créez un dépôt spécial avec le nom [yourgithubusername] .github.io et poussez ces fichiers dans la branche master

2 - Où, comme si vous vouliez créer ces pages dans le sous-répertoire ou dans une branche différente autre que la racine, créez une branche gh-pages et poussez ces fichiers dans cette branche.

Dans les deux cas, la manière dont nous accédons à ces pages déployées sera différente.

Pour le premier cas, ce sera https: // [yourgithubusername] .github.io et pour le second cas, ce sera [yourgithubusername] .github.io / [Repo name] .

Si vous voulez le déployer en utilisant le deuxième cas, assurez-vous de changer l'URL de base du fichier index.html dans le dist car tous les mappages de routes dépendent du chemin que vous donnez et il doit être défini sur [/ branchname].

Lien vers cette page

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

Pour un moyen rapide et peu coûteux d'héberger une application angulaire, j'utilise l'hébergement Firbase. C'est gratuit sur le premier niveau et très facile de déployer de nouvelles versions à l'aide de l'interface de ligne de commande Firebase. Cet article explique ici les étapes nécessaires pour déployer votre application de production angular 2 sur Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

En bref, vous exécutez ng build --prodce qui crée un dossier dist dans le package et c'est le dossier qui est déployé sur Firebase Hosting.

Déployer Angular 2 dans Azure est facile

1. Exécutez ng build --prod , qui générera un dossier dist avec tout ce qui est regroupé dans quelques fichiers, y compris index.html.

2. Créez un groupe de ressources et une application Web à l'intérieur.

3. Placez vos fichiers de dossiers dist en utilisant FTP. Dans Azure, il recherchera index.html pour exécuter l'application.

C'est tout. Votre application est en cours d'exécution!

À partir de 2017, le meilleur moyen est d'utiliser angular-cli (v1.4.4) pour votre projet angulaire.

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

Vous n'avez pas besoin d'ajouter --aot explicitement car il est activé par défaut avec --prod.Et l'utilisation de --output-hashing est conforme à vos préférences personnelles concernant l'éclatement du cache.

Vous pouvez ajouter explicitement le support CDN en ajoutant:

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

si vous envisagez d'utiliser CDN pour l'hébergement, ce qui est considérablement rapide.

Avec Angular CLI , vous pouvez utiliser la commande suivante:

ng build --prod

Il génère un dossier dist avec tout ce dont vous avez besoin pour déployer l'application.

Si vous n'avez aucune pratique avec les serveurs Web, je vous recommande d'utiliser Angular to Cloud . Il vous suffit de compresser le dossier dist en tant que fichier zip et de le télécharger sur la plateforme.

Je dirais que beaucoup de gens ayant une expérience Web avant angular, sont habitués à déployer leurs artefacts Web dans une guerre (c'est-à-dire jquery et html dans un projet Java / Spring). J'ai fini par faire cela pour contourner le problème CORS, après avoir tenté de séparer mes projets angulaire et REST.

Ma solution était de déplacer tous les contenus angular (4), générés avec CLI, de my-app vers MyJavaApplication / angular. Ensuite, j'ai modifié ma build Maven pour utiliser maven-resources-plugin pour déplacer le contenu de / angular / dist vers la racine de ma distribution (ie $ project.build.directory} / MyJavaApplication). Angular charge les ressources à partir de la racine de la guerre par défaut.

Quand j'ai commencé à ajouter le routage à mon projet angulaire, j'ai encore modifié maven build pour copier index.html de / dist vers WEB-INF / app. Et, ajouté un contrôleur Java qui redirige tous les appels de repos côté serveur vers l'index.

Suivez simplement le lien ci-dessous,

Changez votre page Index.html Chemins du fichier de script Changez le chemin de votre component.html en cas d'erreur d'obtention qui n'a pas pu trouver l'emplacement

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