¿Cómo integrar una aplicación Angular 4 con una pila Spring Boot?

13

Me gustaría integrar una aplicación cliente Angular 4 con una aplicación Java Spring que funcione http://localhost:8080/y ofrezca algunos puntos finales Rest. Mi objetivo es poder llamar a la aplicación Angular desde una URL como http://localhost:8080/adminisitration. ¿Cómo puedo hacer eso?

Gracias por adelantado,

7

Debería presionar la compilación de su aplicación ng y colocarla en la carpeta spring-boot:

  1. Cree una carpeta pública en recursos en su proyecto spring-boot

  2. ng build --prod, escriba este comando en su proyecto angular que creará una carpeta dist en el directorio de su proyecto angular

  3. Copie los archivos de su carpeta dist y colóquelos en la carpeta pública debajo de los recursos de su proyecto spring-boot.

Esto le ayudará a ejecutar su aplicación angular en spring-boot.

Luego presione http: // localhost: 8080 / adminisitration, debería funcionar bien

6
  • ¡Su solución suena fácil y hace exactamente lo que quiero! Pero, ¿cómo apuntar la aplicación http://localhost:8080/adminisitration? Solo está agregando la aplicación a la carpeta de recursos. user5500327 18 de agosto de 2017 a las 15:54
  • ¿Cuál es su punto de entrada para ng is it index.html? Si es así, tendría un botón más o menos para seguir adelante o puede ser la misma página que su administrador con opciones de inicio de sesiónAkshay Srivastava 18 de agosto de 2017 a las 16:22
  • ¡Gracias! Funciona. Pero tuve que cambiar el hrefatributo de la baseetiqueta enindex.htmluser5500327 25 de agosto de 2017 a las 4:49
  • "ng build --prod", no "ng-build --prod"Brain 13/03/18 a las 13:23
  • En mi tutorial de Angular, sirvo la página escribiendo 'ng serve' en la línea de comando. ¿Spring Boot reemplaza esto? ¿O necesito atender al cliente y al servidor por separado? MiguelMunoz 22/08/18 a las 20:04
4

Primero, hay dos formas: sirve la aplicación angular desde su aplicación de arranque de primavera como recursos estáticos, por lo que debe empaquetarla en jar y eso no es fácil cuando tiene dos repositorios diferentes para frontend y backend y no se ve muy bien por el mantenimiento. Punto de vista.

En segundo lugar, tiene recursos estáticos angulares en nginx y la aplicación de arranque de primavera es accesible a un proxy inverso de angular a través configurado en nginx como

location /api/ {
    proxy_pass http://localhost:8080/api/;
}

Entonces, cuando angular lo solicita, GET http://localhost/api/somerestlo reenvía aGET http://localhost:8080/api/somerest

1
2

La forma más fácil de servir un front-end angular desde una aplicación de arranque con resorte es tener un proyecto de varios módulos. Luego automatice el proceso de compilación para copiar la carpeta dist del módulo ui en el módulo de servicio durante maven clean installsí mismo. De esta manera, podría tener un solo jar ejecutable que también sirva al angular. Por ejemplo, considere la siguiente estructura del proyecto:

SampleMultiModuleProject
 |__SampleMultiModuleService
 |__SampleMultiModuleUI

En este caso, tendrá tres archivos pom diferentes como los siguientes.

SampleMultiModuleProject main pom.xml: (donde están presentes todas las dependencias principales)

<modules>
    <module>SampleMultiModuleUI</module>
    <module>SampleMultiModuleService</module>
</modules>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.2.RELEASE</version>
    <relativePath/>
</parent>

// agrega el resto de las dependencias aquí.

Servicio SampleMultiModuleService pom.xml: (para el módulo de servicio y agregue el complemento springboot maven para que sea ejecutable con tomcat incorporado, y agregue otras dependencias que se necesitan en el módulo de servicio, por ejemplo, lombok)

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

y finalmente configure el módulo de interfaz de usuario para construir angular como SampleMultiModuleUI pom.xml:

<build>
    <plugins>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.9.1</version>
            <configuration>
                <workingDirectory>./</workingDirectory>
                <nodeVersion>v13.3.0</nodeVersion>
                <npmVersion>6.13.1</npmVersion>
                <nodeDownloadRoot>http://nodejs.org/dist/</nodeDownloadRoot>
                <npmDownloadRoot>http://registry.npmjs.org/npm/-/</npmDownloadRoot>
                <installDirectory>./</installDirectory>
                <npmInheritsProxyConfigFromMaven>false</npmInheritsProxyConfigFromMaven>
            </configuration>
            <executions>
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                </execution>
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                  <configuration>
                    <arguments>install</arguments>
                  </configuration>
                </execution>
                <execution>
                    <id>npm run-script build-prod</id>
                    <phase>prepare-package</phase>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>run-script build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>

</build>

Entonces, lo que sucede es que cuando realiza una instalación limpia de maven, activará la compilación del módulo de interfaz de usuario que, a su vez, usa el generador de frontend para instalar un npm local que ejecuta el comando especificado en los argumentos. El package.jsonarchivo en su aplicación angular contendrá por defecto algo como:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "stats": "webpack-bundle-analyzer dist/stats.json"
  },

Básicamente, está llamando a esto a ng build --prodtravés de este proceso. También angular.jsonestablezca output pathcomo carpeta de recursos debajo del módulo de servicio en su proyecto, para que los activos se creen allí.

  "newProjectRoot": "projects",
  "projects": {
    "SampleMultiModuleUI": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../SampleMultiModuleService/src/main/resources/static",
       //rest of the config
1
  • @ Mari090 He proporcionado una respuesta actualizada que incluye muestras. Ananthapadmanabhan 31/03/20 a las 3:58
0

como entiendo su pregunta, simplemente cree un nuevo archivo con el nombre proxy.config.jsony pegue el código a continuación en ese archivo, coloque el archivo junto a.angular-cli.json

{
  "/": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug"
  }
}

para presionar la URL al servidor backend, no use http://localhost:8080/administrationen su lugar use /administrationcomo usamos http://localhost:8080/en nuestro archivo proxy. en app.component.tsel lugar del archivo debajo del código enngOnInit()

this.http.get('/adminisitration',someRequestOption).subscribe(res =>{
  console.log('happy...!');
})

iniciar el servidor backend: (tomcat en el puerto 8080) y

Inicie el servidor frontend: ng serve --proxy-config proxy.config.jsonabra el navegador y escriba la URL; http://localhost:4200verá los registros en el servidor y el cliente, si los hay.

NOTA: los puertos anteriores son predeterminados según lo provisto por Spring Boot y angular 4

-2

Creo que la mejor manera es separar la aplicación angular 4 y la aplicación java spring.

En mi caso, la aplicación java spring es API que maneja todas las solicitudes de la aplicación angular 4 a través de proxy (proxy angular-cli -> fácil de configurar).

Aplicación Angular 4 en node.js, desarrollada en código de Visual Studio, y java Spring en Tomcat integrado (undertow) desarrollado en Eclipse. Pueden estar en servidores separados (por ejemplo, mi aplicación angular 4 está en localhost: 4200 mientras que la API de Java Spring está en http://mydomain.ch:8900 )

Si necesita más información, agregue un comentario.

Espero ayuda

PD. el proxy se maneja en el lado del cliente (aplicación angular 4) no en el lado del servidor (java spring)

1
  • La pregunta es sobre cómo integrar una aplicación Angular con una pila de arranque de primavera. Tu respuesta es la opuesta a lo que necesita. Andres Gardiol 27/07/20 a las 19:42