[Angular2] Page reload breaks router

[HansMeise]

My SPA starts with something like http://localhost:3000/dist/dev which is mangement by the MainComponent. From there i can navigate to other components by clicking on buttons with routerLinks. So looking up a list of orders would show the childroute http://localhost:3000/dist/dev/orders which leads to loading the OrdersComponent. Furthermore clicking an order leads to the next childroute http://localhost:3000/dist/dev/orders/42 which shows the orders and the details of order 42.

Now the problem: If I reload the page with the url http://localhost:3000/dist/dev/orders/42 everything is fine and the order list + the order detail is shown. But If I reload http://localhost:3000/dist/dev/orders the router doesn't recognize the path and will only show the page, that would be shown if only http://localhost:3000/dist/dev was in the url, thus only loading the MainComponent and not the expected OrdersComponent. Any idea how to fix this?

Btw. I already fixed the "Cannot GET ..." error with redirecting all requests to the index.html:

  server.get('*', function(req, res, next) {
    res.sendFile(process.cwd() + APP_BASE + APP_DEST + '/index.html');
  });

[Günter Zöchbauer]

That's a browser feature.

Angular by default uses HTML5 pushstate (PathLocationStrategy in Angular slang). 

You either need a server that processes all requests like it were requesting `index.html` or you switch to `HashLocationStrategy` (with # in the URL for routes)

https://angular.io/docs/js/latest/api/router/HashLocationStrategy-class.html

[Günter Zöchbauer]

See also https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

[HansMeise]

Unfortunatley thats not the problem. As described I already fixed the problem you described (see "Btw. I already fixed the "Cannot GET ..." error with redirecting all requests to the index.html").
Nevertheless I also tried HashLocationStrategy, but this doesn't help for my problem either :(

[Günter Zöchbauer]

Sorry, seems I didn't read to the end.

Hard to tell without an repo example or actual code.

[HansMeise]

Ok I finally made a Plunker example in order to show the problem:

http://plnkr.co/edit/jJ27otJoVetyCfiLR79y?p=preview

So my problem again described with the plunker example (after launching it in a separate window, so you can see the actual angular url):

1. On the main page click on "Tables"

2. The TableComponent will load and show 2 entries. Also the url is now http://run.plnkr.co/<plunkerId>/#/tables/table

3. Click an entry and the entry detail will be shown below. Also the url is now http://run.plnkr.co/<plunkerId>/#/tables/table/detail/42 (or 43)

4. If you now press reload in the browser, the table and the tableentry detail will be shown again.

5. But: If you type in the url http://run.plnkr.co/<plunkerId>/#/tables/table or reload the page after step 2 the table won't be shown, since the TableComponent doesn't even load, despite the url still beeing http://run.plnkr.co/<plunkerId>/#/tables/table

I furthermore noticed, that if you press "Tables" again after step 4 the url will change to http://run.plnkr.co/<plunkerId>/#/tables/table as expected, but still show the DetailComponent, which is not expected.

I hope this helps to understand the issue. Thanks for all your patience :-)

[HansMeise]

Well I found the redirectTo property of RouteConfig on accident and this seems to fix atleast the reload issue, but still not the issue described in 6. 

So problem of step 5 is fixed by this code in app.component.ts:

@RouteConfig([
  {path:'/tables/...', name: 'Tables', component: TablesComponent},
  {path:'/tables/table', redirectTo: ['Tables']}
])

Am Montag, 18. Januar 2016 17:10:08 UTC+1 schrieb HansMeise:

Ok I finally made a Plunker example in order to show the problem:

http://plnkr.co/edit/jJ27otJoVetyCfiLR79y?p=preview

So my problem again described with the plunker example (after launching it in a separate window, so you can see the actual angular url):

1. On the main page click on "Tables"

2. The TableComponent will load and show 2 entries. Also the url is now http://run.plnkr.co/<plunkerId>/#/tables/table

3. Click an entry and the entry detail will be shown below. Also the url is now http://run.plnkr.co/<plunkerId>/#/tables/table/detail/42 (or 43)

4. If you now press reload in the browser, the table and the tableentry detail will be shown again.

5. But: If you type in the url http://run.plnkr.co/<plunkerId>/#/tables/table or reload the page after step 2 the table won't be shown, since the TableComponent doesn't even load, despite the url still beeing http://run.plnkr.co/<plunkerId>/#/tables/table

6. I furthermore noticed, that if you press "Tables" again after step 4 the url will change to http://run.plnkr.co/<plunkerId>/#/tables/table as expected, but still show the DetailComponent, which is not expected.