如何使用Spring Boot在浏览器中点击URL来加载角度分量？

Question

我通过点击以下链接创建了angular客户端和spring boot服务器应用程序。 https://vitalflux.com/spring-boot-angular-app-hello-world-one-deployable-war/ https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/

在我的角度应用程序中，我定义了以下路线：

当我使用“ ng serve”启动角度开发服务器并在浏览器中的网址下方点击时，它工作正常。 http://localhost:4200/dashboard

但是，当我启动spring boot并在浏览器中单击下面的URL时，它不起作用并抛出错误。 http://localhost:8080/dashboard

我的要求是，当我在浏览器中单击带有角路由的URL时，我应该能够加载特定的角分量。 我的角度组件不需要从后端的rest API中获取任何数据，它是简单的角度组件。

有人可以建议如何解决此问题吗？

我是弹簧靴的新手，不知道如何使它与斜角路线配合使用。我尝试按照下面的链接进行操作，但对我来说，事情还不太清楚。

Spring Boot Angular application route from spring controller to angular component(view)

Spring Boot with AngularJS html5Mode

Angular routing doesn't work after deploy into a Springboot Application

Springboot/Angular2 - How to handle HTML5 urls?

How to integrate an Angular 4 app with a Spring Boot stack?

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

Spring Boot-Angular - Entering Url in Address Bar results in 404

Answer 1

要防止spring-boot应用程序解析角度路由，您可以添加ViewController来将路由重定向到angular应用程序，如Springboot/Angular2 - How to handle HTML5 urls?中所述。

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

使用ng generate component Dashboard创建的仪表板组件

根据pom.xml中定义的资源插件的要求，角度应用程序必须位于spring-boot项目之外。

| _ spring-boot

| _ angular-app

Answer 2

  

据我了解您的问题，只需创建一个名为   proxy.config.json并将以下代码粘贴到该文件中，然后将文件放在下一个   到.angular-cli.json

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

  

在app.component.ts文件中，位于ngOnInit（）中的代码下方

this.http.get('/dashboard',someRequestOption).subscribe(res =>{
 ---------------
})

Answer 3

我找到了答案。下面按预期工作。

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";
   }
}