Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'executions/190'

Question

I'm trying to mock my back-end to develop the front end, and I'm doing that using the library expressjs.

I have a file named data.json which contains objects like these:

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

I would like to route my requests of type /executions/executionId to get the corresponding object in the list singleExecutions having that specific Id I'm requiring.

Reading at the documentations of expressjs, it seems that I should do something like this:

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

Note: some variables above (such as mockBackend) are skipped in the code snippet, but they're ok since other requests not shown above are correctly routed.

When I navigate the url /executions/190 (for example), I get the below exception:

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)

There must definitely be something incorrectly configured in my router.get() but I can't understand what... can anyone please help?

Note: in the same code, if I navigate the GET request /executions, it is correctly routed by this:

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

... all the rest being the same.

Answer 1

You have to differentiate angular routes and backend routes. For me it looks like you are navigating to /executions/xxx on the host/port corresponding to angular app. This executions route probably does not exists on the angular app, hence why the error

You need to navigate to that route on the host/port used by nodejs for your back end.

Assuming you are in dev and using angular-cli, your angular app will be on localhost:4200 and your back end on localhost:4000 for instance; so you'd need to navigate to http://localhost:4000/executions/xxx

If you are also using express to serve the angular app, with the same host/same port, then you need to make sure you register the /executions route in express before registering the routes for angular.