名前が見つからない@Routes

私はいくつかの子を持つレイアウトオブジェクトを作っています。親オブジェクトにすべての子オブジェクトのルーティングを宣言したい - 私のapp.module.tsにないことが望ましいここで名前が見つからない@Routes

は私HomeLayoutComponent

<router-outlet name="body"></router-outlet> 
<router-outlet name="css"></router-outlet> 
<router-outlet name="header"></router-outlet> 
<router-outlet></router-outlet> 
<router-outlet name="footer"></router-outlet> 
<router-outlet name="scripts"></router-outlet>

のための私のマークアップでここで起こっビットがありますが、私は別のCSSを含むさまざまなページのための3種類のテンプレートが、異なるスクリプトを持っているので、私は外に作品を交換しなければならない、と<body>タグの異なる属性であっても。

エラーTS2304：名 'ルート' を見つけることができません

今HomeLayoutComponent

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

import { HomeBodyComponent } from './home-body.component'; 
import { HomeCssComponent } from './home-css.component'; 
import { HomeHeaderComponent } from './home-header.component'; 
import { HomeContentComponent } from './home-content.component'; 
import { HomeFooterComponent } from './home-footer.component'; 
import { HomeScriptsComponent } from './home-scripts.component'; 

@Component({ 
    selector: 'home-layout', 
    template: require('./home-layout.component.html') 
}) 
@Routes([ 
     { path: '', component: HomeBodyComponent, outlet: 'body' }, 
     { path: '', component: HomeCssComponent, outlet: 'css' }, 
     { path: '', component: HomeHeaderComponent, outlet: 'header' }, 
     { path: '', component: HomeContentComponent }, 
     { path: '', component: HomeFooterComponent, outlet: 'footer' }, 
     { path: '', component: HomeScriptsComponent, outlet: 'scripts' } 
]) 
export class HomeLayoutComponent { 

}

私の問題のためのtypescriptですが@Routesは、このエラーメッセージを表示してerroringされていることです。

私はこれをすべて間違っていると思います。私はapp.moduleにルートを入れる必要があります。その1つのファイルで非常に多くのルートを避けたいと思っていました。

Difference between router and router-deprecated in angular2によれば、私はRouteを使用していて、私が実際に他のGoogleの結果で見ているRouterConfigは使用しないでください。

出典

2016-10-26 Josh

これはもはやルートの作成方法ではありません。今度はRouterModuleを使用して、ルートで設定する必要があります。 Routesはまだまだですが、デコレータとしては使用されていません。 タイプはRouterModule.forRoot(Routes)に渡す必要があります。だから我々はここで

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

const routes: Routes = [ 
    { path: '', component: HomeBodyComponent, outlet: 'body' }, 
    { path: '', component: HomeCssComponent, outlet: 'css' }, 
    { path: '', component: HomeHeaderComponent, outlet: 'header' }, 
    { path: '', component: HomeContentComponent }, 
    { path: '', component: HomeFooterComponent, outlet: 'footer' }, 
    { path: '', component: HomeScriptsComponent, outlet: 'scripts' } 
] 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    bootstrap: [ AppComponent ] 
}) 
class AppModule {}

ような何かをするだろう、我々はRoutesに渡し、そのforRootメソッドを呼び出すと、AppModuleにRouterModuleをインポートする必要があります。ルーティングは、それが一般的である別のファイルにある場合は、

const routes: Routes = [...] 

export const appRouting = RouterModule.forRoot(routes);

app.module.ts

app.routing.tsような何かを行うことができ

import { appRouting } from './app.routing' 

@NgModule({ 
    imports: [ appRouting ] 
}) 
class AppModule {}

参照してください。また：

Routing & Navigation

出典

2016-10-26 02:32:55

バマー。 app.module.ts内のすべてのルートを宣言する必要はないと思っていました。あなたのファイルレイアウトではルートファイルに分割することができますが、それでも私はすべてのコンポーネントを宣言する必要があります。理想的ではありませんが、角度1では、コントローラと指令を使用するためにコントローラと指令を「登録」する必要はありませんでした。 – Josh

名前が見つからない@Routes

答えて

関連する問題