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

Question

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

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

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

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

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

Answer 1

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

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

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

(2) Spring MVC

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

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

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

   установить npm, а затем

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

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

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

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

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

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

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

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

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

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

Answer 2

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