Angular 2 NgMdoule和延迟加载路由问题

我在我的应用程序中使用Angular2 Rc5，在使用NgModule进行路由时遇到了问题

在我的应用程序中有一个名为product module（延迟加载模块）的模块，其中有两个组件名为ProductListComponent和ProductDetailComponenet。我还有一个欢迎页面

当我运行应用程序时，会出现欢迎页面，我可以从该页面导航到产品页面，单击任何产品后，我可以从该页面导航到产品详细信息页面

我面临的问题是无法直接导航到ProductDetail页面。e、 g我无法浏览此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);

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

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

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时，它会给我一个错误。请参考所附图片

---

.

如果使用RC5，请确保在基本标记中使用斜杠。它属于以前的RC版本

---

如果使用RC5，请确保在基本标记中使用斜杠。它属于以前的RC版本

---

您是如何运行web服务器的？它是本地服务器，例如

lite服务器

，还是由其他系统提供服务。看起来站点上的任何东西都没有从根点（即index.html）加载站点，因此它永远不会加载所需的JS文件。再举一个例子，我正在为我的项目使用

gulpserve

（就在开发方面）。如果它无法识别路径，我必须在其配置中添加一个fallback属性来加载

index.html

。这样做可以让站点在尝试导航到任何其他路径之前加载所有必需的JS。我使用的是visual studio 2015，它在IIS上承载应用程序。另外，如果我直接浏览这个URL，它也可以正常工作<代码>http://localhost:58248/products但我只面临细节页面的问题。路线似乎不正确。两个孩子走同一条路。你能用代码的关键部分做一个plunker，这样我们可以更仔细地查看它吗？@DeborahK请查看我关于

product.routing.ts

@DeborahK关于plnkr的最新问题，如果你甚至从

路由和导航

运行

Angular 2 hero应用程序（）doc您将无法直接浏览hero编辑/详细信息页面。您如何运行web服务器？它是本地服务器，例如
lite服务器
，还是由其他系统提供服务。看起来站点上的任何东西都没有从根点（即index.html）加载站点，因此它永远不会加载所需的JS文件。再举一个例子，我正在为我的项目使用
gulpserve
（就在开发方面）。如果它无法识别路径，我必须在其配置中添加一个fallback属性来加载
index.html
。这样做可以让站点在尝试导航到任何其他路径之前加载所有必需的JS。我使用的是visual studio 2015，它在IIS上承载应用程序。另外，如果我直接浏览这个URL，它也可以正常工作<代码>http://localhost:58248/products

但我只面临细节页面的问题。路线似乎不正确。两个孩子走同一条路。你能用代码的关键部分做一个plunker，这样我们可以更仔细地查看它吗？@DeborahK请查看我关于

product.routing.ts

@DeborahK关于plnkr的最新问题，如果你甚至从

路由和导航

运行

Angular 2 hero应用程序（）doc您将无法直接浏览hero编辑/详细信息页面。