java - 刷新后的Whitelabel错误页面

Question

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

每当我导航到路线(例如:localhost:8080/getAccounts)并在导航后刷新时，我都会收到 Whitelabel 错误页面。如果我位于根 localhost:8080 ，我工作得很好。该问题仅出现在子链接中。

返回(使用返回/后退按钮)到上一页也可以正常工作。只是刷新。

我也无法直接调用链接:localhost:8080/getAccounts。首先，我必须转到主页(localhost:8080)并通过子导航栏调用页面。

有人遇到同样的问题吗？我确实必须改变。我的代码:

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]);

应用程序组件:

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

提前致谢

Answer 1

经过一些研究，我从 Thierry Templier 找到了这个非常好的答案。

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:

• 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?