Как интегрировать Angular 2 + Java Maven Web Application

Я создал внешнее приложение Angular 2 и создал одно внутреннее приложение Java Rest WS, которое подключено к БД.

Структура моей папки для приложения Angular 2 - below-

Angular2App
  confg
  dist
  e2e
  node_modules
  public
  src
     app
     favicon.ico
     index.html
     main.ts
     system-config.ts
     tsconfig.json
     typings.d.ts
  tmp
  typings
  .editorconfig
  .gitignore
  angular-cli.json
  angular-cli-build.js
  package.json
  README.md
  tslint.json
  typings.json

И моя структура веб-приложений на Java Maven - below-

JerseyWebApp
  src
   main
     java
       Custom Package
       java classes
     resources
     webapp
       WEB-INF
         web.xml
       index.html
  pom.xml

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

Ответ 1

Вот что я сделал: -

Установить Nodejs v6.9 +
Запустите npm install @angular/cli -g для Angular CLI
Установите Apache Maven или используйте любую дружественную IDE для Maven
Используйте требуемую конфигурацию Maven, я использовал простой webapp (WAR).

Структура каталогов (за исключением ngapp) - это стандартная структура Maven.)

ngfirst
├── pom.xml
├── src
│   └── main
│       ├── java
│       ├── resources
│       ├── webapp
│       └── ngapp

Angular Часть

Откройте ngapp папку в терминале и введите команду ng init для инициализации конфигурации node и npm, результатом будет простое приложение Angular2 Структура каталога внутри папки ngapp: -

             ├── angular-cli.json
             ├── e2e
             ├── karma.conf.js
             ├── node_modules
             ├── package.json
             ├── protractor.conf.js
             ├── README.md
             ├── tslint.json
             ├── src
                 ├── app
                 ├── assets
                 ├── environments
                 ├── favicon.ico
                 ├── index.html
                 ├── main.ts
                 ├── polyfills.ts
                 ├── styles.css
                 ├── test.ts
                 └── tsconfig.json

Эта структура эквивалентна структуре проекта Maven Angular, а src - Angular. Источник приложения, так же как команда maven build генерирует свой вывод в target, команда ng build генерирует свой вывод в папке dist.

Чтобы упаковать сгенерированное приложение Angular в Maven, сгенерированное WAR, измените конфигурацию сборки, чтобы изменить выходную папку с dist на webapp, откройте w506 > -cli.json и изменить его outDir, как показано ниже: -

"outDir": "../webapp/ng"

В этот момент команда ng build создаст встроенное Angular приложение внутри каталога ng папки ngfirst/src/main/ webapp.

Часть Maven

Откройте pom.xml и настройте следующие три плагина maven: -

компилятор-плагин: нет файлов Java для компиляции в /src/main/ ngapp папке, исключайте его.
war-plugin:/src/main/ ngapp - это папка проекта Angular, и она не должна быть упакована в WAR, исключите ее.
exec-plugin. Выполните установку NPM и Angular -CLI. Создайте команды для создания приложения Angular в папке webapp для окончательной упаковки. Примечание. --base-href аргумент, требуется загрузить ресурсы Angular из контекста контекста webapp.

Вот как это должно выглядеть: -

<plugins>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.3</version>
        <configuration>
            <excludes>
                <exclude>ngapp/**</exclude>
            </excludes>
        </configuration>
    </plugin>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.0.0</version>
        <configuration>
            <excludes>
                <exclude>ngapp/**</exclude>
            </excludes>
        </configuration>
    </plugin>
    <plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>exec-maven-plugin</artifactId>
        <version>1.5.0</version>
        <executions>
            <execution>
                <id>exec-npm-install</id>
                <phase>generate-sources</phase>
                <configuration>
                    <workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
                    <executable>npm</executable>
                    <arguments>
                        <argument>install</argument>
                    </arguments>
                </configuration>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
            <execution>
                <id>exec-npm-ng-build</id>
                <phase>generate-sources</phase>
                <configuration>
                    <workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
                    <executable>ng</executable>
                    <arguments>
                        <argument>build</argument>
                        <argument>--base-href=/ngfirst/ng/</argument>
                    </arguments>
                </configuration>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
        </executions>
    </plugin>
</plugins>

Проект Building Maven (и Angular приложение тоже)

Откройте терминал в корневой папке проекта ngfirst и запустите команду mvn package, это приведет к созданию WAR файла (ngfirst.war) в target папку.

Разверните ngfirst.war в контейнере, откройте http://localhost:8080/ngfirst/ng/index.html в браузере. (при необходимости измените имя хоста и порт)

Если все пошло правильно, вы должны увидеть приложение работает! в браузере, то есть Angular Приложение на работе!

Предварительная обработка JSP

Мы можем использовать возможности динамической конфигурации и рендеринга страниц технологии JSP с приложением Angular, Angular SPA обслуживается контейнером Java как обычная HTML-страница, index.html в этом случае, если мы настроим JSP Engine для предварительной обработки файлов html, тогда вся магия JSP может быть включена внутри Angular Страница SPA, просто включите следующее внутри web.xml

<servlet-mapping>
    <servlet-name>jsp</servlet-name>
    <url-pattern>*.html</url-pattern>
</servlet-mapping>

Сохранить, перестроить проект maven, развернуть WAR и voila!!

Ответ 2

Моя сторона У меня есть модуль maven для angular источников, называемых prj- angular, и анотер для военного приложения, называемый prj-war.

сначала prj angular:

он использует maven-exec-plugin для вызова npm install и ng build (благодаря @J_Dev!)
изменить каталог ресурсов ресурса на dist/
skip jar Генерация MANIFEST
Результат модуля maven: банку с созданным содержимым angular dist/!

тогда второй prj_war будет создан:

имеет prj angular как зависимость
используйте распаковую фазу, чтобы распаковать предыдущую банку в пункт назначения веб-приложения.
этот модуль создаст вам войну приложений со свежим angular dist.

Следуйте за соответствующей конфигурацией плагина, которую я использовал:

prj angular (извлечение pom.xml)

<build>
    <resources>
        <resource>
            <directory>dist</directory>
        </resource>
    </resources>
    <plugins>
        <!-- skip compile -->
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <executions>
                <execution>
                    <id>default-compile</id>
                    <phase />
                </execution>
            </executions>
        </plugin>
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>exec-maven-plugin</artifactId>
            <executions>
                <execution>
                    <id>exec-npm-install</id>
                    <phase>generate-sources</phase>
                    <configuration>
                        <workingDirectory>${project.basedir}</workingDirectory>
                        <executable>npm.cmd</executable>
                        <arguments>
                            <argument>install</argument>
                        </arguments>
                    </configuration>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                </execution>
                <execution>
                    <id>exec-npm-ng-build</id>
                    <phase>generate-sources</phase>
                    <configuration>
                        <workingDirectory>${project.basedir}/src</workingDirectory>
                        <executable>ng.cmd</executable>
                        <arguments>
                            <argument>build</argument>
                            <argument>--no-progress</argument>
                            <argument>--base-href=/app/ng/</argument> <== to update
                        </arguments>
                    </configuration>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-jar-plugin</artifactId>
            <configuration>
                <archive>
                    <addMavenDescriptor>false</addMavenDescriptor>
                    <manifest>
                        <addClasspath>false</addClasspath>
                    </manifest>
                </archive>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-shade-plugin</artifactId>
            <executions>
                <execution>
                    <phase>package</phase>
                    <goals>
                        <goal>shade</goal>
                    </goals>
                    <configuration>
                        <filters>
                            <filter>
                                <artifact>*:*</artifact>
                                <excludes>
                                    <exclude>META-INF/</exclude>
                                </excludes>
                            </filter>
                        </filters>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

prj war (pom.xml extract)

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-dependency-plugin</artifactId>
            <executions>
                <execution>
                    <id>unpack angular distribution</id>
                    <phase>generate-resources</phase>
                    <goals>
                        <goal>unpack</goal>
                    </goals>
                    <configuration>
                        <artifactItems>
                            <artifactItem>
                                <groupId>com.myapp</groupId> <== to update
                                <artifactId>prj-angular</artifactId> <== to update
                                <overWrite>true</overWrite>
                                <includes>**/*</includes>
                            </artifactItem>
                        </artifactItems>
                        <outputDirectory>${project.build.directory}/prjwar/ng</outputDirectory> <== to update
                        <overWriteReleases>true</overWriteReleases>
                        <overWriteSnapshots>true</overWriteSnapshots>
                    </configuration>
                </execution>
            </executions>
        </plugin>

Ответ 3

Как ни странно, я сделал это только на прошлой неделе!

Использование Netbeans 8.1 и сервлет Tomcat версии 8.0.27

Angular и структуру файла проекта Java.

Java Project называется Foo. Angular Проект - это бар

Foo (Java Maven Project)
|__ src
|    |__ main
|    |    |__ webapp (This folder contains the entire Angular Project)
|    |    |    |__ META-INF
|    |    |    |    \__ context.xml 
|    |    |    |__ WEB-INF
|    |    |    |    \__ web.xml
|    |    |    |__ includes
|    |    |    |    |__ css
|    |    |    |    |__ images
|    |    |    |    \__ js
|    |    |    |
|    |    |    | ## Bar project files are located here ##
|    |    |    |
|    |    |    |__ app
|    |    |    |    \__ All .ts and compiled .js files are located here
|    |    |    |__ node_modules
|    |    |    |    \__ any dependencies used for Bar are located here
|    |    |    |__ typings
|    |    |    |    \__ typings for Typescript located here
|    |    |    |
|    |    |    |__ README.txt
|    |    |    |__ index.jsp
|    |    |    |__ package.json
|    |    |    |__ systemjs.config.js
|    |    |    |__ tsconfig.json
|    |    |    |__ typings.json
|    |    |    \ ## Bar project files end here
|    |    | 
|    |    |__ resources
|    |    |    |__META-INF
|    |    |    |    \__ persistence.xml
|    |    |__ java
|    |    |    |__ hibernate.cfg.xml
|    |    |    |__ com
|    |    |    |    |__ orgName
|    |    |    |    |    |__ packageName
|    |    |    |    |    |    \__ .java files are here
|__ pom.xml
\__ nb-configuration.xml

Ответ 4

Я рекомендую отделить два приложения, таким образом, у вас есть модульность. Таким образом вы можете изменить приложение Angular, не влияя на ваш сервис, и наоборот. Во-вторых, ваш apache/nginx быстрее отправит ваши js и html из Angular вместо Tomcat (например). Но если вы все еще хотите поместить приложение Angular в войну, шаблон состоит в том, что все веб-ресурсы находятся в src/main/webapp.

Ответ 5

Я хочу поделиться тем, как настроить мои Angular/Java проекты. Некоторые важные вещи:

Там только один проект Maven, и это позволяет мне построить весь проект. Это не означает, что я всегда могу создать внешний интерфейс и внутренний интерфейс отдельно.
Мой проект основан на платформе Spring Boot. Тем не менее, вы можете легко адаптировать мое решение к вашей ситуации. Я генерирую output код Angular проекта, который находится в папке "META-INF". Очевидно, вы можете изменить его, если не используете Spring Boot.
В моем проекте я хочу опубликовать angular проект в папке public.
Когда я разрабатываю, я запускаю проект Angular и бэкэнд-проект отдельно: Angular с ng serve и бэкэнд-проект (часть Java) в IDE (Eclipse).

Хорошо, давай начнем. Вся структура проекта представлена на следующем рисунке.

Как видите, я поместил проект Angular в папку 'src\main\ngapp'. Для проекта Java (бэкэнд) я использовал Eclipse IDE, для проекта Angular я использовал Webstorm. Вы можете выбрать предпочитаемую IDE для управления проектом. Важная вещь: вам понадобятся две IDE для управления всем проектом.

Чтобы создать проект Angular с помощью Maven, я использовал следующее определение профиля maven.

<profile>
    <id>build-client</id>

    <build>
        <plugins>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.3</version>
                <configuration>
                    <nodeVersion>v10.13.0</nodeVersion>
                    <npmVersion>6.4.1</npmVersion>
                    <workingDirectory>src/main/ngapp/</workingDirectory>
                </configuration>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>npm run build-prod</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>prod</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run-script build</arguments>
                        </configuration>
                        <phase>generate-resources</phase>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</profile>

Как видите, я использовал плагин com.github.eirslett:frontend-maven-plugin для установки узла и запуска npm для сборки проекта Angular. Таким образом, когда я запускаю профиль maven build-client, плагин используется для:

Проверьте и, если необходимо, установите версию узла v10.13.0 в папке проекта Angular src/main/ngapp/
Запустите команду npm run build. В проекте Angular определен псевдоним сборки в package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --configuration=production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
}

Клиент Angular должен находиться в папке public веб-приложения. Для этого проект Angular настроен на использование baseHref=/public. Кроме того, построенный проект должен быть размещен в src/main/resources/META-INF/resources/public. В angular.json вы найдете:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "baseHref":"/public/",
    "outputPath": "../resources/META-INF/resources/public",
    ...

В проекте без Spring Boot вам, вероятно, нужно поместить собранный angular проект прямо в папку src/main/webapp/public. Для этого просто измените файл angular.json, как вам нужно.

Вы можете найти весь код проекта в моем проекте github. Проект плагина находится здесь.