title: ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment
body: <p>I have simple navigation in angular 6 app, </p>
  
  <p>Here is HTML</p>
  
  <pre><code>&lt;nav class="main-nav&gt;
  &lt;ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''"&gt;
              &lt;li class="main-nav__item"&gt;
                &lt;a class="main-nav__link" routerLink="['/']" routerLinkActive="active"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="main-nav__item"&gt; 
                &lt;a class="main-nav__link" routerLink="['/about']" routerLinkActive="active"&gt;About us&lt;/a&gt;
              &lt;/li&gt;
  
            &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>here is app.routing module</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>Here is app module</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>when I run my app and click about us  i get the following error :</p>
  
  <pre><code>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
  </code></pre>
  
  <p>I have tried different combination to solve the issue but still not able to get rid of this error, </p>
  
  <p>what am I doing wrong in my code? any help will be helpfull thanks</p>