Introducción

En este post te mostraré cómo forzar que el router de Angular use el hash en la URL. Este hash también es conocido como almohadilla, gatito, etcétera.

De este modo nuestra aplicación web tendrá algo como: http://localhost:4200/#/productos en lugar de algo como http://localhost:4200/productos.

Prefiero este modo para la URL del router de Angular porque no afecta la URL en el servidor y porque simplemente me ha gustado desde que uso las SPA.

Forzar hash en ruta

Vamos al grano. Para hacerlo simplemente debemos indicar las configuraciones al invocar a RouterModule.forRoot(). Todo esto se hace en el archivo app-routing.module.ts:

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: true, // <- Indicar que se use el hash
  })],
  exports: [RouterModule]
})

Recuerda que en este caso forRoot recibe las rutas y la configuración. Mi archivo completo queda así (solo como ejemplo):

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {ProductosComponent} from './productos/productos.component';
import {ClientesComponent} from './clientes/clientes.component';
import {VentasComponent} from './ventas/ventas.component';
import {TiendaComponent} from './tienda/tienda.component';


const routes: Routes = [
  {path: 'productos', component: ProductosComponent},
  {path: 'clientes', component: ClientesComponent},
  {path: 'ventas', component: VentasComponent},
  {path: 'tienda', component: TiendaComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: true, // <- Indicar que se use el hash
  })],
  exports: [RouterModule]
})
export class AppRoutingModule {
}