Déployer l'application Angular 2 avec Webpack sur Tomcat - Erreurs 404
Je souhaite créer et déployer mon interface client Angular 2 sur un serveur d'applications Tomcat. Pour commencer, j'ai suivi exactement les étapes de l'introduction suivante: https://angular.io/docs/ts/latest/guide/webpack.html .
J'ai donc la structure de projet suivante (tous les fichiers sont exactement comme dans l'introduction mentionnée ci-dessus):
angular2-webpack
--- config
------- helpers.js
------- karma.conf.js
------- karma-test-shim.js
------- webpack.common.js
------- webpack.dev.js
------- webpack.prod.js
------- webpack.test.js
--- dist
--- node_modules
---Publique
------- css
-------------- styles.css
-------images
-------------- angular.png
--- src
------- app
-------------- app.component.css
-------------- app.component.html
-------------- app.component.spec.ts
-------------- app.component.ts
-------------- app.module.ts
------- index.html
------- main.ts
------- polyfills.ts
------- vendor.ts
--- dactylographie
--- karma.conf.js
--- package.json
--- tsconfig.json
--- typings.json
--- webpack.config.js
npm start respectivement webpack-dev-server --inline --progress --port 3000 sur la console ou dans Webstorm → fonctionne comme prévu
Lorsque j'exécute npm build respectivement rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail, l'application est générée sans erreur et les fichiers de l'ensemble de sortie sont physiquement placés dans le dossier dist, comme prévu.
dist
---les atouts
------- angular.png
--- app.css
--- app.css.map
--- app.js
--- app.js.map
--- index.html
--- polyfills.js
--- polyfills.js.map
--- vendor.js
--- vendor.js.map
Ensuite, j'ai copié le contenu du dossier dist dans le répertoire webapps d'un Tomcat 9.0. Lorsque j'essaie d'accéder à l'application installée, une erreur 404 s'affiche pour les fichiers .css et .js ( que vous pouvez voir dans l'image ci-jointe ) . Il tente d'obtenir les mauvais fichiers. URL → "/ obv /" est manquant.
Je suis vraiment coincé ici et j'ai le sentiment d'avoir déjà essayé tout ce que je pouvais trouver sur Internet à ce sujet.
Est-ce que quelqu'un pourrait me dire ce que je fais mal? Merci d'avance.
Le problème est lié à la balise <base href="/" />. Ceci est tout simplement faux lorsque vous utilisez un serveur Web tel que Tomcat ou tentez de charger l'application directement à partir du système de fichiers avec firefox index.html. Ceci doit être changé en <base href="./" />. Lorsque l'application a encore des problèmes, vérifiez comment les fichiers de script sont importés. J'ai essayé d'utiliser angular2-webpack avec Tomcat et je devais également modifier toutes les balises de script pour ne pas utiliser de barre oblique dans l'attribut src.
<script src="js/vendor.js" ></script>
Avec Webpack, le comportement est contrôlé par l'attribut output.publicPath. Dans la documentation angular2 et dans le angular2-webpack , cette option est définie sur
output.publicPath="/"
Ce qui conduit au chemin absolu dans les liens. Une fois supprimé, Webpack utilisera les chemins relatifs et les liens pour les scripts et les images fonctionneront.
Si vous n'utilisez pas HashLocationStrategy, l'actualisation vous donnera 404 pour le déploiement de Tomcat. Dans ce cas, vous devez utiliser web.xml pour votre solution et indiquer tout votre itinéraire pour pointer vers index.html. Voici les extraits de code que vous pouvez appliquer pour votre chemin. Les routes angulaires s’occuperont de cela.
<servlet>
<servlet-name>index</servlet-name>
<jsp-file>/index.html</jsp-file>
</servlet>
<servlet-mapping>
<servlet-name>index</servlet-name>
<url-pattern>/home</url-pattern>
</servlet-mapping>
Comme suggéré précédemment par d'autres, configurez votre index.html (par) pour charger l'application.
J'ai dû utiliser une légère variation de la réponse de @ alokstar. Je devais aussi ajouter un drapeau "-d" ou "--deploy". Cela pourrait être dû à un changement de version.
J'utilise la version angular-cli: 1.0.0-beta.28.3
- J'ai exécuté la commande "ng build -prod -bh/my_app -d/my_app" dans le dossier du projet angular2.
- Copiez le contenu du dossier "dist" du dossier de projet angular2 dans le dossier "my_app" du dossier Tomcat/webapp.
- Démarrez le serveur Tomcat (s'il n'est pas en cours d'exécution).
Remarque: * L'indicateur de production de documents de construction ng est "-prod" et non "--prod"
Avec mon Tomcat fonctionnant sur le port 8080, je pouvais accéder à l'application à l'aide de: http: // localhost: 8080/my_app
J'ai eu une situation similaire. L'application front-end était prête avec angular-2 et webpack et je souhaitais la déployer sur le serveur Tomcat. J'ai suivi les étapes suivantes:
Exécutez la commande «ng build --prod --bh/[URL à étendre pour la production]» dans votre dossier de projet Angular 2.
Il créera un dossier dist dans votre application angular2 et "votre nom de projet" à l'étape 1 sera utilisé sur l'URL du serveur Tomcat.
Copiez tous les fichiers du dossier dist nouvellement créé et collez-les dans le dossier webapps de l'application Java.
Créer un fichier de guerre.
Déployez cette guerre sur le serveur.
J'espère que ça aide!
C’est ainsi que j’ai déployé mon application sur Tomcat . Tout dépend du base href que vous fournissez dans le fichier index.html . Toutes les images doivent être conservées sous ' dossier des actifs. Et le chemin d'accès à n'importe quelle image du projet doit être relatif à partir de ce dossier, c'est-à-dire.
src = "assets/img/img1.jpg"
Cela éliminera la difficulté de fichier non trouvé, ce qui se produira lors du déploiement de l'application.
Maintenant, ces étapes feront le reste.
- ng build --prod --base-href/myApp - cette commande ajoutera le fichier base-href = '/ myApp' à index.html
- Créez le dossier myApp dans le dossier webapps de Tomcat.
- Copiez le contenu du dossier dist dans ce dossier myApp.
- Exécutez le serveur.
L'application sera accessible à l'adresse http: // localhost: 8080/my_app
Si vous ne voulez pas du contexte 'myApp' pour votre application, essayez alors de faire base href = '. /' Ou créez simplement la production avec la commande ng build --prod
Cela a aidé dans mon cas. J'espère que ça aide.
- copier le dossier "dist" dans le dossier "webapps" de Tomcat et lier localhost: 8080/dist fonctionnera . (vous devez remplacer "publicPath: '/'" par "publicPath: '/ dist /'" et exécuter "npm" lancer la construction)
- Ma base: href = "/"