1

I've created angular client and spring boot server app by following below links. https://vitalflux.com/spring-boot-angular-app-hello-world-one-deployable-war/ https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/

In my angular application, I've defined routes as below:

enter image description here

It works fine when I start angular development server using "ng serve" and hit below url in browser. http://localhost:4200/dashboard

However, when I start spring boot and then hit the below URL in browser, it does not work and throws error. http://localhost:8080/dashboard

enter image description here

My requirement is that when I hit the URL with angular route in browser, I should be able to load the specific angular component. My angular component doesn't need to get any data from rest API from backend and it is simple angular component.

Can someone please suggest how to fix this?

I'm new to spring boot and not sure how to make this working with angular routes. I've tried to follow below links and things are not very clear to me.

Spring Boot Angular application route from spring controller to angular component(view)

Spring Boot with AngularJS html5Mode

Angular routing doesn't work after deploy into a Springboot Application

Springboot/Angular2 - How to handle HTML5 urls?

How to integrate an Angular 4 app with a Spring Boot stack?

https://blog.jdriven.com/2016/10/integrate-angular-spring-boot-gradle/#support-angular-html5-mode

Spring Boot-Angular - Entering Url in Address Bar results in 404

3
  • stackoverflow.com/questions/38516667/… works like a charm. You may have to share some code. Commented Oct 19, 2018 at 11:30
  • Thanks! Let me check where I've got wrong. Commented Oct 19, 2018 at 17:06
  • Hi, I added all essential information for the running example to my answer, but too late ... Commented Oct 19, 2018 at 18:58

3 Answers 3

1

I've found an answer. Below works as expected.

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ViewController {

   @RequestMapping({ "/dashboard", "/contacts" })   
   public String index() {
       return "forward:/index.html";
   }
}
Sign up to request clarification or add additional context in comments.

Comments

0

as i understand your question just create new file named proxy.config.json and paste below code in that file, place file next to .angular-cli.json

{
  "/": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug"
  }
}

in app.component.ts file place below code in ngOnInit()

this.http.get('/dashboard',someRequestOption).subscribe(res =>{
 ---------------
})

1 Comment

If there are many components such as dashboard which need to be loaded by hitting url in browser, will it work?
0

To prevent the spring-boot application from resolving your angular routes you can add a ViewController to redirect the routes to the angular application as explained in Springboot/Angular2 - How to handle HTML5 urls?.

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ViewController {

   @RequestMapping({ "/dashboard" })
   public String index() {
       return "forward:/index.html";
   }
}

Angular5 app.module.js

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const appRoutes: Routes = [{
  path: 'dashboard',
  component: DashboardComponent
}]

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true },
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dashboard component as created with ng generate component Dashboard

The angular application must be located besides the spring-boot project as requested by the resource plugin defined in the pom.xml.

|_ spring-boot

|_ angular-app

5 Comments

No, <router-outlet> tag is present in my app.component.html. I need to load by hitting the url in browser and not by clicking on some link.
Ok, that is another matter.
Added means to prevent spring-boot from resolving your angular routes.
What do you mean by "Added means to prevent spring-boot"?
My answer just came too late, you already had the solution by the time. It meant without the redirection by the ViewController spring-boot tried to resolve the ´/dashboard` URL.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.