刷新时，Angular Html5Mode PlayFramework会提供404 [英] Angular Html5Mode PlayFramework gives 404 when refreshed

问题描述

我正在设置Play Framework 2.5服务器以使用Angular的SPA(单页应用)方法，并希望使用PathLocationStrategy删除HashTags(#example)

I am setting up a Play Framework 2.5 server to use Angular's SPA(single page App) approach and would like to use PathLocationStrategy that removes the HashTags(#example)

当我第一次点击服务器时，页面加载正常，但是如果我在将其添加书签后刷新或返回，则会显示404

The page loads fine when I first hit the server, but if I refresh or come back after bookmarking it, gives 404

在Angular Angular Router的文档中指出需要服务器端配置

In the Angular documentation for Angular Router it states that server side configuration is required

关于如何使用nginx或apache执行此操作的信息很多，但是在没有代理infront的情况下如何在Play中做到这一点?

There's lots of info on how to do this using nginx or apache but how does one do it in Play without a proxy infront?

这是我的角形路由器配置:

Here's my angular router configuration:

const routes: Routes = [
    {
        path: 'main',
        component: JobsComponent
    },
    {
        path: 'job-details',
        component: JobDetailsComponent
    },
    {
        path: 'job-submit',
        component: JobSubmitComponent
    },
    {
        path: '',
        redirectTo: '/main',
        pathMatch: 'full'
    },
    {
        path: '**',
        redirectTo: '/main',
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: []
})
export class AppRoutingModule { }

播放routes.conf

GET     /    controllers.Assets.at(path="/public", file="index.html")

推荐答案

发生的事情是，当angular将URL栏更改为/main时，您的服务器就没有参与.如果按刷新，浏览器将请求/main，但找不到.

What's happening is when angular changes the URL bar to /main, your server is not involved. If you press refresh, the browser will request /main which it will not find.

您最好的方法是制作一条将捕获所需路由的路由，然后将其发送回索引.这是一个例子

Your best approach is to make a route that will catch the desired routes and have it send it back to the index. Here's an example

根据播放2.5文档，也可以是正则表达式

# Place at the bottom of your routes.conf to be checked last
GET     /*anyUrl     controllers.CatchAllController.catchAll(anyUrl)

做控制器

package controllers

import play.api.mvc.{Action, Controller}

import scala.concurrent.ExecutionContext.Implicits.global

class CatchAllController extends Controller{
    def catchAll(anyUrl: String) = Action.async { request =>
        Assets.at("/public", "index.html").apply(request)
    }
}

所有链接/刷新均应按预期工作，无需代理

All links/refreshes should work as intended, no proxy required

这篇关于刷新时，Angular Html5Mode PlayFramework会提供404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！