Saltar al contenido

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

Te sugerimos que revises esta respuesta en un entorno controlado antes de pasarlo a producción, saludos.

Solución:

Tendría que crear su aplicación ng y colocarla en la carpeta spring-boot:

  1. Cree una carpeta pública en recursos en su proyecto de arranque de primavera

  2. ng build --prodescriba 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 una carpeta pública bajo los recursos de su proyecto de arranque de primavera.

Esto lo ayudará a ejecutar su aplicación angular bajo spring-boot.

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

Hay dos formas: la primera es que sirve la aplicación angular desde su aplicación de arranque de primavera como static recursos, por lo que debe empaquetarlo en un contenedor y eso no es fácil cuando tiene dos repositorios diferentes para frontend y backend y no se ve muy bien desde el punto de vista del mantenimiento.

La segunda es que tienes angular static Los recursos en nginx y la aplicación Spring Boot son accesibles para angular a través del proxy inverso configurado en nginx como

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

Así que cuando angular pide GET http://localhost/api/somerest lo reenvía a GET http://localhost:8080/api/somerest

La forma más fácil de servir un front-end angular desde una aplicación de arranque de 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 al módulo de servicio durante maven clean install en sí mismo. De esta manera, podría tener un único jar ejecutable que también sirva para angular. Por ejemplo, considere la siguiente estructura de proyecto:

SampleMultiModuleProject
 |__SampleMultiModuleService
 |__SampleMultiModuleUI

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

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


    SampleMultiModuleUI
    SampleMultiModuleService



    org.springframework.boot
    spring-boot-starter-parent
    2.2.2.RELEASE
    

//agregue 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)


    
        
            org.springframework.boot
            spring-boot-maven-plugin
        
    

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


    
        
            com.github.eirslett
            frontend-maven-plugin
            1.9.1
            
                ./
                v13.3.0
                6.13.1
                http://nodejs.org/dist/
                http://registry.npmjs.org/npm/-/
                ./
                false
            
            
                
                    install node and npm
                    
                        install-node-and-npm
                    
                    generate-resources
                
                
                    npm install
                    
                        npm
                    
                    generate-resources
                  
                    install
                  
                
                
                    npm run-script build-prod
                    prepare-package
                    
                        npm
                    
                    
                        run-script build
                    
                
            
        
    


Entonces, lo que sucede es que cuando realiza una instalación limpia de maven, activará la compilación del módulo ui que, a su vez, usa el generador de interfaz para instalar un npm local que ejecuta el comando especificado en los argumentos. los package.json archivo en su aplicación angular por defecto contendrá 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"
  ,

Así que esencialmente estás llamando a esto ng build --prod a través de este proceso. También en angular.json selecciona el output path como la carpeta de recursos bajo el 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

Reseñas y puntuaciones

Más adelante puedes encontrar las acotaciones de otros gestores de proyectos, tú asimismo tienes la opción de insertar el tuyo si te gusta.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *