CODEWITHSUNDEEP
angularspring-boot
mar3g
mar3g

Reputation: 132

Angular project doesn't work with Spring Boot

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>

Upvotes: 0

Views: 2957

Answers (2)

nishexperiments
nishexperiments

Reputation: 11

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.

Upvotes: 1

mar3g
mar3g

Reputation: 132

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

Upvotes: 0

Related Questions