Angular 6（前端）+ Spring：配置路由

Posted 2023-02-27

【中文标题】Angular 6（前端）+ Spring：配置路由

【英文标题】：Angular 6 (Frontend) + Spring: Configuring Routing

【发布时间】：2018-12-22 06:55:08

【问题描述】：

我使用 Angular 6（前端）和 Kotlin/Java（后端）创建了一个 Spring 项目。我关注了JavaSampleApproach's tutorial（除了我使用 Gradle 而不是 Maven）。

在 Angular 上，我关注了 Angular's routing guide。这就是我设置路线的方式：

const routes: Routes = [
  path: 'clients', component: ClientsComponent,
  path: 'scopes', component: ScopesComponent,
  path: 'identity-providers', component: IdentityProvidersComponent,
  path: 'diagnostics', component: DiagnosticsComponent,
  path: '', redirectTo: '/clients', pathMatch: 'full'
];

从那里，我首先在端口 8080 上运行 ng serve，它运行良好。

然后，我运行 ng build --prod，它将其构建到 Spring 项目文件夹中。

在我的src/main/kotlin/com.example.myproject 目录中，我创建了一个基于@androidLover 's response 的ViewController 类：

package com.example.platformadmintool

import org.springframework.web.bind.annotation.RequestMapping
import org.springframework.web.bind.annotation.RestController

@RestController
class ViewController 

    @RequestMapping("/clients", "/scopes", "/identity-providers", "/diagnostics")
    fun routing() : String 
        return "forward:/index.html"
    

（我明白 @AndroidLover 的回复是针对 Angular 2 的。）

当我运行 gradle 命令clean build bootRun 时，当我输入“http://localhost:8080”时，首页会加载。我可以通过单击导航干净地遍历“http://localhost:8080/diagnostics”和其他页面。

但是，如果我明确输入路线，例如“http://localhost:8080/clients”，则所有页面显示为文本形式的forward:/index.html。

显然，错误出现在我的请求映射中。我猜这与我返回一个字符串有关，但大多数在线解决方案似乎都使​​用forward:/index.html。

我不太熟悉 Spring 并将其与 Angular 6 集成。如何配置我的路由以在 Spring 中也能工作？

编辑：Similar problem

【参考方案1】：

在我看来，您对 *.js 或 *.css 等静态文件有疑问。尝试在您的浏览器中打开开发工具（Chrome 中的 F12）并检查当您询问静态文件时哪些文件会发送给您。您的应用程序很可能总是返回 index.html instesd *.js 或 *.css。 如果您的 GET 请求 URL 包含“.”，您必须配置您的 Java 应用程序，使其返回静态文件。例如（java代码）：

@RequestMapping(value = "/**/[path:[^\\.]*", method = RequestMethod.GET)
public String redirect() 
    return "forward:/";