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

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

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

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

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

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

Ответ 1

До сих пор никаких ответов не было, я получил решение. Как я это сделал?

Вам нужны 2 контекста.

(1) Angular 2 проекта и

(2) Spring MVC

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

Создать обычный динамический веб-проект.
Добавьте все зависимости, необходимые для Spring или пользователя maven pom.xml
Откройте CMD, перейдите к приложению Angular2. Команда "Хит"

npm install, а затем

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

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

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

Если вы используете веб-службы "Отдых" и хотите запускать Angular2 и Spring на одном сервере,

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

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

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

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

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

Ответ 2

Вы можете автоматизировать свое решение - просто используйте frontend-maven-plugin (с помощью которого вы можете установить nodejs и создать проект angular) и maven-resources-plugin скопировать содержимое каталога/ 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 с Angular CLI.