Problems with URL handling with Spring Boot and Angular 2

Question

I am trying to develop an application with Spring Boot for the back end and Angular 2 for the front end, using maven.

The angular 2 front end is in the src/main/resources/static dir of the project.

When I enter the http://localhost:8080/ URL in my browser, all is fine: I can access the angular 2 front end, and the front end can communicate with the rest api perfectly. My angular 2 routing works fine: when I click on a link on the front end, I go the right page and the browser url bar shows the right things (ie. http://localhost:8080/documents)

But the problem is when I try to directly write the same URL in the browser. Spring take over the front end and says the is no mapping for /documents.

Is there a way to tell spring boot to only "listen" to /api/* URL and to "redirect" all the others to the front end?

Here is my Spring Controller class:

@RestController
@RequestMapping("/api")
public class MyRestController {

    @Autowired
    private DocumentsRepository documentRepository;

    @CrossOrigin(origins = "*")
    @RequestMapping(value = "/documents/list",
            method = RequestMethod.GET,
            produces = "application/json")
    public Iterable<RfDoc> findAllDocuments() {
        return documentRepository.findAll();
    }

}

Here is the main application class:

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

Here is my app.route.ts:

import { provideRouter, RouterConfig }  from '@angular/router';
import { DocumentComponent } from './doc.component';  

const routes: RouterConfig = [
    {
        path: '',
        redirectTo: 'documents',
        pathMatch: 'full'
    },
    {
        path: "documents",
        component: DocumentComponent
    }
];

export const appRouterProviders = [
    provideRouter(routes)
];

Answer 1

Ok, so I found a perfectly fine solution (for me, at least): I change my location for the old AngularJS 1.X way, with the # in the URL (i.e. http://localhost:8080/#/documents ).

To obtain this behaviour, I change my bootstrap like this

import { bootstrap }      from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent }         from './app.component';
import { appRouterProviders }   from './app.routes';
import { AuthService }          from './auth.service';

bootstrap(AppComponent, [AuthService,
    appRouterProviders,
    HTTP_PROVIDERS,
    { provide: LocationStrategy, useClass: HashLocationStrategy }
]);

Hope this can help somebody!