Запустите Spring4MVC с Angular 2 на одном сервере

Я новичок в angular2, я хочу знать, какова возможная структура файла для SpringMVC4 с angular 2?

enter image description here

Как показано на рисунке, он будет работать для углового 1.x но файловая структура Angular 2 совершенно другая и ее компонент управляется, и я использую файловую структуру angular 2, как показано ниже enter image description here

Я много искал, и я обнаружил, что мы можем использовать передний конец(используя angular2) и задний конец (сервер-использование spring / springboot) отдельно, но нам нужно 2 сервера для запуска приложения. Например, Frontend: 192.168.100.1:4200 И Backend : 192.168.100.1:8080

Итак, есть ли способ или общая структура файлов для запуска angular2 и spring4MVC на одном сервере (например, 192.168.100.1:8080)?

спасибо заранее. Ответы будут оценены!

14
angular java ng2-bootstrap servlets spring-mvc

2 ответов

нет ответов до сих пор это нормально, у меня есть решение. Как я это сделал ?

вам нужно 2 контекстах.

(1) угловой проект 2 и

(2) Весна MVC

выполните следующие шаги для достижения нашей главной цели, чтобы запустить SPRINGMVC + Angular2 на одном сервере.

  1. создать обычный динамический веб-проект.
  2. добавить все зависимости, необходимые для весны или пользователя maven pom.в XML

  3. открыть CMD, перейдите к angular2 приложение. Хит команды

    НПМ установки а то

    ng build или использовать ng build --prod для производства

эта команда создаст папку "dist", скопируйте все файлы, включая все папки.

  1. вставьте эти файлы и папки в каталог WebContent.

  2. последнее, что вам нужно изменить basehref="./" в индексе.формат html. Теперь вы готов к запуску сервера или вы можете развернуть файл войны и обслуживать его с tomcat или другими серверами.

Если вы используете веб-службы Rest и хотите запустить angular2 и spring на одном сервере,

нужно поставить webServiceEndPointUrl согласно url вашего хоста. Например, если вы используете приложение на localhost: 8080, вам нужно сохранить url

webServiceEndPointUrl="http://localhost:8080/api/user"; по угловой стороне. После этого вы можете создавать и копировать вставьте в папку WebContent.

см. ниже изображение, структура файла для springMVC+ANGULAR2

enter image description here

Я знаю, что есть много недостатков, чтобы использовать этот способ для запуска приложений на одном сервере, но если требуется можно следовать этому.

Если вы измените что-нибудь на угловой стороне, вам нужно скопировать папку paste dist все время, а затем вы можете развернуть ее!

12

вы можете автоматизировать свое решение-просто используйте интерфейс-maven-плагин (С помощью которого вы можете установить nodejs и построить угловой проект) и maven-ресурсы-плагин чтобы скопировать содержимое каталога/angular/ dist / в корневой каталог .war-файл (см. Также в этой статье)

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

и тогда вы можете использовать горячий перезагрузка функция (при разработке) на сервере nodejs, запущенная ng serve С угловой CLI.

9