@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 /test@email.com

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 http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser — Günter Zöchbauer, May 24 '16 at 05:59
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, May 24 '16 at 06:34
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, May 24 '16 at 06:38
The order doesn't seem to make any difference, I've also tried with only one route — Mush, May 24 '16 at 06:41
What happens when you use a `routerLink` in the root component to navigate to this path? — Günter Zöchbauer, May 24 '16 at 06:50
I've added ngOnInit() { this.router.navigate(['/value1/value2']); } on my appComponent and that worked correctly, but it kinda misses the point no? — Mush, May 24 '16 at 06:54
I guess I would need to see a Plunker where this can reproduced. — Günter Zöchbauer, May 24 '16 at 06:58
I don't want to run it locally. I would look at a Plunker. A GitHub repo usually contains way more code than is necessary to reproduce and I don't wan't to investigate a whole project. — Günter Zöchbauer, May 24 '16 at 07:09
I added `` in `` and commented out `APP_BASE_HREF` and the error got away. `"."` is the right value for Plunker and a different value might be required with your local setup http://plnkr.co/edit/diDmX3r46lcg8bTz06IL?p=preview — Günter Zöchbauer, May 24 '16 at 08:04
yes on my local I've just added: provide(APP_BASE_HREF, { useValue: "/" }), provide(LocationStrategy, { useClass: HashLocationStrategy }) on my boostrap and everything works now!!! Thanks!! — Mush, May 24 '16 at 08:06

score 0 · Answer 1 · answered May 24 '16 at 08:10

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 Answers1