问题描述
我正在设置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
# 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!