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
3 answers
solution1
2 2020-05-03 07:54:32
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
solution2
0 2018-02-21 21:12:47
You need to redirect all "notFound" requests to "index.html". Look at this topic to solve your problem - link
solution3
0 2019-07-28 16:12:25
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.
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.
Hope it will helpful for you/someone. Thanks guys.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.