时间戳

首页 > 解决方案 > 错误：未捕获（承诺）：错误：无法匹配任何路由。弹簧靴+角度

angular - 错误：未捕获（承诺）：错误：无法匹配任何路由。弹簧靴+角度

问题描述

我是 Angular 和 Spring Boot 的新手，我想开发一个 Web 应用程序。

我遵循了一个教程，现在我陷入了困境。教程链接：https ://developer.okta.com/blog/2018/08/22/basic-crud-angular-7-and-spring-boot-2?fbclid=IwAR2aR0Ku7oBhYM32zkxZGJXqStnRB1Lhg_K0pUO8XipZu2eiMs0ojikIY-Y

运行代码时，我从浏览器收到此错误。

我猜想网址不匹配。

这是来自 Spring 的代码：

报价控制器.java

@RestController
public class OfferController {

   @Autowired
   private OfferService offerService; 

   @CrossOrigin( origins= "http://localhost:4200" )
   @GetMapping("/offers")
   public List<Offer> getAllOffers() {
       return offerService.getAllOffers();
   }
}

OfferRepository.java

@RepositoryRestResource
@CrossOrigin(origins = "http://localhost:4200")

public interface OfferRepository extends JpaRepository<Offer, String>{}

以及来自 Angular 的代码：

export class OfferService {

   constructor( private http: HttpClient) { }

   getAll(): Observable<any> {
     return this.http.get('//localhost:8080/offers');
   }
}

错误是：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'offers'
Error: Cannot match any routes. URL Segment: 'offers'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
    at CatchSubscriber.selector (router.js:2450)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:16147)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

如果我没记错的话，它应该是这样工作的：当访问http://localhost:4200时，它应该从http://localhost:8080/offers返回数据。

请帮我！

标签： angularspring-boot

解决方案

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。URL 段：“提供”错误：无法匹配任何路由。URL 段：“优惠”在

您正在尝试访问/offersAngular 应用程序中某处的路线，但您还没有像这样定义：

const routes: Routes = [
  ...
  {
    path: 'offers',
    component: OffersComponent
  }
];

offers本教程中没有您指定的路线。

此外，解决此错误后，您将拥有另一个错误，因为使用 path 是不正确的//localhost:8080/offers for http.get。您需要像这样指定它：

getAll(): Observable<any> {
  return this.http.get('http//localhost:8080/offers');
}

推荐阅读