Как настроить Angular 4 внутри Java-проекта на основе Maven

Ответ 1

У меня было похожее требование иметь один исходный проект, который имеет проект веб-сервисов 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-

Угловой-проект

• расстояние
• e2e
• node_modules
• общественности
• ЦСИ
  • приложение
  • активы
  • окружающая среда
  • favicon.ico
  • index.html
  • main.ts
  • polyfills.ts
  • style.css
  • tsconfig.json
  • typings.d.ts
  • и т.д.-и т.д.
• TMP
• .angular-cli.json
• .gitignore
• karma.conf.js
• package.json
• README.md
• tslint.json
• и т.д.

Maven Project -

• ЦСИ
  • главный
    • Джава
    • Ресурсы
    • WebApp
      • WEB-INF
      • web.xml
• angular-project (разместите ваш угловой проект здесь)
• node_installation
• pom.xml

Добавить конфигурацию 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.

Ответ 2

У меня похожая проблема: у меня есть модуль веб-приложения maven с названием Tourism-Services, содержащий веб-сервисы, и проект maven, содержащий угловой проект (я создал угловой проект с CLI в папке src/main/angular5/Tourism)

Вопреки этому посту и, соответственно, следующей ссылке (как интегрировать Angular 2 + Java Maven Web Application), которая была предоставлена Партом Гия, я думаю, что Angular проект должен быть помещен в папку webapp проекта модуля Tourism-Services. Учитывая это, у меня есть дополнительные вопросы:

1. Обычно все результаты компиляции в папке dist должны быть помещены в папку webapp. Но в папке dist не все ресурсы проекта Angular (как изображения, css, которые должны присутствовать в папке angular assets, я прав?)

2. Учитывая угловые зависимости, которые есть в node_modules, мы должны интегрировать их также в папке webapp? Есть одно препятствие: во-первых, есть файлы Typescript, которые также должны быть скомпилированы для интерпретации сервером, но, может быть, они скомпилированы и добавлены, когда они импортируются в угловые файлы пользовательского приложения? Каково решение?

3. Должны ли мы включать другие типы ресурсов из углового проекта в папку webapp?.