Angular Query Location Strategy

By default Angular has 2 option for route your application:

1. PathLocationStrategy Angular by default is used that relies in the History API , that means that is only usable by browsers that can support HTML5.
2. HashLocationStrategy This works by adding a hash sign # in the URL, the portion after the # indicates the view that will be used by the router. It is supported by all browsers even older ones.
3. QueryLocationStrategy This location strategy it is a combination between PathLocationStrategy and HashLocationStrategy. One custom parameter indicates the view that will be used by the router and without to have dependencies by route pathname.

	Path Strategy	Hash Strategy	Query Strategy
Use # in url	✅	➖	✅
Runs in any path names	➖	✅	✅

Installation

@NgModule({
   imports: [
      RouterModule.forRoot(routes),
      NgxLocationStrategiesModule.forRoot({ routeQueryName: "my-app" })
   ],
   exports: [RouterModule],
})
export class AppRoutingModule {
}

Example

Path Strategy http://localhost:4200/posts?orderby=name
Hash Strategy http://localhost:4200/#/posts&orderby=name
Query Strategy http://localhost:4200/?my-app=/posts&orderby=name#myTag