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)
];

There is a way to listen /api/* only . For that you need to have a Filter. — sparrow
– sparrow, Commented Jul 27, 2016 at 12:18

Eric · Accepted Answer · 2016-07-30 18:36:18Z

2

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!

answered Jul 30, 2016 at 18:36

Eric

51510 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AndroidLover Over a year ago

Don't use the uglt hashtag notation ...just keep the HTML5 location strategy and redirect all your angular2's routes to the index.html file. Dont redirect all the routes as you will need them for your end points resources (the rest controllers).

Eric Over a year ago

How can I do the redirection?

AndroidLover Over a year ago

Eric please create a question and post the link so I can past some code.

Collectives™ on Stack Overflow

Problems with URL handling with Spring Boot and Angular 2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related