Angular 5 - Issue with Dynamic Routing not Functioning as Expected

After setting up a new project and making modifications to the routing module for dynamic routing, I encountered an issue with one of my routes:

Below is the updated routing module code snippet:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, Router} from '@angular/router';

import { OneComponent } from './one/one.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
  constructor(router: Router, routerModule: RouterModule) {
    console.log('Routes: ', JSON.stringify(routes, undefined, 1));
    routes.push({path: 'new/random/path', component: OneComponent});
    routes.forEach((x, i) => {
      console.log(`${i}: ${JSON.stringify(x, undefined, 1)}`);
    });
  }
}

Additionally, here are the example links found on app.component.html:

<a routerLink="home">Home</a>

<a routerLink="new/random/path">Dynamic</a>

<router-outlet></router-outlet>

Despite successfully adding the new route in the routes array, I am encountering the following error message:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'new/random/path'
Error: Cannot match any routes. URL Segment: 'new/random/path'

How can this issue be resolved?

Answer №1

Here is a suggestion:


  constructor(nav: NavController) {
    const config = nav.configuration;
    config.push({url: 'custom/path', component: NewComponent});
    nav.resetConfig(config);
  }

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

Is it safe to use subjects in Angular like this, or are there potential security concerns?

When I find myself needing to use a variable in multiple components that can change over time, I typically store that variable in a service and encapsulate the value in a Subject. This allows every component to receive updates when next is called on the Su ...

Undefined Perception

Trying to obtain values from an observable, my subscription code within the component looks like this: this.checkoutService.getDisabledDate().subscribe (dates=>{this.formattedDate=dates}, (error:any)=>{console.log(error)}); When logging this.forma ...

Error message: Angular 2's NgFor directive can only bind to iterable data types like Arrays

One of the challenges I'm facing involves working with a specific model: export class CoreGoalModel { constructor( public title: string, public image: string, ){} } In order to retrieve data based on this model, I've set up a s ...

Javascript's ParseFloat function returns a string instead of a number

I have an array retrieved from an API that looks like this: x = [0, 12.1, 23.45, 100.23, 13.99, 90, 0, 16.1] I need each number to have a decimal point up to two places, such as 0.00 or 12.10. Here is what I tried: x = x.toFixed(x); However, this conv ...

Angular 8 hybrid application fails to detect AngularJS components

I recently embarked on developing a hybrid application and took the following steps: Added Angular 8 dependencies Inserted polyfills.ts Removed the ng-app attribute from my root index.html Manually bootstrapped the AngularJs app This is how my Angular i ...

What is the command to determine the version of TypeScript being used in the command line interface (CLI)?

I recently added TypeScript 1.7.4 using Visual Studio 2015, and it appears correctly installed within the IDE. However, when I check the version using tsc --version in the command line, it shows a different, older version - 1.0.3.0 instead of 1.7.4. Is t ...

When triggering my custom Exception in Angular 2, Angular automatically encapsulates it within viewWrappedDebugError

Developing a substantial Angular 2 application, I've crafted my own Exception to handle errors efficiently. However, it appears that Angular is trying to encapsulate my error within some viewWrappedDebugError. This is the structure of my custom Excep ...

Having trouble with the backbutton override in Angular 7 and Cordova 8?

I'm creating a mobile app using Angular 7 and Cordova 8. I need to prevent the default behavior of the back button in order to stop the app from closing. Following instructions in the Cordova documentation, I added an event listener to override the ba ...

A guide on utilizing dotenv to access .env file variables in TypeScript

I'm currently facing an issue with utilizing a .env file for storing API keys in a TypeScript React project. The .env file is placed at the project's root directory, and I'm attempting to retrieve its variables from src/index.tsx using proce ...

Why does the HttpErrorResponse consistently show "OK" in the statusText field?

Constantly Receiving StatusText: "OK" I recently configured HTTPS SSL certification for testing purposes, but I keep getting the "OK" status in StatusText. Ideally, it should return "Bad Request" or "Unauthorized"...etc. I would appreciate some ...

Issues with Angular proxy arise when trying to access my REST service

I am trying to make a call to my REST API using a proxy to avoid Cors errors. Unfortunately, my proxy setup is not working as expected and I am getting a 401 (Unauthorized) error when I try to access http://localhost:4200/api/users/login. Below is the con ...

How can you notify a component, via a service, that an event has occurred using Subject or BehaviorSubject?

For my Angular 10 application, I created a service to facilitate communication between components: export class CommunicationService { private messageSubject = new Subject<Message>(); sendMessage(code: MessageCode, data?: any) { this.messag ...

The functionality of TypeScript's .entries() method is not available for the type 'DOMTokenList'

I'm currently working with a stack that includes Vue3, Vite, and TypeScript. I've encountered an issue related to DOMTokenList where I'm trying to utilize the .entries() method but TypeScript throws an error saying Property 'entries&apo ...

What is the proper way to replace a component with a new one?

Below is a snippet of my code where I have included only the crucial parts from selected files. Could you guide me on how to switch between the components sign-in.component.html and forgot.component.html or sign-up.component.html when the user clicks on &a ...

Tips for displaying text on the bubbles of a vector map using the DevExpress library in an Angular and TypeScript environment to showcase counts or other relevant information

I managed to incorporate the devextreme angular 2 map into my demo project. My goal is to display the count of individuals with the name 'x' on the bubble as a label/text on the vector map, without the need for hovering to see a tooltip. I want t ...

Issues with Formik sign-up

Working on a study project involving React, Typescript, Formik, and Firebase presents a challenge as the code is not functioning correctly. While authentication works well with user creation in Firebase, issues exist with redirection, form clearing, and da ...

Learn how to dynamically disable a button based on the input state matching an email pattern!

I'm facing an issue with my login form that has 2 input fields and a login button. One of the input fields requires a valid email pattern. If any of the input fields are left empty, the login button becomes disabled. However, when an incorrect email p ...

Retrieve the value of an ng-select component upon submitting a form

As a newcomer to Angular, I'm seeking guidance on how to properly handle form submissions with NgSelect in my project. Within my new-team.component.html file, I have the following code structure: <app-header></app-header> <div class="c ...

Loading custom events automatically in Angular 2

I am facing an issue with a specific part of my application. Within my HTML, I need to trigger a method called arrayContains to detect something without any user interaction like clicking or hovering. How can I directly call this method from the HTML itse ...

Styling can be compromised by Angular due to selector element interference

I have a question regarding a bootstrap button group. The buttons within it are Angular components structured like this: <div class="btn-group float-right" role="group" aria-label="Basic example"> <app-action [actionType]="'inv ...