How to set up Angular 2 + Spring routing?

Question

JavaScript

Good day everyone! Having made Angular 2 friends with Spring, I ran into a routing problem, and I had a few questions: It is
necessary that for all requests to the server it returns index.html, i.e. my start page. And then Angular itself "resolved" everything. Angular communicates with my server via /api. But I'm sure that I don't fully understand all the sections of my chain, because everything simply doesn't work the way I want =) Below I will give the code and what I think it should do:
Through the address bar, I enter the address of my site ( in this case it is spinning on my local machine : localhost:8080/). Next, the controller processes the request:
In theory, in this case, index.html will be returned for any request, unless the request consists of several "/", I mean: /smth/veryusefullinformation. In this case, the request should not be processed by this controller.

@RequestMapping(value = "/**", method = RequestMethod.GET)
    public String welcome() {       
        return "views/index.html";

But, so that I do not enter after "/" I will get a 404 error. If I mean localhost:8080 , then everything is correctly returned.
I also tried to solve this problem in the following way, but this also does not help:

@RequestMapping(value = "/{value}", method = RequestMethod.GET)
  public String welcome(@PathVariable("value") String value) {
        if (value instanceof String)
            return "views/index.html";
            else return "views/index.html";
  }

For the sake of completeness, I will show how I render submissions. I didn’t set up the ViewResolver, because I realized that a static page can be given simply by defining the resources (Maybe this is where my delusion lies):

@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("/");
    }

Even if the question above is solved, but how then does this routing work in Angular? After all, if I mean the address: localhost:8080/catalog/toys/pinkunicorn , then for everything to work correctly, the server must return index.html and, most likely, save the Url on top so that Angular can render everything up to the required place in the directory. I understand that my reasoning may be stupid, but in the body of the answer, I did not find a clue. I note that in order not to attribute all the time after localhost:8080/# , I have indicated in html: . And here is the topmost level of Angular:

import {Component} from "angular2/core";
import {ROUTER_DIRECTIVES} from "angular2/router";
import {RouteConfig} from "angular2/router";
import {SiteRoot} from "./site/siteRoot.component";
import {AdminPanelRoot} from "./adminPanel/adminPanelRoot.component";

@Component({
    selector: 'root-app',
    template: `
        <a [routerLink]="['/SiteRoot']">Site</a>
        <a [routerLink]="['/AdminPanelRoot']">Admin</a>
        <router-outlet></router-outlet>

        `,
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: "/site", name: "SiteRoot", component: SiteRoot,useAsDefault: true},
    {path: "/administrationPanel", name: "AdminPanelRoot", component: AdminPanelRoot}
])
export  class AppComponent{

}

Links are navigated correctly, requests to the /administrationPanel address bar throw a 404 error, but if you go to localhost:8080/#/administrationPanel , then the SiteRoot view is displayed , not the AdminPanelRoot view
. And there is one more problem: all my requests will be intercepted by the controller: "/**", in theory it should be so, how then to access the api, through api/smth?
Many thanks to everyone for your attention!

Answer 1

Maybe I didn't understand something... But all static resources (HTML, CSS, JS + img, etc.) in RESTful architecture are processed by a proxy server - nginx for example. That is, your proxy server gives static pages with Angular and JS code, and Angular already communicates with the server on Spring