trap trap - 1 year ago 272
Java Question

Whitelabel Error Page after refresh

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:


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

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';

selector: 'app-content',
templateUrl: './app/templates/app.component.html',
directives: [ROUTER_DIRECTIVES, AccessErrorComponent],
providers: [

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

Answer Source

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, [
  provide(LocationStrategy, {useClass:HashLocationStrategy});

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