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

Question

我是 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 的代码：

OfferController .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 返回数据。

请帮帮我！

Answer 1

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

您正试图在您的 Angular 应用程序中的某处访问 /offers 路由，但您还没有像这样定义：

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

本教程tutorial 中没有路由offers，您已指定。

另外，在解决了这个错误之后，你会有另一个错误，因为使用路径//localhost:8080/offersfor http.get是不对的。您需要像这样指定它：

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