Angular 2 NgMdoule和Lazy Loaded Routing问题

Question

我在我的应用程序中使用Angular2 Rc5并使用NgModule进行路由。

我的应用程序中有一个名为product module（lazy loaded module）的模块，它有两个名为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);

当我直接浏览详细信息URL时它给了我一个错误。请参阅附图

Answer 1

如果您使用的是RC5，请确保不在基本标签中使用斜杠。这属于以前的RC版本