title: whitelabel error page 404 spring boot angular 5
body: <p>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 <code>http://localhost:4200</code>. So it is navigating to <code>http://localhost:4200/login</code>.</p>
  
  <p>But when I refresh that page I'm getting this below error. 
  <a href="https://i.stack.imgur.com/g5drE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g5drE.png" alt="enter image description here"></a></p>
  
  <p>Here is my code :</p>
  
  <p>proxy.conf.json</p>
  
  <pre><code>    {
      "/": {
          "target": "http://localhost:8081",
          "secure": false
      }
  }
  </code></pre>
  
  <p>package.json:</p>
  
  <pre><code> {  "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"
    }
  }
  </code></pre>
  
  <p>Index.html</p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;CyberSecurityVw&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div align="center"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app-routing.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>Spring boot main class</p>
  
  <pre><code>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);
      }
  }
  </code></pre>
  
  <p>Other packages :</p>
  
  <pre><code>com.vl.cybersecurity.controller     
  com.vl.cybersecurity.entity
  com.vl.cybersecurity.service
  com.vl.cybersecurity.dao
  </code></pre>