webentwicklung-frage-antwort-db.com.de

Führen Sie Spring4MVC mit Angular 2 auf einem einzelnen Server aus

Ich bin neu in angle2 und möchte wissen, wie die mögliche Dateistruktur für SpringMVC4 mit angular 2?

enter image description here

Wie im Bild gezeigt, funktioniert es für Angular 1.x, aber die Dateistruktur von Angular 2 ist ganz anders und die Komponente wird gesteuert, und ich verwende = angular 2 Dateistruktur wie unten angegeben enter image description here

Ich habe viel gesucht und festgestellt, dass wir Front-End (mit angle2) und Back-End (mit spring/springboot) separat verwenden können, aber wir brauchen 2 Server, um die Anwendung auszuführen. Beispiel: Frontend: 192.168.100.1:4200 und Backend: 192.168.100.1:8080

Gibt es also eine Möglichkeit oder eine allgemeine Dateistruktur, um Angular2 und Spring4MVC auf demselben Server auszuführen (wie 192.168.100.1:8080)?

Danke im Voraus. Antworten werden geschätzt!

15
BeingCoders

Keine Antworten bis jetzt das ist in Ordnung, ich habe Lösung. Wie habe ich gemacht?

Sie benötigen 2 Kontexte.

(1) Angular 2 project and

(2) Spring MVC

Befolgen Sie die nachstehenden Schritte, um unser Hauptziel zu erreichen, SPRINGMVC + Angular2 auf einem einzelnen Server auszuführen.

  1. Erstellen Sie ein normales dynamisches Webprojekt.
  2. Fügen Sie alle Abhängigkeiten hinzu, die für spring oder user maven pom.xml erforderlich sind
  3. Öffnen Sie CMD und navigieren Sie zu angle2 application. Befehl drücken

    npm install und dann

    ng build oder verwende ng build --prod für die Produktion

dieser Befehl erstellt einen "dist" -Ordner und kopiert alle Dateien einschließlich aller Ordner.

  1. Fügen Sie diese Dateien und Ordner in das WebContent-Verzeichnis ein.

  2. Zuletzt müssen Sie basehref = "./" in index.html ändern. Jetzt können Sie den Server ausführen oder war-Dateien bereitstellen und mit Tomcat oder anderen Servern bereitstellen.

Wenn Sie Rest-Webservices verwenden und angle2 und spring auf einem einzelnen Server ausführen möchten,

Sie müssen webServiceEndPointUrl gemäß Ihrer Host-URL eingeben. Wenn Sie beispielsweise app auf localhost: 8080 ausführen, müssen Sie die URL beibehalten

webServiceEndPointUrl = " http: // localhost: 8080/api/user "; at angular side. Danach können Sie erstellen und einfügen in Ihren WebContent-Ordner kopieren.

Siehe unten Abbildung, Dateistruktur für springMVC + ANGULAR2

enter image description here

Ich weiß, dass es viele Nachteile gibt, diese Methode zum Ausführen von Anwendungen auf einem einzelnen Server zu verwenden, aber wenn dies erforderlich ist, können Sie dies befolgen.

Wenn Sie etwas an der Seite angular) ändern, müssen Sie den Ordner "paste dist" immer kopieren und können ihn dann bereitstellen!

13
BeingCoders

Sie können Ihre Lösung automatisieren - verwenden Sie einfach das Frontend-Maven-Plugin (mit dem Sie nodejs installieren und das angular) erstellen können = project) und maven-resources-plugin , um den Inhalt von/angular/dist/in das Stammverzeichnis der WAR-Datei zu kopieren (siehe auch dieser Artikel )

<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>

Und dann können Sie die Hot-Reload-Funktion (während der Entwicklung) auf dem NodeJS-Server verwenden, die von ng serve Mit Angular CLI Werkzeug.

9
Dan Brandt