The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

Vyacheslav (3) [Avatar] Offline
#1
Hi,
I could not find in Routing chapter the information on how to deal when we need some pages to be accessible both from the server and client?
Ex: http://localhost:59760/promark/101/01002 is configured as
{ path: 'promark/:manufacturerId/:partNumber', component: SparePartsDetails }

Do I need to add a separate routing config in my asp.net mvc app on the server too? Or there is a more elegant way?

Thanks!
jeremy.wilken (208) [Avatar] Offline
#2
I think you're asking how to ensure that if you serve the Angular application using your own server that you'll have to configure your server to handle an SPA (regardless of it being Angular or another framework). The documentation has a guide for using Visual Studio to configure this, look at the section about routing. https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

What happens is if your on page `promark/:manufacturerId/:partNumber` and you refresh, this does not initially load the index.html file (which is what bootstraps Angular). So you have to make the server understand when to send back the index.html file for any Angular routes. This is route rewriting, which is applicable in IIS or nginx or apache, just configured differently.
Vyacheslav (3) [Avatar] Offline
#3
I've googled a bit and found that using HashLocation strategy will not require URL rewriting, because such requests will not be sent to the server. What is your opinion about HashLocation or PathLocation strategies?
jeremy.wilken (208) [Avatar] Offline
#4
Client side routing works if you start on the index and navigate around, but if you land on a deep link page (like /blogs/post-abc) and your server doesn't have rewriting setup properly you'll get a 404. The path and hash strategies are how the client side routing is handled in the UI, which is not really related to your original question.
Vyacheslav (3) [Avatar] Offline
#5
In case of using HashLocation strategy if I manually enter the http://localhost/#/promark/101/01002 in browser the angular routing triggers and returns page ok. But if I enter http://localhost/promark/101/01002 wtout "#" I get 404.
jeremy.wilken (208) [Avatar] Offline
#6
That is correct. But please understand that when a browser requests http://localhost/promark/101/01002 it will ask the server to return the resource at that location. If your server doesn't handle rewrites it sends a 404, but if it does handle rewrites it can return the index.html content for your Angular application, Angular renders, and then it handles the routing in the client application.

When you use http://localhost/#/promark/101/01002, the browser is always making a request for the resource at http://localhost/, which returns the index.html file. The # and following content is not handled by the server, but only by the client. You can opt to use the hash, but I think the # gets in the way and is a workaround that can be solved better with server rewrites.