@angular/router not rendering the routes properly with parameters

Question

I'm using:
"@angular/core": "2.0.0-rc.1"
"@angular/router": "2.0.0-rc.1"

I'm trying to have multiple parameters for my Home Page, my routes are

@Routes([
    {path: '/', component: HomeComponent},
    {path: '/:mode', component: HomeComponent},
    {path: '/:mode/:email', component: HomeComponent}
]);

When I access http://localhost:2368/test it works and I get RouteParams.params.mode == 'test' However, when I try to add the second parameter by accessing http://localhost:2368/test/email I get:
GET http://localhost:2368/test/js/app.js 404 (Not Found)
The browser is trying to load the app.js from test/js url which obviously doesn't exist as test is suppose to be my first parameter.

Another problem I'm having, when I try to add a real email address as the parameter I get:
Cannot GET /[email protected]

Any help would be much appreciated.

EDIT:
The 404 error as due to my webpack config which was using the relative path.
but I still can't run the url with the two router parameters

So is the 404 now gone after fixing paths? What error do you get now? I guess your issue is stackoverflow.com/questions/31415052/… — Günter Zöchbauer
well basically I need to have multiple parameters for one route {path: '/page/:param1/:param2/:param3', component: HomeComponent} but when I navigate to page/value1/value2/value3 I get: Cannot match any routes. Current segment: 'value3'. Available routes: ['/page/:param1/:param2/:param3'] — Mush
That sounds like a new-router error. Can you try to invert the order of the routes in @RouteConfig() (/ last, /:mode/:email first)`? — Günter Zöchbauer
The order doesn't seem to make any difference, I've also tried with only one route — Mush

Mush Mush · Accepted Answer · 2016-05-24T08:10:00

I've added the two lines marked with the arrows and it works now.

bootstrap(App, [
    HTTP_PROVIDERS,
    ROUTER_PROVIDERS,
    provide(APP_BASE_HREF, { useValue: "/" }), <-------- Added
    provide(LocationStrategy, { useClass: HashLocationStrategy }) <-------- Added
    ]).catch(err => console.error(err));

thanks for the support Günter Zöchbauer

@angular/router not rendering the routes properly with parameters

1 Answers