Angular 2で経路を設定しているときにエラーが発生しました

Question

私はプロダクトリストプロジェクトで作業していました。異なるビュー間をナビゲートするように経路を設定している間は、 '@Routes'デコレータの下に赤い詰まりがあります。 「ルートはタイプのみを参照しますが、ここでは値として使用されています」と述べています。私はここを含む多くの見所を調査し、これを解決するさまざまな方法を試しましたが、問題を見つけることができませんでした。

app.component.ts

import { Component } from '@angular/core'; 
import { ProductListComponent } from './products/product-list.Component'; 
import { ProductService } from './products/product.service' 
import { Routes } from '@angular/router'; 
import 'rxjs/Rx'; // Load all features 
import { WelcomeComponent } from './home/welcome.component' 
@Component({ 
selector: 'pm-app', 
template: ` 
    <div> 
     <nav class='navbar navbar-default'> 
      <div class='container-fluid'> 
       <a class='navbar-brand'>{{pageTitle}}</a> 
       <ul class='nav navbar-nav'> 
        <li><a>Home</a></li> 
        <li><a>Product List</a></li> 
       </ul> 
      </div> 
     </nav> 
    </div> 
    ` , 
    entryComponents : [ProductListComponent], 
    providers: [ProductService] 
}) 

@Routes([ 
{ path: '/welcome' , name: 'Welcome' , component: WelcomeComponent, useAsDefault: true}, 
{ path: '/products' , name: 'Products' , component: ProductListComponent } 

]) 

export class AppComponent { 

pageTitle:string = 'Acme Product Management'; 
} 

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { ProductListComponent } from './products/product-list.Component'; 
import { HttpModule } from "@angular/http"; 
import { RouterModule } from '@angular/router' 

import { ProductFilterPipe } from './products/product-filter.pipe'; 
import { StarComponent } from './shared/star.component'; 

import { AppComponent } from './app.component'; 

@NgModule({ 
imports: [ BrowserModule,FormsModule,HttpModule,RouterModule], 
declarations: [ AppComponent,ProductListComponent,ProductFilterPipe,StarComponent], 
bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

welcome.compnent.ts

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

@Component({ 
templateUrl: 'app/home/welcome.component.html' 
}) 
export class WelcomeComponent { 
public pageTitle: string = 'Welcome'; 
} 

私は私のコーディングは大丈夫だと思います。しかし、期待される結果を得ることができません。助けてください！

Answer 1

見つかった問題はRC5で、経路はパスの配列&はデコレータではなく、 'provideRouter'ではなく 'RouterModule'をインポートする必要があります。エクスポート中に 'RouterModule.forRoot'を使用する必要があります。

また、RC5では、経路を設定するときにコンポーネントの文字列名を指定しなくなりました。代わりに、パス&コンポーネントのみを指定します。そして、パスに接頭辞 '/'を使用しなくなりました。また、代わりにuseAsDefaultを使用せず、redirectToプロパティを使用してデフォルトパスを設定します。

以前のルートコンポーネントではなく、別のモジュールを使用してルート構成を行っています。私のルート設定の更新版は以下の通りです。これが役に立つと願っています。

app.routes.ts

import { Routes, RouterModule } from '@angular/router'; 
import { ProductListComponent } from './products/product-list.Component'; 
import { WelcomeComponent } from './home/welcome.component' 
import { ProductDetailComponent } from './products/product- detail.component'; 

const routes: Routes = [ 
{ 
    path: 'welcome' , 
    component: WelcomeComponent, 
}, 

{ 
    path: 'products' , 
    component: ProductListComponent 
}, 

{ 
    path: 'product/:id' , 
    component: ProductDetailComponent 
}, 

{ 
    path:'', 
    redirectTo:'/welcome', 
    pathMatch:'full' 
}, 
]; 

export const routing = RouterModule.forRoot(routes);