Angular 2 NgMdoule和延遲加載路由問題

我在我的應用程序中使用Angular2 Rc5，並且陷入了與NgModule的路由中。Angular 2 NgMdoule和延遲加載路由問題

我有一個模塊在我的應用程序中稱爲產品模塊（延遲加載模塊），其中包含兩個名爲productListComponenent和ProductDetailComponenet的組件。我也有一個歡迎頁面。

當我運行應用程序歡迎頁面時，我可以導航到產品頁面，點擊任何產品後，我可以導航到產品詳細信息頁面。

我面臨的問題是我無法直接導航到ProductDetail頁面。例如我無法瀏覽此網址。

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

，當我直接瀏覽詳細網址它給了我一個錯誤。請參閱附件圖片

。

來源

2016-08-22 Haseeb Khan

你是如何運行網絡服務器？它是本地服務器，例如'lite-server'，還是由不同的系統提供服務。它看起來像是提供站點的任何東西都不會從根節點（即index.html）加載站點，所以它從不加載所需的JS文件。舉另一個例子，我爲我的項目使用'gulp-serve'（就在開發方面）。如果它不能識別路徑，我必須在其配置中加入一個回退屬性來加載'index.html'。這樣做讓網站在嘗試導航到任何其他路徑之前加載所有必需的JS。 –

我使用visual studio 2015並在IIS上託管應用程序。另外如果我直接瀏覽這個網址，它工作正常。 'http：// localhost：58248/products' 但我只面臨與詳細信息頁面的問題。 –

路線似乎不正確。兩個孩子都有相同的路線。你可以用代碼的關鍵部分做一個笨重的部分，所以我們可以更仔細地看看它嗎？ – DeborahK

如果您使用的是RC5，請確保您在基本標籤中不使用斜槓。這是屬於以前的RC版本

來源

2016-08-23 14:41:55

Angular 2 NgMdoule和延遲加載路由問題

回答

相關問題