An issue occurred: Promise was not caught and resulted in an error stating that no routes can be matched for the URL segment 'executions/190'

My current project involves developing the front end by mocking the back-end using the expressjs library.

Within my project, I have a file called data.json which stores objects like the following:

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

The goal is to route requests of the type /executions/executionId to retrieve the specific object from the singleExecutions list based on the requested Id. To achieve this, after consulting the expressjs documentation, it seems that I need to do something along these lines:

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

It's worth noting that certain variables used in the above code snippet, such as mockBackend, are defined elsewhere in the application and work correctly with other requests not shown here.

However, when I try to access the URL /executions/190 (for example), I encounter the following 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)
    ...

It appears there may be a misconfiguration within my router.get() method, but I'm struggling to identify the issue. Can anyone provide assistance?

Additionally, within the same codebase, if I navigate to the GET request /executions, it is successfully routed as follows:

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

...with all other aspects remaining unchanged.

Answer №1

To successfully navigate between angular routes and backend routes, it is important to understand the distinction between the two. If you find yourself trying to access a route like /executions/xxx on the host/port associated with your angular app, you may encounter an error if this particular route does not exist within the angular application.

In order to resolve this issue, ensure that you are navigating to the correct route on the host/port utilized by Node.js for your backend services.

If you are working in a development environment and utilizing angular-cli, your angular app will typically be running on localhost:4200, while your backend services may be hosted on localhost:4000. Therefore, you should aim to access the desired route by visiting

http://localhost:4000/executions/xxx

In cases where both angular and express are being used together, and they are being served from the same host and port, it is crucial to first define the necessary routes in express before configuring any routing for the angular app.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on setting messages in Express API and accessing them in a React Native application

I've been working on sending data from a React Native app to an Express API, storing it in MongoDB, and then retrieving the message back to the React Native app. Here are the methods I've tried: 1st Method App.js var inputData = { "email": ...

Issue: Unable to execute UserModel.create as a function

When working with mongoose to create a new document within my POST Route handler, I am facing an issue. My routes are defined using express.Router in the index.js file: index.js const express = require('express'); const app = express(); const us ...

Is it possible to trigger the setState() function of a parent component when a child component is clicked?

Hey there, I'm a new developer diving into the world of Reactjs. I've been working on setting up a Todo app but struggling to configure it just right. My main challenge is getting a button to add items to the list when submitted. I think I'm ...

Is there a specific type of function missing in Typescript?

I am facing a challenge in converting an existing JavaScript code to Typescript. The original javascript code is as follows: object.getsomething( function(err, result) { // async }); I am confused about how to properly type the parameter "function(er ...

Mobile devices experiencing navigation bar toggle issue

I've created this code for the navigation bar, but I'm having an issue with the hamburger icon not working on small devices. The icon is visible, but nothing happens when I try to click it. <nav class="navbar navbar-expand-lg navbar-dark ...

Which is more efficient for optimizing code: Typescript compiler or ES2015?

When it comes to compiler optimization in other programming languages, a similar scenario would involve pulling out certain objects from the loop to avoid creating them each time: const arr = [1, 2, 3, 4, 5] arr.map(num => { const one_time = 5; / ...

Using template references in ViewChildren

I'm facing an issue trying to utilize ViewChildren to create a QueryList from TemplateRef, but I am unable to pass it to the input component. For instance: Component.ts: @ViewChildren(TemplateRef) cellTemplates: QueryList<TemplateRef<any>& ...

passportjs Error: User.authenticate method is undefined

I'm currently in the process of developing a small nodejs, express, mongodb application with authentication using passport-local and passport-local-mongoose. However, I've encountered an error when implementing the middleware for passport in the ...

What is the process for setting a push key while pushing data to a Firebase database?

When writing data to the Firebase database using both Angular 4 on the frontend and Firebase functions on the backend, a unique push key is generated by Firebase. This key makes it difficult to access the data in the future. I am curious if there is a way ...

What is the best way to integrate ag-grid with Observable in Angular 2?

After conducting extensive research on the Internet, I am still struggling to connect the pieces. My angular2 application utilizes an Observable data source from HTTP and I am attempting to integrate ag-grid. However, all I see is a loading screen instead ...

How to detach functions in JavaScript while preserving their context?

Can functions in JavaScript be detached while still retaining access to their context? For instance, let's say we have an instance of ViewportScroller called vc. We can retrieve the current scroll position with the following method: vc.getScrollPosi ...

How to link external css files in a Node.js project

Can I add an external CSS file in node.js using EJS? I attempted to do so, but encountered difficulties: app.use('/static', express.static('/view')) I included the CSS in EJS like this: <link rel="stylesheet" type="text/css" href ...

A different approach to showcasing components in SvelteKit based on the width of the screen

In my SvelteKit app, I'm using this code to retrieve the current window size and switch the displayed component when the width is small: <script> let size; </script> <svelte:window bind:innerwidth{size}/> <div> {#if size &g ...

How can I search for all documents in MongoDB that do not contain a specific text in a particular field?

Let's say we have the following array of documents: [ {name: 'john'},{name: 'joy'},{name: 'martin'},{name: 'tom'},{name: 'eli'}] We are looking to retrieve all documents where the name field does not ...

Angular 2 is throwing an error stating that the argument 'ElementRef' cannot be assigned to the parameter 'ViewContainerRef'

I'm developing an Angular 2 application with angular-cli, but when I include the following constructor, I encounter the following error: Error Argument of type 'ElementRef' is not assignable to parameter of type 'ViewContainerRef&apos ...

Dynamically populate dropdown menu with values extracted from dataset

I'm currently working on a dropdown menu that needs to be updated dynamically using the data set below: this.additionalPercentages = this.offer.offerData.wellbeing.retirementPackages[0].additionalVoluntaryContributionPercentages; When I console this ...

Steer clear of using enum values in typescript to prevent potential issues

I am looking to iterate through an enum type in order to populate options within a react component. Below, you will find the specific enum and a function that retrieves its keys and values. export enum TaskType { daily, weekly, monthly, yearly } ...

React error: Objects cannot be used as children in React components

Upon trying to display data using REACT, an error message stating "Objects are not valid as a React child. If you meant to render a collection of children, use an array instead" is encountered. The issue arises when fetching records from a MongoDB collect ...

Error message: "Unable to locate jQuery file within the node.js + Express application running on Heroku platform."

My current setup involves a node.js application with Express and express-handlebars deployed on Heroku. However, whenever I run the app, the console displays a 404 error for the jquery file, leading to subsequent failures for dependent libraries like Boots ...

The promise chain from the ngbModal.open function is being bypassed

I'm currently working on implementing data editing within a component. My task involves checking if any of the data fields have been altered, and if so, prompting a confirmation pop-up to appear. If the user confirms the change, the data will then be ...