Угловая 2 Пустая маршрутизация компонентов

Question

Я новичок в Angular 2, и у меня есть вопрос относительно маршрутизации. У меня есть файл app.routing, в котором мне нужен только один путь.

{path: 'signup', component: SignupComponent} 

Но если я запускаю этот код, я получаю сообщение об ошибке:

Error: Uncaught (in promise): Error: Cannot match any routes: '' 

Так я решил просто использовать пустой компонент на «» путь, который работает так же, как я хотел.

Routing Файл:

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); 

Файл с маршрутизатором-выхода:

<header> 
    <div class="btn-wrapper"> 
     <button class="btn-sign-up btn-fancy" routerLink="/signup">Sign Up</button> 
     <button class="btn-sign-in btn-ghost btn-fancy">Sign In</button> 
    </div> 
    <i class="material-icons more">keyboard_arrow_down</i> 
    <router-outlet></router-outlet> 
    <div class="overlay" *ngIf="overlay" (click)="close()"></div> 
    <div class="tinted"></div> 
</header> 

Я просто хочу, чтобы маршрутизатор только маршруты в SignupComponent на '' SIGNUP пути. Есть ли другой способ сделать это и исключить использование пустого компонента? Прошу прощения, если этот вопрос плохо написан, я очень новичок в StackOverflow.

Answer 1

Просто сделать свой пустой маршрут перенаправить к SIGNUP маршруту:

const appRoutes:Routes = [ 
    {path: '', redirectTo: 'signup', pathMatch: 'full'}, 
    {path: 'signup', component: SignupComponent} 
]; 

Или, если вы хотите, чтобы на выходе маршрутизатора, чтобы быть пустым, пока вы не перейдете signup, оставить четыре совершенно пустым:

const appRoutes:Routes = [ 
    {path: '', children: []}, 
    {path: 'signup', component: SignupComponent} 
]; 

Answer 2

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { DemoComponent } from './demo.component'; 

const demoRoutes: Routes = [ 
    { path: '', component: DemoComponent } 
]; 

export const demoRouting: ModuleWithProviders = RouterModule.forChild(demoRoutes);