2016-08-22 13 views
0

私のアプリケーションでAngular2 Rc5を使用していて、NgModuleでのルーティングに固執しました。角度2 NgMdouleとレイジーロードされたルーティングの問題

私のアプリケーションにはproductListComponenentとProductDetailComponenetという2つのコンポーネントがある製品モジュール(遅延ロードモジュール)というモジュールが1つあります。私もウェルカムページを持っています。

私がアプリケーションを起動すると、ウェルカムページが表示され、そこで製品ページに移動できます。そこから製品をクリックすると、製品の詳細ページに移動できます。

私が直面している問題は、ProductDetailページに直接ナビゲートできないことです。たとえば、このURLを参照できません。

http://localhost:58248/products/1 

以下のようにルーティングするためのコードです。

app.routing.ts

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

const appRoutes: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: 'products', loadChildren: 'app/products/product.module' } 
]; 

export const appRoutingproviders: any[] = []; 

export const routing = RouterModule.forRoot(appRoutes); 

product.routing.ts

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

import { ProductListComponent } from './product-list.component'; 
import { ProductDetailComponent } from './product-detail.component'; 



const appRoutes: Routes = [ 
    { path: '', component: ProductListComponent}, 
    { path: ':id', component: ProductDetailComponent }, 
    ]; 

export const routing = RouterModule.forChild(appRoutes); 

私は直接それは私にエラーを与える詳細URLを参照します。添付の画像を参照ください。

enter image description here

+0

どのようにWebサーバーを実行していますか?それは 'lite-server'のようなローカルサーバであるか、これは別のシステムによって提供されていますか?サイトを提供しているサイトはルートポイント(index.html)からサイトをロードしていないので、必要なJSファイルをロードしないようです。 別の例を挙げれば、私は自分のプロジェクト(開発側だけ)に 'gulp-serve'を使っています。パスを認識できなかった場合、 'index.html'をロードするためにフォールバックプロパティを設定に置かなければなりませんでした。そうすることで、他のパスにナビゲートしようとする前に、必要なJSをすべて読み込むことができます。 –

+0

私はVisual Studio 2015を使用しており、IIS上でアプリケーションをホストしています。また、私は直接このURLを参照してもうまく動作します。 「http:// localhost:58248/products」 しかし、私は詳細ページの問題に直面しています。 –

+0

ルートが正しくないようです。どちらの子供も同じルートを持っています。コードの重要な部分でプランナーを使って、もっと詳しく見ることができますか? – DeborahK

答えて

2

RC5を使用している場合は、ベースタグにスラッシュを使用しないでください。以前のRCバージョンに属していました

関連する問題