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

Question

I have simple navigation in angular 6 app,

Here is HTML

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

          </ul>
</nav>

here is app.routing module

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),
  ],
  declarations: []
})
export class AppRoutingModule { }

Here is app module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgStickyDirective } from 'ng-sticky';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AppRoutingModule } from './/app-routing.module';
import { MainNavDirective } from './layout/main-nav.directive';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { WhyChooseUsComponent } from './components/why-choose-us/why-choose-us.component';
import { TeamComponent } from './components/team/team.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { ClientsComponent } from './components/clients/clients.component';
import { HowItWorksComponent } from './components/how-it-works/how-it-works.component';
import { PartnersComponent } from './components/partners/partners.component';

@NgModule({
  declarations: [
    AppComponent,
    NgStickyDirective,
    MainLayoutComponent,
    MainNavDirective,
    AboutComponent,
    WhatwedoComponent,
    FooterComponent,
    WhyChooseUsComponent,
    TeamComponent,
    ProjectsComponent,
    ClientsComponent,
    HowItWorksComponent,
    PartnersComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

when I run my app and click about us i get the following error :

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '%5B'/about'%5D'
Error: Cannot match any routes. URL Segment: '%5B'/about'%5D'
    at

I have tried different combination to solve the issue but still not able to get rid of this error,

what am I doing wrong in my code? any help will be helpfull thanks

score 33 · Accepted Answer · edited Sep 04 '19 at 17:53

When you use routerLink like this, then you need to pass the value of the route it should go to. But when you use routerLink 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 { }

Stackoverflow sets a time to accept the answer hahaha so just be patient . too quick !! — The Dead Man, Aug 26 '18 at 17:53
this solve the problem but when I click about us it does nothing :( — The Dead Man, Aug 26 '18 at 17:54
Hover over the link and check in the bottom left section of the screen where it is going to navigate the user to? — SiddAjmera, Aug 26 '18 at 17:59
I solve the issue I need to add router-outlet to the main layout components components — The Dead Man, Aug 26 '18 at 18:07
Oh. Okay. Make sure to export the `RouterModule` from `AppRoutingModule` as well. — SiddAjmera, Aug 26 '18 at 18:08

score 9 · Answer 2 · answered Feb 07 '19 at 17:52

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.

score 3 · Answer 3 · answered Aug 26 '18 at 17:47

3

As the error says your router link should match the existing routes configured

It should be just routerLink="/about"

answered Aug 26 '18 at 17:47

Sajeetharan

216,225
63
350
396

score 1 · Answer 4 · answered Jan 07 '22 at 13:14

1

i founded the correct answer by search of many days ; just convert routerLink="['/jkh',id]"

to

[routerLink]="['/jkh',id]"

and give it all the requerments and its solve ;

answered Jan 07 '22 at 13:14

Neeta Chaurasia

101
1
1

score 0 · Answer 5 · answered Jun 17 '22 at 17:02

0

You need to use:

[routerLink]="/about"

If you wanted to pass a parameter like id, lets say like a course with an id parameter you will need to use it like this:

[routerLink]="['/course/', course.id]"

It should help any related error.

answered Jun 17 '22 at 17:02

Mbote-Joseph

73
1
4

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

5 Answers5

Linked