Angular — The hash trap

By Houssène Dao, full stack developer – AKIL Technologies

For developers who use the SPA, it may be common to notice a sharp at the URL level. Since the new version of Angular it is possible to work on an application without seeing this famous character at the URL level. Is that normal? For most people it seems to be pretty cool, actually it’s cool, because we find the usual syntactic of URLs.

Is that normal?

Yes, it’s normal to work on an Angular app without seeing thehash. (#) It is still only existing that it is disabled by default on different versions of Angular.

It’s a trap!

Surprising isn’t it? Yes, a trap the concern arises once the application deploy on a production server. You say to yourself, but if it works locally in principle no problem for a production environment, unfortunately not usually in production environment when trying to navigate between pages or even updated the entry page we have a page-type error 404code> not found.

The solution

TheAngular team proposes the use ofUniversal Angular. If you want to use a simple and easy solution, I recommend using the hash

How do I activate thehash?

To activate the hash we have two methods

First method

In app.module.ts

• It’s important

import - HashLocationStrategy, LocationStrategy - from'@angular/common';

• Then we add this line to the NgModule as a provider

{provide: LocationStrategy, useClass: HashLocationStrategy}

Example (app.module.ts):

import { NgModule }       from '@angular/core';import { BrowserModule  } from '@angular/platform-browser';import { AppComponent }   from './app.component';import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({    declarations: [AppComponent],    imports: [BrowserModule],    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],    bootstrap: [AppComponent],})export class AppModule {}

Second method

On utilise RouterModule.forRoot avec pour argument {useHash: true}.

Example: (app-routing.module.ts)

import { NgModule } from '@angular/core';...

const routes: Routes = [//routes in here];

@NgModule({  imports: [    BrowserModule,    FormsModule,    RouterModule.forRoot(routes, { useHash: true })  ],  bootstrap: [AppComponent]})export class AppModule { }

Conclusion

And that’s all, if you’re having trouble with activating the hash just leave a comment, I’d be happy to reply to you.

Thank you!