Having trouble accessing the next page when clicking on the icon

I'm attempting to switch to a new page when clicking on the icon, and my component code looks like this:

getTabDetails() {
  switch (this.tabContent) {
    case 'Shipment content':
      {
        this.router.navigateByUrl('/ProjectShipment/000634');
      }
  }
} 

Below is my Routing component configuration:

const appRoutes: Routes = [
  {
  path: 'dB',
  data: { title: 'Dashboard' },
  children: [
      {
          path: 'ProjectShipment/:reportProject',
          component: ProjectShipmentComponent,
          data: { title: 'Project Shipment' },
      }

When I click the icon, I encounter the following error:

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

However, accessing the page directly through the URL works:

http://localhost:4200/dB/ProjectShipment/000634

Am I overlooking something here?

Answer №1

Here is a suggestion to consider:

this.navigator.navigate(['ShipmentDetails', 000634], {relative:true, inRoute:this.currentRoute});

Make sure you have the following declared:

private currentRoute: ActivatedRoute

This code snippet should work if you are currently on the /dB route.

Answer №2

self.navigator.goTo(['./ProjectDelivery/000634']);

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

How do I retrieve the class of an element nested within another element using jQuery?

If we consider a scenario where there is a table named unitTables with various rows, each containing the selected class that we want to retrieve for a variable. This specific table is just one of many similar tables on the webpage. Since other tables also ...

What is the best way to retrieve the value of a textbox with a dynamic ID?

Within this section, you will find two input elements: one button and one textbox. The purpose of the qty-input is to input the quantity of products, and upon clicking the button via jQuery, the shopping cart is updated. While hardcoding as 1 works fine, I ...

Setting the height of a rich HTML editor component can be achieved in a few simple

Seeking guidance regarding adjusting the height of the editing area while using Quill, the rich html editor in my angular component. I am currently utilizing angular-7, bootstrap, and font-awesome, all at their latest versions. Despite thorough research, ...

Embedding a YouTube video in a view player using HTML5

So I've got a question: can you actually open a youtube video using an HTML5 video player? I'm looking for a more mobile-friendly way to watch youtube videos, and my idea was to upload a thumbnail image and then set up an onclick function to disp ...

What is the best way to standardize complex nested data within the ngrx/store?

Currently, I am utilizing ngrx/store with Angular 6. Within the store, there exists a deeply nested structure which I have concerns about in terms of its organization: const state = [ { aliases: ['alias1', 'alias2'], isRequir ...

Prevent users from clicking buttons until all mandatory fields are filled out using react-hook-form

I am seeking guidance on how to dynamically disable a button based on the input values of both Name and State in the given code snippet. Specifically, I want to restrict button functionality until both name and state fields are filled out, regardless of ...

Creating duplicates of a division and updating the identifiers of each element within the duplicated divisions

In the midst of a django project, a specific requirement is to add a button on the HTML page that, when clicked, duplicates a specific div and attaches it to the bottom of the page. The desired outcome is illustrated in the following image: View Screenshot ...

Whenever attempting to choose a rating, the MUI dialog continuously refreshes and resets the selected rating

I'm facing an issue with my MUI dialog where it keeps refreshing and resetting the selected rating every time I try to rate a movie. Any assistance on this matter would be highly appreciated. The RateWatchMovieDialog component is designed to display ...

Find an object within a nested object that meets a specific condition

When given an object structure like the one below: temp = [ {category: 'category1', branch: [{key: 'key A1', value: 'value A1'}, {key: 'key B1', value: 'value B1'}] }, {category: 'category2', ...

Retrieve the data attribute from a specific dropdown menu using jQuery

Here is the code snippet I am currently working with: $('.tmp-class').change(function() { $('.tmp-class option:selected').each(function() { console.log($('.tmp-class').data('type')); }) ...

Send data using Javascript without having to refresh the page

As I work on submitting a form in JavaScript, the AJAX feature is functioning perfectly when manually submitting the form. However, there seems to be an issue when JavaScript attempts to submit it, resulting in a refresh. The current code snippet I am wor ...

Is there a way to implement a watch on $validator.errors in Vue.js using the Vee Validation plugin?

My intention was to implement a watch on $validator.errors, so that any error that arises gets logged, To achieve this, I checked the length of errors and stored self.errors.all() in a variable, However, I'm curious if it's possible to directly ...

Transferring JavaScript variables to a frame

Struggling to integrate dynamic parameters from the URL into a frame, but nothing seems to be working. I've tried placing them inside and outside the tags, before and after... Anyone have any insights on this? The URL in the top frame is . The initia ...

What is the best way to add .xlsx and .docx files to the Typescript compilation output?

For my server, I have decided to use Typescript with NodeJS. One of the challenges I encountered in my server logic is manipulating .xlsx and .docx files. Unfortunately, these file types are not included in the Typescript compilation output. These specifi ...

Implementing Decimal Input in Bootstrap-Vue for Google Chrome on Android

Issue is isolated to Google Chrome for Android (version 90.0.4430.210) and not present in other browsers. We have an input field that only allows numeric characters, structured like this: https://i.sstatic.net/zi4qn.png <b-form-input v-model="m ...

What is the proper way to utilize a function in C# that integrates with a window form using TypeScript?

I am currently working on a code that is in c# and utilizes a web browser. My goal is to convert the existing JavaScript code to Angular 7 and Typescript. Below is the c# code and the corresponding JavaScript code used to access the c# function from JavaS ...

The declaration file for the module 'vue-html-to-paper' was not located

Struggling to make a sample project work with HTML to PDF, but encountering an error message stating: Could not find a declaration file for module 'vue-html-to-paper' Even though it resides in my node_modules index.js import Vue from 'vue& ...

Upon completing the update to the most recent version of aurelia, I encountered an issue where the project failed to run and displayed the error message: "unable to locate module './aurelia-framework'" in webpack

My current project is based on the aurelia webpack/es2016 navigation skeleton from a couple of months back. Up until today, everything was running smoothly. However, after deleting my node_modules directory and performing a fresh npm install, the front en ...

Ways to conceal the style tag in the view source similar to Angular Material

Is there a way to conceal the style tag from being visible in the view source? Take a look at the images I have uploaded to see what I am trying to achieve. See the style tag in the developer tool No style tag visible in the view source After running ng ...

I'm having trouble with an error in my React project on VS Code. Can anyone provide guidance

Could you please explain the meaning of this error message: errno: 'ENOENT', code: 'ENOENT', syscall: 'spawn cmd', path: 'cmd', spawnargs: [ '/s', '/c', 'start', '""', ...