title: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'main/knowledge-base'
body: <p>I'm setting up dynamic routing for my application in angular 6, and when I run the application there are no compile errors, but once I click on a link (say, knowledge base) it gives me the following error:</p>
  
  <p><strong>core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'main/knowledge-base'</strong></p>
  
  <p>I followed the tutorials <a href="https://grokonez.com/frontend/angular/angular-6/angular-6-dynamic-navigation-bar-add-remove-route-dynamically" rel="nofollow noreferrer">Here</a> and <a href="https://medium.com/@DenysVuika/dynamic-routes-with-angular-6fda03b7fa2c" rel="nofollow noreferrer">Here</a> for applying dynamic routing to my application, which would allow <code>components</code> to create links, display them on screen and redirect when clicked. For testing I have created a <code>dummyComponent</code>, which would be used by every route initially, but will be replaced by actual <code>components</code> when this is working.</p>
  
  <p>However, due to the error above, I was not able to go anywhere with this. I tried browsing through the current solutions and the most relevant ones were <a href="https://stackoverflow.com/questions/43036649/angular-2-uncaught-in-promise-error-cannot-match-any-routes-url-segment-a">this</a> and <a href="https://stackoverflow.com/questions/51884009/error-error-uncaught-in-promise-error-cannot-match-any-routes-url-segme">this</a>, but they wouldn't really solve the problem I'm having. Am I missing something perhaps?</p>
  
  <p>Here is my code:</p>
  
  <p><strong>toolbar.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';
  import { DynamicRoutingService } from 'src/app/services/dynamic-routing/dynamic-routing.service';
  import { Router } from '@angular/router';
  import { DummyComponent } from 'src/app/views/dummy/dummy.component';
  
  @Component({
    selector: 'app-toolbar',
    templateUrl: './toolbar.component.html',
    styleUrls: ['./toolbar.component.scss'],
    providers: [DynamicRoutingService]
  })
  
  /**
  * The purpose of this file is to provide the html template with the translated names
  * for the categories in the toolbar.
  */
  export class ToolbarComponent implements OnInit {
  
  /**
  * Object containing the translated names and their respective icons
  * @property {array} links
  */
  links: Array&lt;{ text: string, path: string }&gt;;
  
  constructor(private translate: TranslatePipe, private router: Router, private dynamicRouting: DynamicRoutingService) {
      this.router.config.unshift(
        { path: 'knowledge-base', component: DummyComponent }, 
        { path: 'home', component: DummyComponent },
        { path: 'settings', component: DummyComponent }
      );
      this.dynamicRouting.addItem({ text: "home", path: "home" });
      this.dynamicRouting.addItem({ text: "knowledge_base", path: "knowledge-base" });
      this.dynamicRouting.addItem({ text: "settings", path: "settings" });
  }
  
    ngOnInit() {
      this.links = [];
      let rawData = this.dynamicRouting.getLinks();
      let self = this;
      rawData.forEach(function(data) {
        let text = self.translate.transform("generic[toolbar][categories][" + data.text + "][label]");
        self.links.push({ text: text, path: data.path });
      });
    }
  
  }
  </code></pre>
  
  <p><strong>toolbar.component.html</strong></p>
  
  <pre><code>&lt;app-header
    [fixed]="true"
    [navbarBrandFull]="{src: 'assets/logo.png', width: 143, height: 36, alt: 'RT Logo'}"
    [navbarBrandMinimized]="{src: 'assets/logo2.png', width: 35, height: 35, alt: 'RT Logo'}"
    [sidebarToggler]="'lg'"&gt;
    &lt;ul class="nav navbar-nav d-md-down-none" routerLinkActive="active"&gt;
      &lt;li class="nav-item px-3" *ngFor="let link of links"&gt;
        &lt;a class="nav-link" [routerLink]="link.path"&gt;{{ link.text }}&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="nav navbar-nav ml-auto"&gt;
    &lt;/ul&gt;
  &lt;/app-header&gt;
  </code></pre>
  
  <p><strong>dynamic-routing.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  /*
  * This service will provide components with the ability to dynamically create
  * routes within the application
  */
  export class DynamicRoutingService {
  
    /*
    *
    * @property {array} links
    */
    private links = new Array&lt;{ text: string, path: string, icon: string }&gt;();
  
    constructor() { }
  
    /*
    * Method to fetch data
    *
    */
    getLinks() {
      return this.links;
    }
  
    /*
    * Method to store data
    * @param text, path, icon
    */
    addItem({ text, path, icon = null }) {
      this.links.push({ text: text, path: path, icon: icon });
    }
  
    /*
    * Method to remove a specific link0
    * @param text
    */
    removeItem({ text }) {
      this.links.forEach((link, index) =&gt; {
        if (link.text === text) {
          this.links.splice(index, 1);
        }
      });
    }
  
    /*
    * Remove all links from the array
    */
    clearAll() {
      this.links.length = 0;
    }
  }
  </code></pre>
  
  <p><strong>app.routing.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  
  import { LoginComponent } from './views/login/login.component';
  import { MainComponent } from './views/main/main.component';
  import { AuthGuardService } from './services/auth-guard/auth-guard.service';
  
  export const routes: Routes = [
    {
      path: '',
      component: LoginComponent,
  
    },
    { path: 'main',
      component: MainComponent,
      canActivate: [AuthGuardService]
    }
  ];
  
  @NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
  })
  export class AppRoutingModule {}
  </code></pre>
  
  <p><strong>Expected</strong>: Links should properly redirect to a route eg."main/name"</p>
  
  <p><strong>Actual</strong>: </p>
  
  <pre><code>ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'main/home'
  Error: Cannot match any routes. URL Segment: 'main/home'
      at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1384)
      at CatchSubscriber.selector (router.js:1365)
      at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
      at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
      at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
      at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
      at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
      at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
      at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
      at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
      at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1384)
      at CatchSubscriber.selector (router.js:1365)
      at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
      at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
      at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
      at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
      at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
      at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
      at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
      at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
      at resolvePromise (zone.js:814)
      at resolvePromise (zone.js:771)
      at zone.js:873
      at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
      at Object.onInvokeTask (core.js:3811)
      at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
      at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
      at drainMicroTaskQueue (zone.js:595)
      at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
      at invokeTask (zone.js:1540)
  defaultErrorLogger @ core.js:1673
  push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1719
  next @ core.js:4311
  schedulerFn @ core.js:3551
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
  push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
  push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3535
  (anonymous) @ core.js:3842
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
  push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
  push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779
  onHandleError @ core.js:3842
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
  push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:154
  _loop_1 @ zone.js:677
  api.microtaskDrainDone @ zone.js:686
  drainMicroTaskQueue @ zone.js:602
  push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
  invokeTask @ zone.js:1540
  globalZoneAwareCallback @ zone.js:1566
  </code></pre>