How can Angular 4 change URL when routing without "#" and no side effects?

Question

In previous versions of angular, or other SPA frameworks, navigations used to use "#" in the URL to move from a page to another without make another request to the server.

Today, using Angular 4 routes, I notice that the URL was rewritten without any request to the server. for instance domain.com/about. It seems very strange to me.

If my SPA is served from a domain.com/index.html, a request to domain.com/about should have a side effect bring a totally diferente page (for instance about/index.hmtl), not a route inside the index.html.

Change URL without redirect to the address in the URL seems to violate something.. dont?

How Is that possible in Angular 4 using only client side?

see [my answer](https://stackoverflow.com/a/47058474/2545680), what are you trying to do? — Max Koretskyi, Nov 01 '17 at 16:39

score 2 · Answer 1 · answered Nov 01 '17 at 14:12

2

While you navigate on site, click links, tabs etc. - this all is just client side. However, when you press F5 or navigate to link like /school/6/personList - server should be configured to return index.html.

Thats why quite often rest api is smth like /api/users, /api/emails, etc. so all start with '/api' - and you may easily redirect all other requests to index.html.

answered Nov 01 '17 at 14:12

Petr Averyanov

9,327
3
20
38

But how we can change URL without redirect to another request ? – Daniel Santos Nov 01 '17 at 14:26
Are you telling me that the server MUST be configured to return any path to index.html. that is correct? – Daniel Santos Nov 01 '17 at 14:26
Yes, server must redirect all UI paths to 'index.html'. Changing url withour reload is possible -- https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page – Petr Averyanov Nov 01 '17 at 14:50
i think you may add this last comment to the answer =) – Daniel Santos Nov 01 '17 at 16:44

Max Koretskyi · Accepted Answer · 2017-11-01T17:24:59.847

1

Change URL without redirect to the address in the URL seems to violate something.. dont?

No, that's the point of Single Page Applications (SPA) as opposed to the other way where a request is sent to the server for each URL change.

Angular router has two location strategies:

navigations used to use "#" in the URL to move from a page to another without make another request to the server.

It's still possible now with Angular by using HashLocationStrategy, to do that just use {useHash: true} do the following:

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes, {useHash: true})
    ],

Today, using Angular 4 routes, I notice that the URL was rewritten without any request to the server

That's because the PathLocationStrategy is used by default.

Regardless of the strategy, if you're using Angular routing, all URL changes from the application will be handled by the router and no requests will be sent to the server. For example, the following code:

Router.navigateByUrl('/my')

in the case of PathLocationStrategy will generate the following URL:

host/my

and in the case of HashLocationStrategy it will generated ULR like this:

host#my

edited Nov 01 '17 at 17:24

answered Nov 01 '17 at 15:38

Max Koretskyi

101,079
60
333
488

I understand now the strategies, However it seems that Changing URL path without redirect to the address in the URL seems to "violate" something.. don't? – Daniel Santos Nov 01 '17 at 16:42
@DanielSantos, can you show in code what you mean by `Changing URL path without redirect to the address in the URL `? – Max Koretskyi Nov 01 '17 at 17:15
This is the example that id did above, mot probably I was not clear. I mean that with angular I'm able to virtually create routes like `domain.com/anything` but no server request was made to `domain.com/anything` the actual server request was to he `domain.com/index.html`. This is a open door to inconsistency. Suppose that there is something totally different at `domain.com/anything` when a server request was made. – Daniel Santos Nov 01 '17 at 17:20
Ok ! thanks, I understand that no request are made to the server, but still a open door to inconsistency if someone try to make a server request to that address and the server provide something else to the user. It's important to say that the server should be prepare to reply those requests properly – Daniel Santos Nov 01 '17 at 17:30
@DanielSantos, usually server is configured to rewrite most requests to `index.html` (apart from request for resource) – Max Koretskyi Nov 01 '17 at 17:31

How can Angular 4 change URL when routing without "#" and no side effects?

2 Answers2