comment intégrer une application Web Angular 2 + Java Maven

Question

J'ai créé une application frontale Angular 2 et j'ai créé une application dorsale Java Rest WS qui est connectée à la base de données.

La structure de mon dossier pour l'application Angular 2 est la suivante-

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

Et la structure de mon application Web Java Maven est la suivante

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

Je veux savoir comment intégrer ces deux applications en une seule qui ne produira qu'un seul fichier war.

Answer 1

Solution basée sur la construction en ligne de commande du projet angulaire avec

npm install --verbose
npm run ng build

donné

src/main/frontend
src/main/webapp

maven-war-plugin + exec-maven-plugin

<plugins>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.2.3</version>
        <configuration>
            <failOnMissingWebXml>false</failOnMissingWebXml>
            <webResources>
                <resource>
                    <directory>src/main/frontend/dist</directory>
                </resource>
            </webResources>
        </configuration>
    </plugin>
    <plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>exec-maven-plugin</artifactId>
        <version>3.0.0</version>
        <executions>
            <execution>
                <id>npm-install</id>
                <phase>generate-sources</phase>
                <configuration>
                    <workingDirectory>src/main/frontend</workingDirectory>
                    <executable>npm</executable>
                    <arguments>
                        <argument>install</argument>
                    </arguments>
                </configuration>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
            <execution>
                <id>npm-ng-build</id>
                <phase>generate-sources</phase>
                <configuration>
                    <workingDirectory>src/main/frontend</workingDirectory>
                    <executable>npm</executable>
                    <arguments>
                        <argument>run</argument>
                        <argument>ng</argument>
                        <argument>build</argument>
                    </arguments>
                </configuration>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
        </executions>
    </plugin>
</plugins>

maven-war-plugin + maven-antrun-plugin (je n'ai pas réussi à lancer npm directement sur ma machine, d'où la construction dépendante de l'OS)

<plugins>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.2.3</version>
        <configuration>
            <failOnMissingWebXml>false</failOnMissingWebXml>
            <webResources>
                <resource>
                    <directory>src/main/frontend/dist</directory>
                </resource>
            </webResources>
        </configuration>
    </plugin>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-antrun-plugin</artifactId>
        <version>3.0.0</version>
        <executions>
            <execution>
                <id>exec-gen-sources</id>
                <phase>generate-sources</phase>
                <configuration>
                    <target name="Build Frontend">
                        <exec executable="cmd" dir="src/main/frontend" failonerror="true">
                            <arg line="/c npm install --verbose" />
                        </exec>
                        <exec executable="cmd" dir="src/main/frontend" failonerror="true">
                            <arg line="/c npm run ng build" />
                        </exec>
                    </target>
                </configuration>
                <goals>
                    <goal>run</goal>
                </goals>
            </execution>
        </executions>
    </plugin>
</plugins>

Answer 2

<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>