2016-08-29 12 views
2

app.routing.tsは、任意のルートと一致しません: ""

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

import { PushComponent }  from './push/push.component'; 


const appRoutes: Routes = [ 
    { path: 'push', component: PushComponent} 
]; 

export const appRoutingProviders: any[] = []; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    template: ` 
    <h1>{{title}}</h1> 
    <nav>   
     <a [routerLink]="['/push']">push1</a> 
     <a [routerLink]="['/push']">push2</a> 
    </nav> 

     <nav> 
     <a routerLink="/push" routerLinkActive="active">push3</a> 
     <a routerLink="/push" routerLinkActive="active">push4</a> 
    </nav> 

    <router-outlet></router-outlet> 
    `, 
    styleUrls: ['app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

push.component.ts

@Component({ 
    // selector: 'push-comp', 
    template: 
     // `<form (submit)="submitForm()"> 
     // <input [(ngModel)]="element.name"/> 
     // 
     // <button type="submit">Submit the form</button> 
     // </form> 
     // <br> 
    `<button (click)="getHeroes()"> get </button> <button (click)="saveHeroes()"> push </button>`, 
    // templateUrl: 'app/html/heroes.component.html', 
    providers: [PushService] 
}) 
export class PushComponent implements OnInit { 
    pushResult:PushResult; 
    // selectedHero:Hero; 
    // addingHero = false; 
    error:any; 
    element:any; 

を、私は2を持っていますエラー:

1)テンプレートが表示されません(2つのボタン)プッシュコンポーネントから

2)私は、ChromeブラウザからエラーCannot match any routes: ''を得るが、''

私が持っているへのリンクこのpostを参照してくださいがどこにあるか私は知らないが、私はすでにindex.htmlの中に持っています:

<head> <base href="/">

+0

ルータリンクの1つをクリックするとこのエラーが発生しますか。 –

答えて

1

ルートは '' あなたのデフォルトルートです。このようなデフォルトルートを追加できます。

const appRoutes: Routes = [ 
    { path: '', redirectTo: '/push', pathMatch: 'full' }, 
    { path: 'push', component: PushComponent} 
]; 

これが役立つかどうかを確認してください。

関連する問題