在没有“＃”且没有副作用的情况下进行路由时，Angular 4如何更改URL？

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?

Answer 1

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.

Answer 2

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:

• HashLocationStrategy
• PathLocationStrategy

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