web-dev-qa-db-fra.com

Intégrer le projet Angular2 dans le serveur Tomcat

J'ai développé une API Spring maven rest pour mon projet. Pour le côté client, j'utilise Angular2 avec TypeScript. Comme nouveau sur Angular, référé angular pour le développement, utilisant npm et lite-server.

Maintenant, je dois faire ces deux projets séparés en un seul projet, en intégrant les fichiers html, js, css dans mon projet maven, pour le déployer sur le serveur Tomcat.

Structure du projet

Côté client

Project
|__ app
      |_ all app files
|__ node_modules
|__ typings
|__ index.html
|__ package.json
|__ style.css
|__ systemjs.config.js
|__ tsconfig.json
|__ typings.json

Du côté serveur

Project
|__ src/main
        |__ Java
        |__ resources
        |__ webapp
                 |__index.html
|__ pom.xml

Tous les articles/blogs similaires, j'ai trouvé suggèrent de mettre à jour pom.xml avec le nœud, etc. Mais ce dont j'ai besoin, c'est

  • Compilez le projet angular-TypeScript en fichiers js.
  • Produisez un ensemble de fichiers html, js, css entièrement fonctionnels.
  • Copiez-les dans le dossier webapp du serveur ou là où ils doivent être.
  • L'exécution du projet Spring maven dans Tomcat doit afficher ma page d'index côté client
  • Le client doit travailler (communiquer avec l'api de repos) de la même manière lorsqu'il s'agissait de deux projets distincts

Comment cela peut-il être fait?

Exécutez cette commande, npm run build, dans angular angulaire pour créer un dossier dist, contenant des fichiers côté client prêts pour la production. Mais j'ai obtenu cette erreur

construction de script manquante

.

tomcatangularbuild
14
Ramanujan R

Enfin utilisé angular-cli. ng build --prod crée un build prêt pour la production. Fichiers index.html et .js copiés dans le dossier du projet dans les applications Web Tomcat (ou sous Webcontent dans Eclipse).

Index.html modifié en <base href = "."> et ça a bien fonctionné

20
Ramanujan R