¿Cómo cargar el componente angular presionando la URL en el navegador mientras se usa Spring Boot?

1

He creado el cliente angular y la aplicación de servidor de arranque de primavera siguiendo los enlaces a continuación. https://vitalflux.com/spring-boot-angular-app-hello-world-one-deployable-war/ https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/

En mi aplicación angular, he definido rutas de la siguiente manera:

ingrese la descripción de la imagen aquí

Funciona bien cuando inicio el servidor de desarrollo angular usando "ng serve" y presiono debajo de la URL en el navegador. http: // localhost: 4200 / tablero

Sin embargo, cuando inicio el arranque de primavera y luego presiono la siguiente URL en el navegador, no funciona y arroja un error. http: // localhost: 8080 / tablero

ingrese la descripción de la imagen aquí

Mi requisito es que cuando accedo a la URL con la ruta angular en el navegador, debería poder cargar el componente angular específico. Mi componente angular no necesita obtener ningún dato de la API de descanso del backend y es un componente angular simple.

¿Alguien puede sugerir cómo solucionar este problema?

Soy nuevo en Spring Boot y no estoy seguro de cómo hacer que esto funcione con rutas angulares. He intentado seguir los enlaces a continuación y las cosas no me quedan muy claras.

Ruta de la aplicación Spring Boot Angular desde el controlador de resorte hasta el componente angular (ver)

Spring Boot con AngularJS html5Mode

El enrutamiento angular no funciona después de implementarlo en una aplicación Springboot

Springboot / Angular2 - ¿Cómo manejar las URL HTML5?

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

https://blog.jdriven.com/2016/10/integrate-angular-spring-boot-gradle/#support-angular-html5-mode

Spring Boot-Angular: ingresar URL en la barra de direcciones da como resultado 404

3
  • stackoverflow.com/questions/38516667/… funciona como un encanto. Puede que tenga que compartir algún código. chriopp 19 oct 2018 a las 11:30
  • ¡Gracias! Déjame comprobar dónde me he equivocado. Jyoti Prasad Pal 19/10/18 a las 17:06
  • Hola, agregué toda la información esencial para el ejemplo en ejecución a mi respuesta, pero demasiado tarde ...chriopp 19/10/18 a las 18:58
1

Encontré una respuesta. A continuación funciona como se esperaba.

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ViewController {

   @RequestMapping({ "/dashboard", "/contacts" })   
   public String index() {
       return "forward:/index.html";
   }
}
0

as i understand your question just create new file named proxy.config.json and paste below code in that file, place file next to .angular-cli.json

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

in app.component.ts file place below code in ngOnInit()

this.http.get('/dashboard',someRequestOption).subscribe(res =>{
 ---------------
})
1
  • Si hay muchos componentes, como el panel de control, que deben cargarse presionando la URL en el navegador, ¿funcionará? Jyoti Prasad Pal 19/10/18 a las 17:08
0

Para evitar que la aplicación spring-boot resuelva sus rutas angulares, puede agregar una ViewControllerpara redirigir las rutas a la aplicación angular como se explica en Springboot / Angular2 - ¿Cómo manejar las URL HTML5? .

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ViewController {

   @RequestMapping({ "/dashboard" })
   public String index() {
       return "forward:/index.html";
   }
}

Angular5 app.module.js

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const appRoutes: Routes = [{
  path: 'dashboard',
  component: DashboardComponent
}]

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true },
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Componente de tablero creado con ng generate component Dashboard

La aplicación angular debe ubicarse además del proyecto spring-boot según lo solicitado por el complemento de recursos definido en pom.xml.

| _ bota-resorte

| _ aplicación angular

5
  • No, la etiqueta <router-outlet> está presente en mi app.component.html. Necesito cargar presionando la URL en el navegador y no haciendo clic en algún enlace. Jyoti Prasad Pal 19/10/18 a las 10:46
  • Ok, eso es otro asunto. chriopp 19/10/2018 a las 10:54
  • Se agregaron medios para evitar que spring-boot resuelva sus rutas angulares. chriopp 19/10/2018 a las 11:07
  • ¿Qué quiere decir con "Medios agregados para evitar el arranque por resorte"? Jyoti Prasad Pal 20 oct 2018 a las 14:35
  • Mi respuesta llegó demasiado tarde, ya tenías la solución para ese momento. Significaba que sin la redirección del ViewController spring-boot intentó resolver la URL ´ / dashboard`. chriopp 20 oct 2018 a las 15:11