web-dev-qa-db-fra.com

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

J'ai créé n nouvelle angular angulaire utilisant angular-cli.

J'ai terminé l'application et la prévisualiser à l'aide de ng-serve, elle fonctionne parfaitement.

Après cela, j'ai utilisé ng build --prod, qui génère le dossier 'dist'. Lorsque je mets ce dossier dans xampp, il ne fonctionne pas. J'ai trouvé qu'il n'y a pas de fichiers * .js, qui devraient y figurer après la conversion * .ts -> * .js (je suppose).

J'ai joint la capture d'écran, dans laquelle il montre à gauche le dossier src contenant tous les fichiers .ts. Au milieu, le dossier 'dist' et la capture d'écran du navigateur.

S'il vous plaît, guidez-moi comment puis-je générer une application entièrement fonctionnelle à partir de angular-cli, que je peux exécuter sur mon serveur xampp.

Capture d'écran:

Screenshot

angularangular-cli
37
raju

Méthode 1 (populaire): Si vous utilisez angular-cli, alors

ng build --prod

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

méthode 2:

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

npm install http-server -g

et après être allé dans votre dossier de projet

http-server ./dist

il servira tous les fichiers de votre dossier. vous pouvez vérifier sur le terminal 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

J'espère que ça vous aidera :)

Bonus: Si vous souhaitez déployer dans heroku. Veuillez suivre ce didacticiel détaillé https://medium.com/@ryanchenkie_40935/angular-cli-deployment-Host-your-angular-2-app-on-heroku-3f266f13f352

51
pd farhad

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

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 Beta-18 de angular-cli, tous les actifs (les images dans mon cas) ont été copiés vers ./dist/assets lors de la construction et ont été correctement référencés dans leurs composants.

16
Mike Devenney

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

<base href="/[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/
9
Babalola Tiwa

Voici un exemple avec Heroku:

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

  2. Bouge le angular-cli dep dans le dependencies dans package.json _ (pour qu'il soit installé lorsque vous appuyez sur Heroku.

  3. Ajoutez un script postinstall qui exécutera ng build lorsque le code est transmis à Heroku. Ajoutez également une commande de démarrage pour un serveur Node qui sera créé à l'étape suivante. Ceci placera les fichiers statiques de l'application dans un répertoire dist du serveur et démarrera. l'application après.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}
  1. Créez un serveur Express pour desservir 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 quitter l'application.
heroku create
git add .
git commit -m "first deploy"
git Push heroku master

Voici un rapide Writeup Je l'ai fait qui a plus de détails, y compris comment forcer les demandes à utiliser HTTPS et comment gérer PathLocationStrategy :)

4
cienki

Utilisation ng build avec le --bh drapeau

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

ng build --base-href /myUrl/
ng build --bh /myUrl/
3
Johan Blomgren

J'utilise la dernière version de l'Angular-CLI (au moment de cette réponse, sa 1.0.0Beta-18)

Cette version fonctionne de la manière suivante: elle place tout dans des fichiers d'ensembles et les appelle dans le fichier index.html. Après cela, vous devez copier vos ressources dans le dossier dist (pour une raison quelconque, cela ne fonctionne pas). Enfin, vérifiez votre base href pour vous assurer qu’elle est réglée sur ce qui doit être réglé, puis elle devrait fonctionner. C'est ce qui a fonctionné pour moi et j'ai testé à la fois sur Apache et Node.

1
Jonathon Harrelson

J'utilise actuellement Angular-CLI 1.0.0-beta.32.3

dans le répertoire racine de votre projet, lancez npm install http-server -g

après une exécution réussie de l'installation ng build --prod

lors de l'exécution réussie de la construction http-server ./dist

1
Esom

le serveur http ne supporte pas le routage côté client, donc rien d'autre que votre URL de base ne fonctionnera. Au lieu de cela, vous pouvez utiliser angular-http-server :

npm install -g angular-http-server
ng build --prod
cd dist
angular-http-server

Cela ne devrait être utilisé que pour tester l'application localement avant de la déployer sur un serveur Web. Pour savoir comment déployer réellement l'application sur un serveur Web, consultez l'article article d'Angular.io sur le déploiement , qui traite des considérations à prendre en compte lors de la création d'un déploiement et fournit des configurations pour une variété de serveurs Web courants utilisé dans la production.

0
alan

Si quelqu'un travaille avec Nginx, voici la solution complète:

Supposons que vous souhaitiez déployer votre angular sur l'hôte: http://example.com et PORT: 8080 Note - L'hôte et le port peuvent être différents dans votre cas.

Assurez-vous que vous avez <base href="/"> dans votre index.html balise principale.

  1. Tout d’abord, allez sur votre chemin angular angulaire $ repo (c'est-à-dire// home/user/helloWorld) angulaire) sur votre machine.

  2. Puis construisez/dist pour votre serveur de production en utilisant la commande suivante:

    ng build --prod --base-href http://example.com:8080

  3. Copiez maintenant le dossier/dist (c.-à-d./Home/user/helloWorld/dist) à partir du référentiel angular de votre machine) sur la machine distante sur laquelle vous souhaitez héberger votre serveur de production.

  4. Connectez-vous maintenant à votre serveur distant et ajoutez la configuration suivante du serveur nginx.

    server {

    listen 8080;

    server_name http://example.com;

    root /path/to/your/dist/location;

    # eg. root /home/admin/helloWorld/dist

    index index.html index.htm;

    location / {

        try_files $uri $uri/ /index.html;

        # This will allow you to refresh page in your angular app. Which will not give error 404.

    }

}

  5. Maintenant, redémarrez Nginx.

  6. C'est ça !! Vous pouvez maintenant accéder à votre angular sur http://example.com:808

J'espère que ça vous sera utile.

0
viks