title: Angular 2 Empty Component Routing
body: <p>I am new to Angular 2 and I have a question regarding routing. I have a app.routing file, in which I only want one path. </p>
  
  <pre><code>{path: 'signup', component: SignupComponent}
  </code></pre>
  
  <p>But if I run this code I get an error: </p>
  
  <pre><code>Error: Uncaught (in promise): Error: Cannot match any routes: ''
  </code></pre>
  
  <p>So i decided to just use an empty component on the ' ' path, which works exactly like i wanted.</p>
  
  <p>Routing File:</p>
  
  <pre><code>import {Routes, RouterModule} from '@angular/router';
  import {SignupComponent} from "./signup/signup.component";
  import {EmptyComponent} from "./empty/empty.component";
  
  const appRoutes:Routes = [
      {path: '', component: EmptyComponent},
      {path: 'signup', component: SignupComponent}
  ];
  
  export const appRoutingProviders = [];
  
  export const routing = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p>The file with the router-outlet:</p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="btn-wrapper"&gt;
          &lt;button class="btn-sign-up btn-fancy" routerLink="/signup"&gt;Sign Up&lt;/button&gt;
          &lt;button class="btn-sign-in btn-ghost btn-fancy"&gt;Sign In&lt;/button&gt;
      &lt;/div&gt;
      &lt;i class="material-icons more"&gt;keyboard_arrow_down&lt;/i&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;div class="overlay" *ngIf="overlay" (click)="close()"&gt;&lt;/div&gt;
      &lt;div class="tinted"&gt;&lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>I just want that the router only routes the SignupComponent on the 'signup' path. Is there another way to do this and eliminate the use of an empty component? I am sorry if this question is poorly written, I am very new to StackOverflow.</p>