Saltar al contenido

Angular 2 Elimina Hash (#) de la URL

Solución:

Como señaló @Volodymyr Bilyachat, PathLocationStrategy es una estrategia de ubicación predeterminada en Angular2, y si el # está presente en la URL, debe haber sido anulado en alguna parte.

Además de los proveedores de módulos, verifique las importaciones de sus módulos, también se puede anular proporcionando el { useHash: true } como el segundo argumento de la RouterModule.forRoot:

imports: [
    ...
    RouterModule.forRoot(routes, { useHash: true })  // remove second argument
]

También tenga en cuenta que al usar PathLocationStrategy necesita configurar su servidor web para servir index.html (punto de entrada de la aplicación) para todas las ubicaciones solicitadas.

En angular hay estrategia de ubicación

Mire en app.module.ts donde la aplicación se inicia, allí tiene

@NgModule({
.......
  providers: [
....
    { provide: LocationStrategy, useClass: HashLocationStrategy },
....
]
});

Y elimine esta parte ya que PathLocationStrategy es la estrategia predeterminada

Las respuestas anteriores tienen la explicación correcta sobre cómo eliminar el Hash de la URL, pero cuando cambia LocationStrategy su back-end se verá afectado porque el back-end no comprende todos sus Angular 2 Rutas. Estos son los pasos para eliminar el hash con el soporte de back-end.

1) Cambie Angular para usar PathLocationStrategy

@NgModule({
  .....
  providers: [
    // Below line is optional as default LocationStrategy is PathLocationStrategy
    {provide: LocationStrategy, useClass: PathLocationStrategy} 
  ]
})

2) Cambie el Href base en index.html, Angular2 manejará todas las rutas después del Href base

<base href="https://foroayuda.es/app-context/">

Por ejemplo

<base href="https://foroayuda.es/app/">

3) En el servidor backend, debemos renderizar el archivo index.html para cualquier solicitud que venga con el patrón siguiente

"/app/**" - Render index.html for any request coming with "/app/**" pattern

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <base href="https://foroayuda.es/app/">
  </head>
  <body>
    <app-root>Loading...</app-root>
    <script type="text/javascript" src="vendor.bundle.js"></script>
    <script type="text/javascript" src="main.bundle.js"></script>
  </body>
</html>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

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