whitelabel error page 404 spring boot angular 5

Question

I'm working on a web application where my backend is spring boot and front end is angular 5 which is running on 4200 port. I've four components in angular 5 login,home application,search. when I started spring boot project and angular project I'm able to navigating login page by giving http://localhost:4200. So it is navigating to http://localhost:4200/login.

But when I refresh that page I'm getting this below error.

Here is my code :

proxy.conf.json

    {
    "/": {
        "target": "http://localhost:8081",
        "secure": false
    }
}

package.json:

 {  "name": "cyber-security-vw",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.5",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

Index.html

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CyberSecurityVw</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.component.html

<div align="center">
  <router-outlet></router-outlet>
</div>

app-routing.module.ts

import { ApplicationComponent } from './application/application.component';
import { NavigationComponent } from './navigation/navigation.component';
import { HomepageComponent } from './homepage/homepage.component';
import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';



const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomepageComponent },
  { path: 'application', component: ApplicationComponent },
  { path: 'navigation', component: NavigationComponent },
];

@NgModule({
  imports: [CommonModule, RouterModule.forRoot(routes)],
  exports: [RouterModule],
  declarations: []
})

export class AppRoutingModule { }

Spring boot main class

package com.vl.cybersecurity;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Configuration;

@Configuration
@EnableAutoConfiguration
@SpringBootApplication
public class CyberSecurityApplication {

    public static void main(String[] args) {
        SpringApplication.run(CyberSecurityApplication.class, args);
    }
}

Other packages :

com.vl.cybersecurity.controller     
com.vl.cybersecurity.entity
com.vl.cybersecurity.service
com.vl.cybersecurity.dao

can you please provide stacktrace from application when you are getting "whitelabel error page" ? — BigGinDaHouse, Feb 12 '18 at 07:06
have you deployed `dist` folder in spring-boot project? did you try to login through `postman`. — hrdkisback, Feb 12 '18 at 07:20
Yes I deployed dist folder files in src/main/resources/static folder. From postman It is working with 8080 port @hrdkisback — Moulali, Feb 12 '18 at 08:22
Please see this SO answer for a solution to the 404-on-refresh problem: https://stackoverflow.com/questions/44692781/configure-spring-boot-to-redirect-404-to-a-single-page-app — chrisinmtown, Aug 14 '19 at 18:31

score 2 · Answer 1 · answered May 03 '20 at 07:54

I also faced the same problem. Here is the solution which worked for me.

I enabled hash(#) in my app routing module.

How to Enable ?

Step 1: Open app-routing.module.ts Step 2: while adding routes in RouterModule.forRoot pass optional parameter useHash as true value.

 @NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
})

Step 3: Save the file. It should resolve this problem. Only different thing you will notice in url is hash(#) after your port no http://localhost:4800/#/dashboard

There is one more way to do the same thing, check this

score 0 · Answer 2 · answered Feb 21 '18 at 21:12

0

You need to redirect all "notFound" requests to "index.html". Look at this topic to solve your problem - link

answered Feb 21 '18 at 21:12

ZFi

41
7

Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – lealceldeiro Jun 08 '18 at 21:57

Karthik karnan · Answer 3 · 2019-07-28T16:23:36.973

Sorry guys might be I am too late to answer for this question. In my current web application development with (Angular 7 + Spring boot) i am also faced this same problem (white label error) while refreshing the page and also in one more scenario like copying the URL and paste in browser new tab.

Reason: We have to understand why this happening because when you refresh or copy and paste the URL what is happening actually the browsers doesn't know where to navigate the requested route/path because we all knew that our Angular application were deployed and it is running on the servers like tomcat etc... So the server doesn't know where to navigate the particular route request from the browser.So we have to say to the server somehow.

Solution: So I got an solution which is working fine for me after reading a lot i added the below code in my controller class.(*PIC 1) Which actually redirect the route request which is coming from browser to index.html from here onward Angular itself will handle the routing.So no more white label error will come.

My Controller class -(PIC 1)

One more thing you have to properly define the redirecting path to the index.html while building the Angular application we might have given the output directory folder path where all the TS file are converted into simple JS files.By default spring boot will look into the static folder.In my case i have done the same thing you can refer Line no:16 (output directory path) which I gave in angular.json(*PIC 2) file in my angular App. While building the angular app the static folder will create automatically under the resources folder.Inside the static folder the index.html file will be generated automatically.

My angular.json file-(PIC 2)

Hope it will helpful for you/someone. Thanks guys.

Can you brief your explanation , I didn't get it @Karthik Karnan — Thakkar Darshan, Mar 18 '20 at 07:17
@Thakkar Darshan Actually what I trying to say is you need to forward all the request(directly from the browser not through by clicking any routing links) to index.html which will be generated in the output directory once the Angular application builds successfully.I hope that you understand something.If not please feel free to ask. — Karthik karnan, Mar 19 '20 at 17:56

whitelabel error page 404 spring boot angular 5

3 Answers3