2

Hola alguno que tenga idea de como hacer esto. Tengo una aplicación resulta que no e podido hacer que la url sea limpia

Por ejemplo:

midominio.com/propiedad/1/esto-es-una-url/categoria/madre-en-apuro

pero actualmente esta así:

midominio.com/#/propiedad/1/esto-es-una-url/categoria/madre-en-apuro

En mi app.routing.module.ts tengo lo siguiente:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';

import { HomeComponent } from './pages/home/home.component';
import { PropDetailPageComponent } from './pages/prop/prop-detail-page/prop-detail-page.component';
import { PrivacidadPageComponent } from './pages/privacidad-page/privacidad-page.component';
import { TermsyCondPageComponent } from './pages/termsy-cond-page/termsy-cond-page.component';
import { NotFoundComponent } from './pages/not-found/not-found.component';
import { NuevaPropComponent } from './pages/prop/nueva-prop/nueva-prop.component';
import { SignInComponent } from './pages/sign-in/sign-in.component';
import { NuevaPropOkComponent } from './pages/prop/nueva-prop-ok/nueva-prop-ok.component';
import { MiCuentaComponent } from './pages/mi-cuenta/mi-cuenta.component';
import { SearchComponent } from './pages/search/search.component';
import { PublicProfileComponent } from './pages/public-profile/public-profile.component';
import { SelectPrecioComponent } from './pages/select-precio/select-precio.component';
import { SelectPlanComponent } from './pages/select-plan/select-plan.component';
import { EditarPropComponent } from './pages/prop/editar-prop/editar-prop.component';

import { MercadoPagoOkComponent } from './pages/MP/mercado-pago-ok/mercado-pago-ok.component';
import { MercadoPagoFailComponent } from './pages/MP/mercado-pago-fail/mercado-pago-fail.component';
import { MercadoPagoPendComponent } from './pages/MP/mercado-pago-pend/mercado-pago-pend.component';
import { VerificationComponent } from './pages/verification/verification.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'home/:id', component: HomeComponent },
  { path: 'propiedad/:tipo_prop_nombre/:nombre_operacion/:provincia/:ciudad/:id/:titulo', component: PropDetailPageComponent },
  { path: 'propiedad/edit/:id', component: EditarPropComponent, canActivate: [AuthGuard] },
  { path: 'privacidad', component: PrivacidadPageComponent },
  { path: 'terminos', component: TermsyCondPageComponent },
  { path: "404", component: NotFoundComponent },
  { path: "signin", component: SignInComponent },
  { path: "new-prop", component: NuevaPropComponent, canActivate: [AuthGuard] },
  { path: "new-prop-ok", component: NuevaPropOkComponent, canActivate: [AuthGuard] },
  { path: "mi-cuenta", component: MiCuentaComponent, canActivate: [AuthGuard] },
  { path: "search", component: SearchComponent },
  { path: 'perfil/:id', component: PublicProfileComponent },
  { path: 'select-plan', component: SelectPrecioComponent },
  { path: 'update-plan', component: SelectPrecioComponent },
  { path: 'compraOk', component: MercadoPagoOkComponent },
  { path: 'compraFail', component: MercadoPagoFailComponent },
  { path: 'compraPending', component: MercadoPagoPendComponent },
  { path: 'verify/:id', component: VerificationComponent },
  { path: "**", redirectTo: "/404" },

];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})

export class AppRoutingModule { }

1 respuesta 1

2

El símbolo # en inglés se llama hash. Sabiendo esto es fácil deducir que basta con el siguiente cambio:

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule]
})
4
  • No hay ninguna complicación extra en hacer esto?
    – Legna
    Commented el 13 feb. 2019 a las 22:36
  • No me funciona a pesar que hice lo que me pides
    – vdjkelly
    Commented el 14 feb. 2019 a las 1:50
  • 1
    @vdjkelly había probado esta solución mucho antes de que actualizara mis proyectos a la version 7.2.2 de Angular y por ende al ver tu pregunta (respuesta) me dio por probar de nuevo y ahora tengo mis direcciones de forma correcta. Por eso la marco, deberías de probar si esto ayuda.
    – jecorrales
    Commented el 16 feb. 2019 a las 23:53
  • Lo que me lleva a realizar una pequeña pregunta técnica del ¿por qué se utiliza este "hash" dentro de las rutas?
    – jecorrales
    Commented el 17 feb. 2019 a las 0:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.