【问题标题】:Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'executions/190'错误:未捕获(承诺):错误:无法匹配任何路由。 URL 段:'executions/190'
【发布时间】:2018-09-21 11:50:01
【问题描述】:

我正在尝试模拟我的后端来开发前端,我正在使用库 expressjs 来做这件事。

我有一个名为 data.json 的文件,其中包含以下对象:

"singleExecutions":[
    {"executionId":190, "label":"exe_190"},
    {"executionId":191, "label":"exe_191"}, 
    ...]

我想路由 /executions/executionId 类型的请求,以获取列表 singleExecutions 中具有我需要的特定 ID 的相应对象。

阅读expressjs的文档,看来我应该这样做:

const express = require('express');
const data = require('./data');

// 1. Create an express router.
const router = express.Router();

// 2. Handle the requests.
router.get('/executions/:executionId', (req, res) => {
  res.json(data.singleExecutions);
});

// 3. Start the server.
mockBackend.start(router); 

注意:上面的一些变量(例如mockBackend)在代码sn-p中被跳过了,但是它们没问题,因为上面没有显示的其他请求被正确路由了。

当我浏览 url /executions/190(例如)时,我得到以下异常:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'executions/190'
Error: Cannot match any routes. URL Segment: 'executions/190'
    at ApplyRedirects.noMatchError (webpack-internal:///../../../router/esm5/router.js:1848)
    at CatchSubscriber.eval [as selector] (webpack-internal:///../../../router/esm5/router.js:1813)
    at CatchSubscriber.error (webpack-internal:///../../../../rxjs/_esm5/operators/catchError.js:108)
    at MapSubscriber.Subscriber._error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:136)
    at MapSubscriber.Subscriber.error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:110)
    at MapSubscriber.Subscriber._error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:136)
    at MapSubscriber.Subscriber.error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:110)
    at MapSubscriber.Subscriber._error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:136)
    at MapSubscriber.Subscriber.error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:110)
    at LastSubscriber.Subscriber._error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:136)
    at ApplyRedirects.noMatchError (webpack-internal:///../../../router/esm5/router.js:1848)
    at CatchSubscriber.eval [as selector] (webpack-internal:///../../../router/esm5/router.js:1813)
    at CatchSubscriber.error (webpack-internal:///../../../../rxjs/_esm5/operators/catchError.js:108)
    at MapSubscriber.Subscriber._error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:136)
    at MapSubscriber.Subscriber.error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:110)
    at MapSubscriber.Subscriber._error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:136)
    at MapSubscriber.Subscriber.error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:110)
    at MapSubscriber.Subscriber._error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:136)
    at MapSubscriber.Subscriber.error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:110)
    at LastSubscriber.Subscriber._error (webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:136)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:809)
    at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:775)
    at eval (webpack-internal:///../../../../zone.js/dist/zone.js:858)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:421)
    at Object.onInvokeTask (webpack-internal:///../../../core/esm5/core.js:4956)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:420)
    at Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:188)
    at drainMicroTaskQueue (webpack-internal:///../../../../zone.js/dist/zone.js:595)

我的router.get() 中肯定有一些错误配置,但我不明白是什么……谁能帮忙?

注意:在相同的代码中,如果我导航 GET 请求 /executions,它会被正确路由:

router.get('/executions', (req, res) => {
  res.json(data.executions);
}); 

...其余的都一样。

【问题讨论】:

  • 你用哪个网络服务器来做角边?
  • 这似乎是来自 Angular 路由器的错误,而不是表达。您似乎正在访问您的 Angular 应用程序,但在您的路由中没有匹配 /executions/190 的路由。通过浏览该 URL,您应该会收到 JSON 或服务器错误,而不是任何 JavaScript。如果您遇到 JavaScript 错误,则说明您在网页中

标签: angular typescript express angular-ui-router


【解决方案1】:

您必须区分角度路线和后端路线。对我来说,您似乎正在导航到与角度应用程序对应的主机/端口上的/executions/xxx。这个 executions 路由可能在 Angular 应用程序中不存在,因此为什么会出现错误

您需要导航到 nodejs 用于后端的主机/端口上的该路由。

假设您在 dev 中并使用 angular-cli,例如,您的 Angular 应用程序将在 localhost:4200 上,而您的后端将在 localhost:4000 上;所以你需要导航到http://localhost:4000/executions/xxx

如果您还使用 express 为 angular 应用程序提供服务,并且具有相同的主机/相同的端口,那么您需要确保在为 angular 注册路由之前在 express 中注册 /executions 路由。

【讨论】:

  • 你是对的,我只是用相对的 href 导航页面,因此我在 localhost:4200 而不是后端!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-08-22
  • 2019-10-14
  • 1970-01-01
  • 1970-01-01
  • 2022-11-10
  • 2022-01-09
  • 1970-01-01
相关资源
最近更新 更多