Các vấn đề với xử lý URL với Spring Boot và Angular 2

Question

Tôi đang cố gắng phát triển một ứng dụng với Spring Boot cho phần cuối và Angular 2 cho giao diện người dùng, sử dụng maven.

Mặt trước góc 2 nằm trong thư mục src/main/resources/static của dự án.

Khi tôi nhập URL http://localhost:8080/ trong trình duyệt của mình, tất cả đều ổn: Tôi có thể truy cập vào giao diện người dùng ở đầu góc 2 và giao diện người dùng có thể giao tiếp với phần còn lại hoàn hảo. Định tuyến 2 góc của tôi hoạt động tốt: khi tôi nhấp vào liên kết trên giao diện người dùng, tôi đi đúng trang và thanh url của trình duyệt hiển thị đúng nội dung (ví dụ: http://localhost:8080/documents)

Nhưng vấn đề là khi tôi cố gắng trực tiếp viết cùng một URL trong trình duyệt. Spring tiếp quản giao diện người dùng và nói rằng không có ánh xạ nào cho /documents.

Có cách nào để báo xuân khởi động để chỉ "nghe" đến /api/* URL và để "chuyển hướng" tất cả những người khác đến giao diện người dùng không?

Đây là mùa xuân khiển lớp học của tôi:

@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(); 
    } 

} 

Đây là lớp ứng dụng chính:

@SpringBootApplication 
public class Application { 

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

} 

Đây là app.route.ts tôi:

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, vì vậy tôi tìm thấy một giải pháp hoàn hảo tốt (đối với tôi, ít nhất): Tôi thay đổi vị trí của mình theo cách cũ của AngularJS 1.X, với # trong URL (I E. http://localhost:8080/#/documents).

Để có được hành vi này, tôi thay đổi bootstrap của tôi như

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

Hy vọng điều này điều này có thể giúp ai đó!