web-dev-qa-db-fra.com

Comment déployer une application Angular 2 sur un serveur Tomcat (Windows Server 2012)

Je suis nouveau dans le framework AngularJS 2 et je suis bloqué! 

Je souhaite déployer une application (Quickstart par exemple) sur Windows Server 2012. J'y ai déjà installé Apache Tomcat . Ce que j'ai fait: J'ai utilisé la commande npm build (avec et sans "-prod" ) afin de générer le dossier dist (sortie: index.html & les fichiers de l'ensemble) puis je l'ai mis dans le dossier 'webapps' de Tomcat, puis j'ai essayé d'accéder à la page à l'aide de mon navigateur, la page d'index me montre "Chargement ... "! Je pense que angular ne fonctionne pas ...

J'ai essayé d'installer NodeJs sur le serveur, puis de générer un projet simple (npm install -g angular-cli) et de l'exécuter sur le serveur. Il fonctionne sur le serveur localhost mais sur ma machine avec "IP_of_sv: Port", Chrome donne moi une erreur "ERR_CONNECTION_REFUSED"!

Pouvez-vous m'aider s'il vous plaît avec des explications simples s'il vous plaît?

Merci d'avance!

tomcatangulardeployment
9
altd

J'ai trouvé la solution:

Je devais insérer le bon chemin vers les fichiers de bundle!

J'ai par exemple changé l'attribut src du fichier d'index suivant: Src = "inline.bundle.js"

to: src = "dist/inline.bundle.js"

Vient d'ajouter le DIST FOLDEEEEEER! Haha Merci de courir les chantiers pour votre aide!

2
altd

Si vous utilisez la commande angular-cli pour créer un projet angular 2. Ensuite, cli a donné des commandes pour déployer votre application en production. Utilisez une commande comme ng build --prod dans le répertoire de votre projet et le dossier dist sera généré dans votre répertoire.  enter image description here

Allez dans le dossier dist intérieur et changez la base href comme href = "." dans index.html. Après cela, copiez le dossier dist dans votre répertoire racine Tomcat et exécutez le serveur.  enter image description here . vous pouvez voir ci-dessous une capture d'écran de notre application fonctionnant sur le serveur Tomcat .  enter image description here

18
Balaji B

Vous pouvez changer un endroit dans le index.html:  <base href = "/"> 
Faites de la base href le dossier relatif à votre application Webapps dans Tomcat avec le chemin d'accès relatif et contenant le fichier index.html de votre application angulaire .

Dans votre cas, changez le en: <base href = "./ dist">
Aucun autre changement n'est nécessaire.

5
Ahmad Agbaryah

Il suffit de le construire en utilisant l’une des tâches de construction (dev inclura des cartes sources et ne vous inquiétez pas de la présence d’un noeud sur le serveur, ce dernier n’est nécessaire que pour l’outil de développement. Copiez ensuite tous les fichiers du dossier dist Examinez le fichier index.html et assurez-vous que les références aux différents scripts sont correctes. La seule chose dont l'application a besoin pour s'exécuter est les scripts de l'index, aucun nœud n'est nécessaire.

2
run yards

Utilisez le lien où j'ai posté la solution pour cela. S'il vous plaît vérifier et laissez-moi savoir si vous avez d'autres problèmes. Déployer l'application Angular 2 avec Webpack sur Tomcat - Erreurs 404

1
Amit khandelwal
  1. Exécutez cette commande ng build --prod sur votre terminal
  2. Après vérification, un dossier est créé en parallèle de src Dist et allez dans le dossier dist et allez à l'intérieur du dossier de votre projet Sélectionnez tous les fichiers et collez-les à l'intérieur de WebContant et parallelin web-INF et allez à l'intérieur de la page index.html et remplacez / à partir de . par href="." et allez à url exemple: http: // localhost: 8080/ProjectName/#/URL et vérifiez-le. 
0
Bheem Singh