Comment déployez-vous des applications Angular?

Réponse Simple. Utilisez le CLI angulaire et émettez le

ng build 

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

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

ng build --prod

Cela va construire le projet dans le dist répertoire et ce peut être poussé vers le serveur.

Beaucoup s'est passé depuis que j'ai posté cette réponse. Le CLI est enfin, à 1.0.0, donc en suivant ce guide, allez mettre à niveau votre projet devrait se produire 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-cli dep vers le dependencies dans package.json (de sorte qu'il soit installé lorsque vous appuyez sur Heroku.

3. Ajoutez un script postinstall qui s'exécutera ng build lorsque le code sera poussé vers Heroku. Ajoutez également une commande de démarrage pour un serveur de nœud qui sera créé à l'étape suivante. Cela placera les fichiers statiques de l'application dans un dist répertoire sur le serveur et démarrer l'application par la suite.

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

1. 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);

1. 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 rapide writeup que j'ai fait qui a plus de détails, y compris comment forcer les demandes à utiliser HTTPS et comment gérer PathLocationStrategy :)

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

1. Créer une application Web sur Azure
2. Créez L'application Angular 2 dans le code vs.
3. Webpack à regrouper.js.
4. Télécharger le Site Azure publié profil xml
5. configurer Azure-déployer en utilisant https://www.npmjs.com/package/azure-deploy avec le profil du site.
6. déployer.
7. goûtez la crème.

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

L'application Angular2 peut également être déployée en tant qu'application node.

Créez donc un serveur de fichiers de point d'entrée de nœud.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 paquet.fichier json.

Déployez-le ensuite sur votre environnement préféré.

J'ai mis en place un petit blog pour le déploiement sur IIS. suivez lien

Vous obtenez le paquet de production de chargement le plus petit et le plus rapide en compilant avec le compilateur à L'avance,et tree-shake / minify avec rollup comme indiqué dans le livre de recettes angular 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 en utilisant L'interface de ligne de commande, vous devez suivre le livre de recettes.

J'ai aussi un exemple de travail avec des matériaux et des graphiques SVG (soutenu par Angular2) qu'il inclut un bundle créé avec le livre de recettes AOT. Vous trouverez également toutes les config 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 construction compilée AoT vs un environnement de développement. Il montre le projet du dépôt GitHub ci-dessus. Vous pouvez le voir ici: https://youtu.be/ZoZDCgQwnmQ

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

Étape 1: Construisez votre application angulaire en utilisant la commande ng build --prod

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

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

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

Étape 5: Ouvrez le Gestionnaire IIS en utilisant 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 index.html fichier et recherchez la ligne href="\" et supprimer '\'.

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

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

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

Le déploiement D'Angular 2 dans azure est facile

1. Exécutez ng build --prod , qui générera un dossier dist avec tout ce qui est fourni dans quelques fichiers, y compris l'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 cherchera index.code html pour exécuter l'application.

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

Avec CLI angulaire , 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 pas pratique avec des serveurs web, je vous recommande d'utiliser Angulaire de Cloud. Vous avez juste besoin de compresser le dossier dist en tant que fichier zip et de le télécharger dans la plate-forme.

Déploiement angulaire 2 dans les Pages Github

Tester le déploiement D'Angular2 Webpack dans les pages ghpages

Obtenez D'abord tous les fichiers pertinents du dossier dist de votre application, pour moi c'était le : + fichiers css dans le dossier des actifs + principal.bundle.js + polyfills.bundle.js + Fournisseur.bundle.js

Puis poussez ces fichiers dans le repo que vous avez créé.

1-si vous voulez que l'application s'exécute sur le répertoire racine - créez un repo spécial avec le nom [yourgithubusername]. github.io {[11] } et pousser ces fichiers dans la branche maître

2 -- si vous voulez créer ces pages, dans le sous-répertoire ou dans une autre branche autre que de la racine, de créer une branche gh-pages et pousser ces fichiers dans cette branche.

Dans les deux cas, la façon dont nous accédons à ces pages déployées sera différente.

Pour le Premier cas, il sera https://[yourgithubusername].github.io et pour le deuxième cas, il sera [yourgithubusername]. github.io/[nom du dépôt] .

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

Lien vers cette page

Https://rahulrsingh09.github.io/Deployment

Git Repo

Https://github.com/rahulrsingh09/Deployment

J'utilise avec POUR TOUJOURS :

1. Construisez votre application angulaire avec angular-cli dans le dossier dist ng build --prod --output-path ./dist

2. Créer serveur.js fichier dans votre chemin d'application angulaire:

   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 à jamais forever start server.js

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

Si Vous appli de test comme moi sur localhost, ou Vous avez quelques problèmes avec page vierge j'utilise ceci:

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

Explication:

ng build

Build app mais il y a beaucoup d'espaces, d'onglets et d'autres choses. Pour le serveur, il n'est pas important de savoir à quoi ressemble le code. C'est pourquoi j'utilise:

ng build --prod --build-optimizer 

Cela rend le 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ù est 'cadre principal '[en simple mot]. Avec elle, vous pouvez avoir même plusieurs applications angulaires dans n'importe quel dossier.

Pour un moyen rapide et bon marché d'héberger une application angulaire, j'ai utilisé L'hébergement Firbase. Il est gratuit sur le premier niveau et très facile de déployer de nouvelles versions en utilisant la CLI Firebase. Cet article explique ici les étapes nécessaires pour déployer votre application angular 2 de production sur Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

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

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

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

Vous n'avez pas besoin d'ajouter --aot explicitement comme 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 pourriez ajouter explicitement CDN soutien en ajoutant :

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

Si vous prévoyez d'utiliser CDN pour l'hébergement qui est considérablement rapide.

Je dirais que beaucoup de personnes ayant une expérience Web avant angular ont l'habitude de déployer leurs artefacts web dans une guerre (c'est-à-dire jquery et html dans un projet Java/Spring). J'ai fini par le faire pour contourner le problème CORS, après avoir essayé de garder mes projets angular et REST séparés.

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

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

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. (Copie dist dans le serveur) ensuite, le dossier dist créé, Copiez le dossier dist et déployez - le dans le répertoire racine du serveur.

Étape 3. Crée .htaccess fichier dans le dossier racine du le 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>

Il suffit de suivre le lien ci-dessous,

Modifiez votre Index.chemins de fichier de script de page html Changez votre composant.chemin html dans votre erreur d'obtention qui n'a pas pu trouver l'emplacement

Https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-déployer