close

[Solved] ERROR Error: Uncaught (in promise) Cannot match any routes URL Segment

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error ERROR Error: Uncaught (in promise) Cannot match any routes URL Segment in angular. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve ERROR Error: Uncaught (in promise) Cannot match any routes URL Segment Error ?

  1. How To Solve ERROR Error: Uncaught (in promise) Cannot match any routes URL Segment Error?

    To Solve ERROR Error: Uncaught (in promise) Cannot match any routes URL Segment Error Just fix your issue, replace this routerLink=”['/about']” with routerLink=”/about” in your HTML

  2. ERROR Error: Uncaught (in promise) Cannot match any routes URL Segment

    To Solve ERROR Error: Uncaught (in promise) Cannot match any routes URL Segment Error Just fix your issue, replace this routerLink=”['/about']” with routerLink=”/about” in your HTML

Solution 1

When you use a router link like this, then you need to pass the value of the route it should go to. But when you use router link with the property binding syntax, like this: [routerLink], then it should be assigned a name of the property the value of which will be the route it should navigate the user to.

So to fix your issue, replace this routerLink="['/about']" with routerLink="/about" in your HTML.

There were other places where you used property binding syntax when it wasn’t really required. I’ve fixed it and you can simply use the template syntax below:

<nav class="main-nav>
  <ul 
    class="main-nav__list" 
    ng-sticky 
    addClass="main-sticky-link" 
    [ngClass]="ref.click ? 'Navbar__ToggleShow' : ''">
    <li class="main-nav__item" routerLinkActive="active">
      <a class="main-nav__link" routerLink="/">Home</a>
    </li>
    <li class="main-nav__item" routerLinkActive="active"> 
      <a class="main-nav__link" routerLink="/about">About us</a>
    </li>
  </ul>
</nav>

It also needs to know where exactly should it load the template for the Component corresponding to the route it has reached. So for that, don’t forget to add a <router-outlet></router-outlet>, either in your template provided above or in a parent component.

There’s another issue with your AppRoutingModule. You need to export the RouterModule from there so that it is available to your AppModule when it imports it. To fix that, export it from your AppRoutingModule by adding it to the exports array.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProjectsComponent } from './components/projects/projects.component';
const routes: Routes = [
  { path: 'about', component: AboutComponent },
  { path: 'what', component: WhatwedoComponent },
  { path: 'contacts', component: FooterComponent },
  { path: 'projects', component: ProjectsComponent},
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
  ],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }

Solution 2

In case you need the [] syntax, useful for “edit forms” when you need to pass parameters like id with the route, you would do something like:

[routerLink]="['edit', business._id]"

As for an “about page” with no parameters like yours,

[routerLink]="/about"

or

[routerLink]=['about']

will do the trick.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment