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

Question

I am using Angular2 Rc5 in my application and stuck in routing with NgModule.

I have one module in my application called product module (lazy loaded module) with two components called productListComponenent and ProductDetailComponenet. I also have a welcome page.

When I run the application welcome page appears and from there I can navigate to a product page and from there after clicking on any product I can navigate to product detail page.

The problem I am facing is I can not directly navigate to ProductDetail page. eg I can not browse this URL.

http://localhost:58248/products/1

My code for routing as follows.

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

when I directly browse the detail URL It gives me an error. Please refer to the attached image

.

Answer 1

If you are using RC5 make sure you use a slash in base tag not . which was belong to previous RC versions