java - cli - maven angular 6

cómo integrar la aplicación web Angular 2+Java Maven

Question

He creado una aplicación para el usuario de Angular 2 y he creado una aplicación de fondo de Java Rest WS que está conectada a la base de datos.

La estructura de mi carpeta para la aplicación Angular 2 está debajo-

• Angular2App
  • confg
  • dist
  • e2e
  • node_modules
  • público
  • src
    • aplicación
    • favicon.ico
    • index.html
    • main.ts
    • system-config.ts
    • tsconfig.json
    • typings.d.ts
  • tmp
  • tipings
  • .editorconfig
  • .gitignore
  • angular-cli.json
  • angular-cli-build.js
  • paquete.json
  • README.md
  • tslint.json
  • typings.json

Y la estructura de mi aplicación web Java Maven está debajo

• JerseyWebApp
  • src
    • principal
    • Java
      • Paquete personalizado
      • clases de java
    • recursos
    • Aplicación Web
      • WEB-INF
      • web.xml
      • index.html
  • pom.xml

Quiero saber cómo integrar estas dos aplicaciones en una aplicación que producirá solo un archivo war.

Answer 1

¡Curiosamente, hice esto la semana pasada!

Utilizando Netbeans 8.1 y un servlet de Tomcat versión 8.0.27

Estructura de archivo de proyecto angular y Java.

El Proyecto Java se llama Foo. Angular Project es Bar

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

Answer 2

Aquí esta lo que hice:-

• Instalar Nodejs v6.9 +
• Ejecute npm install @ angular / cli -g para Angular CLI
• Instala Apache Maven o usa cualquier IDE compatible con Maven
• Usa tu configuración necesaria de Maven, utilicé una aplicación web simple (WAR).

Estructura del directorio (a excepción del resto de la carpeta ngapp es la estructura estándar de Maven).

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

Parte angular

Abra la carpeta ngapp en la terminal y escriba ng init para inicializar la configuración de nodo y npm, el resultado será una simple aplicación de ejemplo Angular2 con la siguiente estructura de directorio dentro de la carpeta 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

Esta estructura es el equivalente angular de la estructura del proyecto Maven y el directorio src es la fuente de Angular Application, al igual que el comando maven build genera su salida en la carpeta de destino , ng build command genera su salida en la carpeta dist .

Para empaquetar la aplicación angular generada dentro de Maven genera WAR, modifique la configuración de compilación para cambiar la carpeta de salida de dist a webapp , abra el archivo angular-cli.json y modifique su outDir de la siguiente manera:

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

En este punto, el comando ng build generará la aplicación angular construida dentro del directorio ng de la carpeta ngfirst / src / main / webapp .

Parte Maven

Abra pom.xml y configure los siguientes tres complementos maven:

1. compiler-plugin : No hay cosas de Java para compilar en la carpeta / src / main / ngapp , excluirlo.
2. war-plugin : / src / main / ngapp es una carpeta de proyecto angular y no debe estar empaquetada en WAR, excluirla.
3. complemento ejecutivo : Ejecute los comandos Instalar NPM e Integración CLI angular para generar la Aplicación angular en la carpeta de aplicaciones web para el empaque final. Nota: argumento base-href, es necesario cargar recursos angulares desde la ruta de contexto de la aplicación web.

Así es como debería verse:

<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 Project (y Angular App también)

Abra el Terminal en la carpeta raíz del proyecto ngfirst y ejecute el comando mvn package , esto generará un archivo WAR (ngfirst.war) en la carpeta de destino .

Implemente ngfirst.war en un contenedor, abra http://localhost:8080/ngfirst/ng/index.html en el navegador. (ajuste su nombre de host y puerto si es necesario)

Si todo salió bien, ¡deberías ver que la aplicación funciona! en el navegador, ¡eso es la aplicación angular en el trabajo!

Preprocesamiento JSP

Podemos aprovechar la configuración dinámica y las capacidades de representación de páginas de la tecnología JSP con la aplicación angular. Angular SPA es servido por el contenedor Java como página HTML normal, index.html en este caso, si configuramos JSP Engine para preprocesar también archivos html, luego toda la magia de JSP se puede incluir dentro de la Página de SPA angular, solo incluya lo siguiente dentro de web.xml

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

Guarde, reconstruya el proyecto maven, despliegue WAR y ¡listo!

Answer 3

Mi lado tengo un módulo maven para fuentes angulares llamado prj-angular , y otro para aplicaciones de guerra llamado prj-war .

primer prj angular está construido:

• usa maven-exec-plugin para llamar a npm install y ng build (¡gracias a @J_Dev!)
• cambiar el directorio predeterminado de recursos a dist/
• skip jar Generación MANIFEST
• resultado del módulo de maven: ¡un recipiente con dist / contenido angular generado solamente!

entonces, segundo prj_war es construir:

• tiene prj angular como dependencia
• utilice la fase de descomprimir para descomprimir el archivo jar anterior en el destino de la aplicación web
• este módulo crea tu guerra de aplicaciones con dist angular nuevo.

Seguir bajo la configuración de complemento correspondiente que utilicé:

prj angular (extracto 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 (extracto pom.xml)

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

Answer 4

Recomiendo que las dos aplicaciones se separen, de esta manera tienes modularidad. De esta forma puede cambiar la aplicación angular sin afectar su servicio, y viceversa. En segundo lugar, su apache / nginx es más rápido para entregar su js y html desde Angular en lugar de Tomcat (por ejemplo). Pero si todavía quiere poner la aplicación angular dentro de la guerra, el patrón es que todos los recursos web están en src / main / webapp.