刷新后的白标错误页面 [英] Whitelabel Error Page after refresh

问题描述

我有 Spring Boot 应用程序(后端)，而前端我使用的是 Angular 2 单页应用程序.

每当我导航到一条路线时，例如:localhost:8080/getAccounts 并在导航后刷新我得到白标签错误页面.如果我在根 localhost:8080 我工作正常.问题只出现在子链接中.

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

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

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

Main.ts

import {bootstrap} from '@angular/platform-b​​rowser-dynamic';从'./components/app.component'导入{AppComponent}；导入 {HTTP_PROVIDERS};从@angular/core"导入{enableProdMode}；enableProdMode();引导程序(AppComponent，[HTTP_PROVIDERS])；

app.comonent:

import { Component, OnInit } from '@angular/core';从 '@angular/http' 导入 { Http };从@angular/router-deprecated"导入 { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS };从 './home.component' 导入 { HomeComponent };从 './webUserProfiles.component' 导入 { UserSearchComponent};从 './webUserProfileView.component' 导入 { UserDetailViewComponent};从 '../service/http.service' 导入 { HTTPService };@成分({选择器:'应用程序内容'，templateUrl: './app/templates/app.component.html',指令:[ROUTER_DIRECTIVES，AccessErrorComponent]，供应商: [ROUTER_PROVIDERS,HTTP服务]})@RouteConfig([{小路: '/'，name: 'HomeComponent,useAsDefault: 真},{路径:'/用户'，name: '用户搜索',组件:用户搜索组件，},{路径:'/user/:id',name: 'UserDetailView',组件:UserDetailViewComponent，}])导出类 AppComponent 实现 OnInit {构造函数() { }}}

提前致谢

解决方案

经过一些研究，我从 找到了这个很好的答案蒂埃里·坦利尔

<块引用>

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

import { bootstrap } from "angular2/platform/browser";从angular2/core"导入{提供}；进口 {ROUTER_PROVIDERS、LocationStrategy、HashLocationStrategy来自angular2/路由器"；引导程序(主应用程序，[ROUTER_PROVIDERS,提供(位置策略，{useClass:HashLocationStrategy})；]);

<块引用>

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

• 当我刷新我的网站时，我得到一个 404.这是使用 Angular2 和 firebase
• 网络应用中的PathLocationStrategy vs HashLocationStrategy
• Angular 2 的路由器在使用时是否损坏HTML5 路由?

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

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.

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:

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

Thanks in advance

解决方案

After some researches, i found this pretty good answer from 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?

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