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

错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL段：“提供”错误：无法匹配任何路由。网址段：“提供”于

您正尝试在您的角度应用程序中的某处访问/offers路线，但是您没有这样定义：

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

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

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

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

错误：未捕获（承诺）：错误：无法匹配任何路由。春季靴+ Angular

1 个答案: