Oops! No routes found to match

After adding a named second route, I encountered an issue when trying to navigate to a specific page.

Here is the configuration of my routes:

const appRoutes: Routes = [
  { path: '', redirectTo: '/projects', pathMatch: 'full' },
  { path: 'projects', component: ProjectsComponent },
  { path: 'projects/:projectId', component: ProjectDetailsComponent },
  { path: 'projects/:projectId/routes', component: RoutesComponent, outlet: 'project' },
  { path: 'projects/:projectId/rides/new', component: AddRideComponent, outlet: 'project' },
  { path: 'projects/:projectId/routes/:id', component: RideDetailsComponent, outlet: 'project' },
  { path: 'projects/:projectId/stops', component: StopsComponent, outlet: 'project' },
  { path: 'projects/:projectId/stops/new', component: AddStopComponent, outlet: 'project' },
  { path: 'projects/:projectId/stops/:id', component: StopDetailsComponent, outlet: 'project' },
  { path: 'drivers', component: DriversComponent },
  { path: 'drivers/new', component: AddDriverComponent },
  { path: 'drivers/:id', component: DriverDetailsComponent },
  { path: 'settings', component: SettingsComponent }
];

This is how my named router-outlet is defined:

<router-outlet name="project"></router-outlet>

And this is what my routerLink looks like:

<a [routerLink]="[{ outlets: { project: ['projects', projectId, 'routes'] } }]">Routes</a>

Upon hovering over the link, the url displayed is 

http://localhost:4200/projects/99979de9-264c-278f-d7b4-6dec9a830974/(project:projects/99979de9-264c-278f-d7b4-6dec9a830974/routes)

However, upon clicking the link, the following error is generated:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'projects/99979de9-264c-278f-d7b4-6dec9a830974'
Error: Cannot match any routes. URL Segment: 'projects/99979de9-264c-278f-d7b4-6dec9a830974'
    at ApplyRedirects.webpackJsonp.../../../router/@angular/router.es5.js.ApplyRedirects.noMatchError (router.es5.js:1342)
    at CatchSubscriber.selector (router.es5.js:1317)
    at CatchSubscriber.webpackJsonp.../../../../rxjs/operator/catch.js.CatchSubscriber.error (catch.js:104)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (Subscriber.js:128)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (Subscriber.js:102)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (Subscriber.js:128)

What am I missing in my setup?

angulartypescriptangular2-routing

Answer №1

One thing I forgot to include was the children component for a specific component. The solution involved adding it in this way:

export const appRoutes: Routes = [
  { path: '', redirectTo: 'projects', pathMatch: 'full' },
  { path: 'projects', component: ProjectsComponent },
  { path: 'projects/:projectId', component: ProjectDetailsComponent,
    children: [
      { path: 'routes', component: RoutesComponent, outlet: 'project' },
      { path: 'rides/new', component: AddRideComponent, outlet: 'project' },
      { path: 'routes/:id', component: RideDetailsComponent, outlet: 'project' },
      { path: 'stops', component: StopsComponent, outlet: 'project' },
      { path: 'stops/new', component: AddStopComponent, outlet: 'project' },
      { path: 'stops/:id', component: StopDetailsComponent, outlet: 'project' }
    ]
  }
];

Make sure to have your router-outlet within the ProjectDetailsComponent like this:

<router-outlet name="project"></router-outlet>

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

Error message when running `ng serve` - tips for troubleshooting?

I recently retrieved an older angular project (about 6 months old) that I wanted to use as a template. However, when I attempt to run it, I encounter the errors mentioned below. After doing some research online and reading through a few links, I found sugg ...

angularnpmangular-cli

Trouble seeing span in ion-item in Ionic 2: How can I display plain text instead?

It seems like I may be overlooking something, as I am experiencing an issue with adding a span to an Ion Item, where the span is not being rendered, nor is the div. <ion-card> <ion-card-title> </ion-card-title> <div> < ...

javascriptangulartypescriptionic2ionic3

Assign a value to a date field in Aurelia

<input class="" type="date" id="Broken" value.bind="dateval"> The current value of dateval is 2021-04-08T10:05:19.988Z. Is there a way to set a default date for the date input field above? ...

typescriptaurelia

typescript provides an asynchronous recursive mapping function that allows for changing parent data starting from the leaf node

I am currently facing a challenge in identifying the leaf node within a non-binary tree that requires modification. The process involves computing a blake2b hash from the leaf data, passing it to the parent node, and repeating this calculation until reachi ...

typescriptrecursionasync-awaittree

Show a table row based on a specific condition in Angular

I'm having this issue with the tr tag in my code snippet below: <tr *ngFor="let data of list| paginate:{itemsPerPage: 10, currentPage:p} ; let i=index " *ngIf="data.status=='1'" > <td> </td> <td> ...

angulartypescript

React: Why aren't class methods always running as expected?

I created a class component that retrieves a list of applications from an external API. It then sends a separate request for each application to check its status. The fetching of the applications works well, but there is an issue with the pinging process ...

javascriptreactjstypescript

The error message "Property '$store' is not defined on type 'ComponentPublicInstance' when using Vuex 4 with TypeScript" indicates that the property '$store' is not recognized

I'm currently working on a project that involves using TypeScript and Vue with Vuex. I've encountered an error in VSCode that says: Property '$store' does not exist on type 'ComponentPublicInstance<{}, {}, {}, { errors(): any; } ...

typescriptvue.jsvisual-studio-codevuex

Ways to modify the color of mat-icon within an input field using Angular 6

Here is the code from my HTML file: <div class="input-field"> <div> <input type="text" id="name" required email/> <label for="name">Email: <mat-icon svgIcon="mail" class="change-color"></mat-icon> &l ...

cssangularinputicons

Approach to streamlining and making services more flexible

Currently, I am immersed in a complex Angular 2 endeavor that requires fetching various types of objects from a noSQL database. These objects are represented using straightforward model classes, and I have set up services to retrieve the data from the DB a ...

angulartypescript

Managing Multiple Authorizations with Angular 4.3 HttpClient

I am seeking advice on how to utilize HttpClientModule for multiple Authorization scenarios. When using the HttpInterceptor Provider, I am able to implement it for one case only. For example: Api 1 has token A Api 2 has token B Is there a way to configu ...

angularangular-httpangular-http-interceptorsangular-http-auth

What is the best way to design an interface in TypeScript that accepts a class as a parameter, rather than an instance of the class?

I am looking to develop an interface that can receive an actual class instead of an instance of the class. Here is a sample code snippet: class CheckIfGoNextPage{ localResult; next; constructor(localResult:string, next:string){ this.localResult = ...

typescriptclassinterface

What is the best way to utilize Quokka when working with TypeScript files that have been imported?

After installing ts-node using NPM, I've spent countless hours trying to get it to work. Unfortunately, I couldn't find any helpful documentation on the website or through a Google search. I have installed ts-node both globally and in my project ...

node.jstypescriptnpmquokka.js

"Encountering a package.json conflict while using Ionic 5

When I try to install any Cordova plugin and then run ionic serve, I encounter an error message [error] Error: The target entry-point "@ionic-native/device" has missing dependencies: @ionic-native/core [ng] An unhandled exception occurred: The target en ...

angularionic-frameworkionic4ionic-native

An error occured in angular2: Cannot access the 'title' property of undefined

Here is the code snippet for my custom component: export class MoviedetailComponent implements OnInit { movie:any constructor( private getmovie: GetmovieService, private router: Router, private rout: ActivatedRoute ) { } ngOnInit() { this.r ...

angulartypescript

Transfer the output of a function in a service to a different function

I have a unique service that connects to 2 different API endpoints. The first endpoint retrieves the user's id along with a JWT token: @Injectable() export class UserService { appLogin = 'http://url.for.the.login.api'; //returns id an ...

angulartypescript

Ensuring that the field remains active in Angular2 even after editing it with a value

When the 3rd dropdown value is selected in the first field dropdown, it enables the 2nd field. However, when I edit and change a different value, since the 2nd field is disabled, I receive null or undefined as the value. I want the 2nd field to retain its ...

angulartypescript

Utilizing Angular 2 Observable for showcasing a seamless flow of real-time information

Currently, my Angular 2 Web application is utilizing a Couchbase Server as its database. The data communication occurs through WebAPIs that interact with the CouchBase server. As of now, I am uncertain if this method is optimal, but I am constantly polling ...

asp.net-web-apiangularcouchbaseobservablecouchbase-lite

Typescript method for handling empty JSON responses

Query: How can I filter out the array items that do not contain images in this JSON response? I am new to Angular and Typescript. this.music.searchArtists(this.searchQuery).subscribe( data =>{ this.results = data.artists.items; console.log(thi ...

angulartypescript

Can you explain the variance among these Angular 8 create service methods?

As a newcomer to Angular, I have a query: Approach 1: @Injectable() export class classA { constructor( private service1: Service1, private service2: Service2) { } } in app.module providers: [ { provide: classA , useFactory ...

angulardependency-injectionserviceangular8

Different ways to update ngModel input appearance

Within my Ionic application, I utilize [(ngModel)] to bind and transfer input values within my class. <ion-item> <ion-label color="primary" floating>flow [m <sup>3</sup> /h]</ion-label> <ion-input type="nu ...

cssangularionic2