comment déployer l'application angular2 construite à l'aide d'angular-cli

Question

J'ai créé n nouveau angulaire de l'application en utilisant angulaires-cli.

J'ai terminé l'application et l'aperçu à l'aide de ng-service, il fonctionne parfaitement.

Après cela, j'ai utilisé ng build --prod, qui génère le 'dist' dossier. Quand j'ai mis ce dossier dans xampp pour s'exécuter, il n'est pas de travail. J'ai trouvé qu'il n'y a pas de *.js fichiers, qui devrait être là après *.ts -> *.js de conversion (je suppose).

J'ai joint la capture d'écran, dans lequel sur le côté gauche, elle est en montrant le dossier src avoir tous .les fichiers ts, Sur le moyen c'est de montrer la 'dist' dossier et capture d'écran du navigateur.

Merci de me guider comment puis-je générer entièrement de travail app angulaires-cli, je peux courir dans mon serveur xampp.

Capture d'écran:

Answer 1

méthode 1(populaire) : Si vous utilisez angulaires-cli, puis

ng build --prod

fera l'affaire. Ensuite, vous pouvez copier tout .dist le dossier de votre serveur de dossier

méthode 2 :

vous pouvez utiliser le serveur http pour servir votre application . Pour installer le serveur http

npm install http-server -g

et après aller dans votre dossier de projet

http-server ./dist 

il sera au service de tous les fichiers dans votre dossier. vous pouvez vérifier le terminal de ce que l'adresse ip et le port que vous pouvez utiliser pour accéder à l'application. Maintenant, ouvrez votre navigateur et tapez

ip-adress:port/index.html

Espérons qu'il saura vous aider :)

Bonus : Si vous souhaitez déployer dans heroku. S'il vous plaît aller à travers ce tutoriel détaillé https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352

Answer 2

Pour ceux qui recherchent une réponse pour l'hébergement IIS ...

Construisez votre projet

 ng build --prod
 

Copiez tout le contenu du dossier ./dist dans le dossier racine de votre site Web en conservant la structure du dossier dans ./dist (c.-à-d., Ne déplacez rien). À l'aide de la version bêta-18 de angular-cli, tous les actifs (les images dans mon cas) ont été copiés dans ./dist/assets lors de la construction et ont été correctement référencés dans leurs composants.

Answer 3

Vérifiez votre fichier index.html et éditez cette ligne

 <base href="http://stackoverflow.com/[your-project-folder-name]/dist/"> 
 

Votre contenu devrait se charger correctement. Vous pouvez ensuite charger des styles globalement

Vous devez définir la base href comme recommandé par Johan

 ng build --prod --bh /[your-project-folder-name]/dist/
 

Answer 4

Voici un exemple avec Heroku:

1. Créer un compte Heroku et installer le CLI

2. Déplacer l' angular-cli dep à l' dependencies en package.json (alors qu'il est installé lorsque vous appuyez à Heroku.

3. Ajouter un postinstall script qui sera exécuté ng build lorsque le code est poussé à Heroku. Également ajouter une commande de démarrage pour un Nœud de serveur qui sera créé dans l'étape suivante. Cela placera les fichiers statiques de l'application dans un dist répertoire sur le serveur et lancez l'application par la suite.

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

4. Créer un Express serveur de servir de 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éer un Heroku à distance et de les pousser à depoy l'application.

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

Voici un petit article que j'ai fait a plus de détails, y compris la façon de forcer les demandes d'utilisation de HTTPS et comment manipuler PathLocationStrategy :)

Answer 5

Utilisez ng build avec le drapeau --bh

Définit la balise de base href sur / myUrl / dans votre index.html:

 ng build --base-href /myUrl/
ng build --bh /myUrl/