Я становлюсь немного сумасшедшим, потому что не могу найти руководство по настройке приложения angular 4 в проекте java war, который будет построен с maven. Это потому, что я хочу запустить его в сервер wildfly.
Любая помощь?
Спасибо
Я становлюсь немного сумасшедшим, потому что не могу найти руководство по настройке приложения angular 4 в проекте java war, который будет построен с maven. Это потому, что я хочу запустить его в сервер wildfly.
Любая помощь?
Спасибо
У меня было похожее требование иметь один исходный проект, который имеет проект веб-сервисов java, а также проект angular (проект на основе angular-cli), и сборка maven должна создать войну со всеми угловыми файлами в ней. Я использовал maven-frontend-plugin с несколькими изменениями конфигурации для базового пути.
Цель состояла в том, чтобы создать военный файл со всем Java-кодом, а также скомпилированным угловым кодом в корневой папке war, и все это с помощью единой команды mvn clean package
.
Еще одна вещь для того, чтобы все это работало, чтобы избежать конфликта между URL-адресами маршрутизатора angular-app и URL-адресами вашего java-приложения. Вам необходимо использовать HashLocationStrategy. один из способов настроить его в app.module.ts, как показано ниже
app.module.ts -
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
]
Структура папок для Angular App - below-
Добавить конфигурацию maven-frontend-plugin в pom.xml
<properties>
<angular.project.location>angular-project</angular.project.location>
<angular.project.nodeinstallation>node_installation</angular.project.nodeinstallation>
</properties>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.0</version>
<configuration>
<workingDirectory>${angular.project.location}</workingDirectory>
<installDirectory>${angular.project.nodeinstallation}</installDirectory>
</configuration>
<executions>
<!-- It will install nodejs and npm -->
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v6.10.0</nodeVersion>
<npmVersion>3.10.10</npmVersion>
</configuration>
</execution>
<!-- It will execute command "npm install" inside "/e2e-angular2" directory -->
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<!-- It will execute command "npm build" inside "/e2e-angular2" directory
to clean and create "/dist" directory -->
<execution>
<id>npm build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
<!-- Plugin to copy the content of /angular/dist/ directory to output
directory (ie/ /target/transactionManager-1.0/) -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>2.4.2</version>
<executions>
<execution>
<id>default-copy-resources</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<overwrite>true</overwrite>
<!-- This folder is the folder where your angular files
will be copied to. It must match the resulting war-file name.
So if you have customized the name of war-file for ex. as "app.war"
then below value should be ${project.build.directory}/app/
Value given below is as per default war-file name -->
<outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
<resources>
<resource>
<directory>${project.basedir}/${angular.project.location}/dist</directory>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
Как и выше, внутренний плагин вызывает 'npm run build', убедитесь, что package.json должен иметь команду build в скрипте, как показано ниже:
package.json
"scripts": {
-----//-----,
"build": "ng build --prod",
-----//------
}
index.html всегда должен загружаться, когда кто-то нажимает на приложение из браузера, поэтому стоит сделать его файлом приветствия. Для веб-сервисов, скажем, у нас есть путь /rest-services/*, мы объясним это позже.
web.xml -
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet-mapping>
<servlet-name>restservices</servlet-name>
<url-pattern>/restservices/*</url-pattern>
</servlet-mapping>
Приведенной выше конфигурации достаточно, если ваше приложение не имеет никакого контекстного пути и развернуто в корневом пути на сервере. Но если ваше приложение имеет какой-либо контекстный путь, например http://localhost: 8080/myapplication/, то внесите изменения и в файл index.html -
angular-project/src/index.html - здесь document.location будет myapplication/(в противном случае контекстный путь вашего приложения/если приложение не имеет контекстного пути)
Цель сделать контекстный путь базовым путем для angular-app в том, что всякий раз, когда вы выполняете ajax http-вызов из angular, он будет добавлять базовый путь к URL-адресу. например, если я попытаюсь вызвать 'restservices/people', то он фактически сделает вызовы на ' http://localhost: 8080/myapplication/restservices/people '
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>E2E</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
После всех вышеперечисленных изменений после запуска mvn clean package
он создаст требуемую войну. Проверьте, находится ли все содержимое угловой папки dist в файле root of war.
У меня похожая проблема: у меня есть модуль веб-приложения maven с названием Tourism-Services, содержащий веб-сервисы, и проект maven, содержащий угловой проект (я создал угловой проект с CLI в папке src/main/angular5/Tourism)
Вопреки этому посту и, соответственно, следующей ссылке (как интегрировать Angular 2 + Java Maven Web Application), которая была предоставлена Партом Гия, я думаю, что Angular проект должен быть помещен в папку webapp проекта модуля Tourism-Services. Учитывая это, у меня есть дополнительные вопросы:
Обычно все результаты компиляции в папке dist должны быть помещены в папку webapp. Но в папке dist не все ресурсы проекта Angular (как изображения, css, которые должны присутствовать в папке angular assets, я прав?)
Учитывая угловые зависимости, которые есть в node_modules, мы должны интегрировать их также в папке webapp? Есть одно препятствие: во-первых, есть файлы Typescript, которые также должны быть скомпилированы для интерпретации сервером, но, может быть, они скомпилированы и добавлены, когда они импортируются в угловые файлы пользовательского приложения? Каково решение?
Должны ли мы включать другие типы ресурсов из углового проекта в папку webapp?.