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?