刷新后出现Whitelabel错误页面 [英] Whitelabel Error Page after refresh

问题描述

我有Spring Boot应用程序(后端)，对于前端，我正在使用Angular 2单页应用程序.

I have Spring Boot Application (backend) and for the Frontend I am using the Angular 2 Single Page Application.

每当我导航到某个路由时，例如:localhost:8080/getAccounts，并在导航刷新后执行一次操作，就会得到Whitelabel错误页面.如果我位于localhost:8080根目录下，则可以正常工作.该问题仅出现在子链接中.

Whenever I navigate to a route for example: localhost:8080/getAccounts and do after the navigation a refresh I get the Whitelabel Error Page. If I am at the root localhost:8080 I works fine. The problem only occurs in the sub links.

返回(使用返回/返回按钮)返回上一页也可以.只是刷新.

Returning (use the return/back button) to the previous page also works fine. Just the refresh.

我也不能直接调用链接:localhost:8080/getAccounts.首先，我必须转到Home(localhost:8080)并通过子导航栏调用页面.

I also can not call direct the link: localhost:8080/getAccounts. First I have to go to Home (localhost:8080) an call the page throug sub navigation bar.

有人有同样的问题吗?我必须改变什么特权.我的代码:

Does anybody had the same problem? What excalty I do have to change. My Code:

Main.ts

import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './components/app.component';
import {HTTP_PROVIDERS};
import {enableProdMode} from '@angular/core';

enableProdMode();
bootstrap(AppComponent, [HTTP_PROVIDERS]);

app.comonent:

app.comonent:

import { Component, OnInit } from '@angular/core';

import { Http } from '@angular/http';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

import { HomeComponent } from './home.component';
import { UserSearchComponent} from './webUserProfiles.component';
import { UserDetailViewComponent} from './webUserProfileView.component'; 

import { HTTPService } from '../service/http.service';


@Component({
  selector: 'app-content',
  templateUrl: './app/templates/app.component.html',
  directives: [ROUTER_DIRECTIVES, AccessErrorComponent],
  providers: [
    ROUTER_PROVIDERS,
    HTTPService
  ]
})

@RouteConfig([
  {
    path: '/',
    name: 'HomeComponent,
    useAsDefault: true
  },
  {
    path: '/user',
    name: 'UserSearch',
    component: UserSearchComponent,
  },
  {
    path: '/user/:id',
    name: 'UserDetailView',
    component: UserDetailViewComponent,
  }
])

export class AppComponent implements OnInit {
    constructor (
    ) { } 
}
}

预先感谢

推荐答案

经过一些研究，我从蒂埃里·坦佩(Thierry Templier)

使用默认的路由策略(HTML5历史API)，您需要服务器配置以将所有路径重定向到HTML入口点文件.使用hashbang方法是没有必要的...如果要切换到这种方法，只需使用以下代码:

With the default strategy (HTML5 history API) of routing, you need a server configuration to redirect all your paths to your HTML entry point file. With the hashbang approach it's not necessary... If you want to switch to this approach, simply use the following code:

import { bootstrap } from "angular2/platform/browser";
import { provide } from "angular2/core";
import {
  ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy
} from "angular2/router";

bootstrap(MainApp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass:HashLocationStrategy});
]);

您可以查看有关此问题的以下问题:

You could have a look at these questions about this issue:

• Web应用程序中的PathLocationStrategy与HashLocationStrategy
• 使用Angular 2的路由器时是否损坏HTML5路线?

• When I refresh my website I get a 404. This is with Angular2 and firebase
• PathLocationStrategy vs HashLocationStrategy in web apps
• Is Angular 2's Router broken when using HTML5 routes?

这篇关于刷新后出现Whitelabel错误页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！