Angular 2 Empty Component Routing
<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>