web-dev-qa-db-fra.com

Exécutez Spring4MVC avec Angular 2 sur un seul serveur

Je suis nouveau sur angular2, je veux savoir quelle est la structure de fichier possible pour SpringMVC4 avec angular 2?

enter image description here

Comme le montre l'image, cela fonctionnera pour Angular 1.x mais la structure de fichier de Angular 2 est assez différente et son composant piloté, et j'utilise = angular 2 comme indiqué ci-dessous enter image description here

J'ai beaucoup cherché et j'ai trouvé que nous pouvons utiliser Front end (en utilisant angular2) et back end (serveur en utilisant spring/springboot) séparément, mais nous avons besoin de 2 serveurs pour exécuter l'application. Par exemple, Frontend: 192.168.100.1:4200 et Backend: 192.168.100.1:8080

Existe-t-il un moyen ou une structure de fichier générale pour exécuter à la fois angular2 et spring4MVC sur le même serveur (comme 192.168.100.1:8080)?

Merci d'avance. Les réponses seront appréciées!

javaspring-mvcangularservletsng2-bootstrap
15
BeingCoders

Aucune réponse jusqu'à présent, c'est bien, j'ai obtenu une solution. Comment j'ai fait?

Vous avez besoin de 2 contextes.

(1) Angular 2 et

(2) Spring MVC

Suivez les étapes ci-dessous pour atteindre notre objectif principal, exécuter SPRINGMVC + Angular2 sur un seul serveur.

  1. Créez un projet Web dynamique normal.
  2. Ajouter toutes les dépendances requises pour le printemps ou l'utilisateur maven pom.xml

  3. Ouvrez CMD, accédez à l'application angular2. Commande Hit

    npm install puis

    ng build ou utilisez ng build --prod pour la production

cette commande créera un dossier "dist", copiera tous les fichiers, y compris tous les dossiers.

  1. Collez ces fichiers et dossiers dans le répertoire WebContent.

  2. Dernière chose, vous devez changer basehref = "./" dans index.html. Vous êtes maintenant prêt à exécuter le serveur ou vous pouvez déployer le fichier war et le servir avec Tomcat ou d'autres serveurs.

Si vous utilisez les services Web Rest et que vous souhaitez exécuter angular2 et spring sur un seul serveur,

Vous devez mettre webServiceEndPointUrl selon l'URL de votre hôte. Par exemple, si vous exécutez l'application sur localhost: 8080, vous devez conserver l'URL

webServiceEndPointUrl = " http: // localhost: 8080/api/user "; à angular. Après cela, vous pouvez créer et copier coller dans votre dossier WebContent.

Voir ci-dessous Image, structure de fichiers pour springMVC + ANGULAR2

enter image description here

Je sais qu'il existe de nombreux inconvénients à utiliser ces méthodes pour exécuter l'application sur un seul serveur, mais si cela doit être requis, vous pouvez suivre cela.

Si vous changez quoi que ce soit à angular, vous devez copier-coller le dossier dist à tout moment et ensuite vous pouvez le déployer!

13
BeingCoders

Vous pouvez automatiser votre solution - utilisez simplement le plugin frontend-maven (avec lequel vous pouvez installer nodejs et construire le angular = project) et maven-resources-plugin pour copier le contenu du répertoire/angular/dist/dans la racine du fichier .war (voir aussi cet article )

<plugin>
      <groupId>org.Apache.maven.plugins</groupId>
      <artifactId>maven-resources-plugin</artifactId>
      <version>3.0.2</version>
      <executions>
        <execution>
          <id>default-copy-resources</id>
          <phase>process-resources</phase>
          <goals>
            <goal>copy-resources</goal>
          </goals>
          <configuration>
            <overwrite>true</overwrite>
            <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
            <resources>
              <resource>
                <directory>${project.basedir}/angular/dist</directory>
              </resource>
            </resources>
          </configuration>
        </execution>
      </executions>
</plugin>

Et puis vous pouvez utiliser la fonction de rechargement à chaud (pendant le développement) sur le serveur nodejs, exécutée par ng serve avec Angular CLI tool.

9
Dan Brandt