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
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:As for an "about page" with no parameters like yours,
or
will do the trick.
When you use routerLink like this, then you need to paas 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']"
withrouterLink="/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:
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 theRouterModule
from there so that it is available to yourAppModule
when it imports it. To fix that, export it from yourAppRoutingModule
by adding it to theexports
array.As the error says your router link should match the existing routes configured
It should be just
routerLink="/about
"