Routing strategies in angular 4

Routing strategies in angular 4
1. HashLocationStrategy 2. PathLocationStrategy.

HashLocationStrategy
To enable it, we pass {useHash: true} where providing our routes with RouterModule, like so:

RouterModule.forRoot(routes, {useHash: true})

 
@NgModule({
  declarations: [
    AppComponent,
    UserManagementComponent,
    ItemManagementComponent,
    TitleCasePipe,
    HoverDirective,
    RegistrationComponent,
    UserProfileComponent,
    LoginComponent,
    ParentComponent,
    ChildComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    CustomFormsModule,
    // HttpModule,
    HttpClientModule,
    RouterModule.forRoot(routes, { useHash: true }),
    // AppRoutingModule,
    ButtonsModule.forRoot(),
    NgbModule.forRoot(),
    TabsModule.forRoot(),
    ToastModule.forRoot(),
    SpinnerComponentModule
  ],
  providers: [AppService, CustomInterceptor, AlwaysAuthGuardService, {  // CustomInterceptor,
    provide: HTTP_INTERCEPTORS,
    useClass: InterceptorService,
    multi: true
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

http://belrium.com/#/routing-strategies

However it has another very important characteristic in that anything past the # in a URL never gets sent to the server.
So if your URL was https://belrium.com/#/foo/moo/loo then the browser makes a GET request to https://belrium.com/ only.
The #/foo/moo/loo part of the URL is never sent. If you were to look at your logs on the server you would never see any reference to #/foo/moo/loo

It’s therefore an ideal solution for implementing client side routing:-

• It’s part of the URL so can be bookmarked and sent to other people.
• It won’t confuse the server side since the hash fragment is never sent to the server.
• It can be programmatically changed via JavaScript.

This' why it is called a Single Page Application because only one page requested from the server.

PathLocationStrategy:

This is the default strategy in Angular and takes advantage of new HTML5 API called pushstate (from the HTML5 history API).
By using pushstate we can change the URL and not have the browser request the page from the server and without needing to use a hash fragment.
So if we were at http://belrium.com/search, we can change the URL to http://belrium.com/search/artist/1234/tracks and the browser won’t make a GET request to the server for /artist/1234/tracks

So the server needs to be able to return the main application code for every URL, not just the root URL.
So with PathLocationStrategy we need to co-operate with a server side that supports this functionality, it’s possible and quite easy to implement a server side like this but it does require some effort and cooperation.

We need to tell the browser what will be prefixed to the requested path to generate the URL.
In the head section of our HTML, by specifying a base href, either  like so,

'<'base href="/app" '/>'

 

To every navigation request, the value of the base href gets prepended, eg.
navigate to ['moo','foo'] with the above href the URL would change to /app/moo/foo.