title: Angular 4/5 router issue
body: <p>I am starting on a new project and I am trying to get all my pages moving aroud correctly yet every time I try to switch pages I get this error:</p>
  <blockquote>
  <p>ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence</p>
  <p>AppMoule.ts</p>
  </blockquote>
  <pre><code>    import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { Routes, RouterModule} from '@angular/router';
      
      
      import { AppComponent } from './app.component';
      import { HomeComponent } from './components/home/home.component';
      import { AboutComponent } from './components/about/about.component';
      import { BlogComponent } from './components/blog/blog.component';
      import { PortfolioComponent } from './components/portfolio/portfolio.component';
      import { ContactComponent } from './components/contact/contact.component';
      import { NavbarComponent } from './components/navbar/navbar.component';
      
      
      const appRoutes: Routes = [
        { path: '', component: HomeComponent },
        { path: 'about', component: AboutComponent },
        { path: 'blog', component: BlogComponent },
        { path: 'portfolio', component: PortfolioComponent },
        { path: 'contact', component: ContactComponent },
      ];
      
      @NgModule({
        declarations: [
          AppComponent,
          HomeComponent,
          AboutComponent,
          BlogComponent,
          PortfolioComponent,
          ContactComponent,
          NavbarComponent,
        ],
        imports: [
          BrowserModule,
          RouterModule.forRoot(appRoutes)
        ],
        providers: [],
        bootstrap: [AppComponent]
      })
      export class AppModule { }
  </code></pre>
  <blockquote>
  <p>AppComponent.html</p>
  </blockquote>
  <pre><code>&lt;app-navbar&gt;&lt;/app-navbar&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  &lt;!--&lt;app-footer&gt;&lt;/app-footer&gt;--&gt;
  </code></pre>
  <p>Just started this project and I am not eve using promises but if I try going from the home page to any other page then I get that error stated earlier. Any help would be appreciated!</p>
  <p>Just in case:</p>
  <blockquote>
  <p>navbarComponent.html</p>
  </blockquote>
  <pre><code>&lt;nav class=&quot;navbar navbar-toggleable-md navbar-inverse bg-inverse mb-4&quot;&gt;
    &lt;button class=&quot;navbar-toggler navbar-toggler-right&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarCollapse&quot; aria-controls=&quot;navbarCollapse&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Crafty Tech&lt;/a&gt;
    &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarCollapse&quot;&gt;
      &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
        &lt;li class=&quot;nav-item active&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;#&quot; routerLink=&quot;/&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;#&quot; routerLink=&quot;/about&quot;&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;#&quot; routerLink=&quot;portfolio&quot;&gt;Portfolio&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;form class=&quot;form-inline mt-2 mt-md-0&quot;&gt;
        &lt;input class=&quot;form-control mr-sm-2&quot; type=&quot;text&quot; placeholder=&quot;Search&quot;&gt;
        &lt;button class=&quot;btn btn-outline-success my-2 my-sm-0&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>