Angular router: forzar hash en URL

Dejar un comentario / Framework Angular / Por

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 {
}

 

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *