0

What I'm trying to do is to run frontend application together with Spring Boot backend.

The Angular application works correctly under localhost:4200 after using ng serve.

I tried using ng build --prod and then copying files from dist folder to src/main/resources/static. After that I used clean install to generate jar file and executed it with java -jar %filename.jar%.

The Spring Boot application seems to be starting correctly, the REST endpoints are available, however, when I'm trying to get the frontend view under localhost:8080, I am getting Whitelabel Error Page and No mapping for GET / information in the terminal.

Is it correct to assume, that if for example localhost:4200/products showed table with some products (ng serve approach), then localhost:8080/products (in jar approach) should display the same table? Or am I missing some step to achieve it?

I tried to use hash strategy, but it does not seem to change anything.

app-routing.module.ts:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'sign-up', component: SignUpComponent },
  { path: 'login', component: LoginComponent },
  { path: 'products', component: ProductsComponent }
];

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

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Application</title>
  <base href="#">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.cd71f88743b54f1de66b.css"></head>
<body>
  <app-root></app-root>
<script src="runtime.acf0dec4155e77772545.js" defer></script><script src="polyfills.3ea10c1644fbb8005130.js" defer></script><script src="scripts.a73844de5f291be94c3b.js" defer></script><script src="main.abbc3215607e4963f8f1.js" defer></script></body>
</html>
mar3g
  • 101
  • 1
  • 7
  • Welcome. Great job on providing details about what's the issue about. Seems like you could provide some more info like: where does your angular App live: (ie subroute /app/?) – Some random IT boy Dec 29 '20 at 18:24
  • You should try hitting your spring boot endpoint with postman first to ensure it is working correctly and you have the correct endpoint name – Austin Born Dec 29 '20 at 19:22
  • This error "No mapping for GET /" is point to an issue with either the mapping on the spring boot side from my understanding. Im not too savy in java but i do a lot of c#. – Austin Born Dec 29 '20 at 19:23
  • The REST endpoints work correctly, I am just not able to use the Angular endpoints for visual interface. – mar3g Dec 29 '20 at 19:27

2 Answers2

1

Is "/" the default GET URL you want to invoke? I suppose that you are able to go to the rest endpoints by directly pasting their GET URLs in the browser? If that is the case, can you check what URL you are seeing being invoked in browser network logs? if all this looks fine, it could be an issue with Angular routing. If you are using HashLocationStrategy, try to add in the head of your index.html file.

Rod Ramírez
  • 1,138
  • 11
  • 22
nishexperiments
  • 11
  • 1
  • I guess it could be problem related to routing, but I don't know where to fix it. Is it correct to assume, that if for example localhost:4200/products showed a table with some products (ng serve approach), then localhost:8080/products (in jar approach) should display the same table? Or am I missing some step to achieve it? – mar3g Dec 29 '20 at 19:18
0

What finally worked for me was removing @EnableWebMvc annotation from one of the configuration classes. Found answer here: https://stackoverflow.com/a/33852040/14908618

mar3g
  • 101
  • 1
  • 7