Angular 6 (Frontend) + Spring: Configuring Routing

Question

I've created a Spring project with Angular 6 (front-end) and Kotlin/Java (back-end). I followed JavaSampleApproach's tutorial (except, instead of Maven, I use Gradle).

On Angular, I followed Angular's routing guide. This is how I set up my routes:

const routes: Routes = [
  {path: 'clients', component: ClientsComponent},
  {path: 'scopes', component: ScopesComponent},
  {path: 'identity-providers', component: IdentityProvidersComponent},
  {path: 'diagnostics', component: DiagnosticsComponent},
  {path: '', redirectTo: '/clients', pathMatch: 'full'}
];

From there, I first run ng serve on port 8080, which works perfectly.

Then, I run ng build --prod, which builds it into the Spring project folder.

In my src/main/kotlin/com.example.myproject directory, I created a ViewController class based on @AndroidLover 's response:

package com.example.platformadmintool

import org.springframework.web.bind.annotation.RequestMapping
import org.springframework.web.bind.annotation.RestController

@RestController
class ViewController {

    @RequestMapping("/clients", "/scopes", "/identity-providers", "/diagnostics")
    fun routing() : String {
        return "forward:/index.html"
    }
}

(I do understand that @AndroidLover 's response was meant for Angular 2.)

When I run the gradle commands clean build bootRun, the front page loads when I type "http://localhost:8080". I am able to traverse to "http://localhost:8080/diagnostics" and other pages cleanly through clicking the navs.

However, if I explicitly type in the route, like "http://localhost:8080/clients", all the page displays is forward:/index.html in text form.

Obviously, the error is in my request mappings. I'm guessing it has to do with me returning a String, but most solutions online seem to use forward:/index.html.

I am not too familiar to with Spring and integrating it with Angular 6. How do I configure my routes to work also in Spring?

EDIT: Similar problem

score 0 · Answer 1 · answered Jul 13 '18 at 21:41

It seems to me you have a problem with static files like *.js or *.css. Try to open development tools in your browser (F12 in Chrome) and check what files send your bakend when you asks static files. Very likely your application returns always index.html instesd *.js or *.css. You have to configure your Java app such way that it returns static files if your GET request URL contains ".". For example (java code):

@RequestMapping(value = "/**/{[path:[^\\.]*}", method = RequestMethod.GET)
public String redirect() {
    return "forward:/";
}

Angular 6 (Frontend) + Spring: Configuring Routing

1 Answers1