0

Querida Comunidad. Tengo el siguiente problema. Estuve desarrollando lo mas bien, hasta que quise subir el proyecto de angular a mi servidor, hice el ng build, pero no lograba ingresar a la página de inicio. Entonces comencé a jugar con el <base href="/"> del index.html y compilaba una y otra vez, además de no lograr que funcione bien en producción, ahora en desarrollo, cuando ejecuto ng serve a la pagina de inicio le agrega un # si bien, dicha página se muestra, al querer dirigirme a otra ruta, no la muestra, porque obviamente la direcciona sin el #. Si voy al home, se muestra de la siguiente manera: http://localhost:4200/#/ ¿Alguna ayuda para que esto no suceda? ¿Qué archivo del proyecto debería compartirles para buscar la solución? Mientras tanto, comparto el index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cens15</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
 
   {
     path:'home',
     loadChildren:()=>import('./pages/home/home.module').then(m=>m.HomeModule)
   }
   ,
   {
     path:'users',
     loadChildren:()=>import('./pages/users/users.module').then(m=>m.UsersModule)
   },
  {
    path:'alumnos',
    loadChildren:()=>import('./pages/alumnos/alumnos.module').then(m=>m.AlumnosModule)
  },
  {
    path:'cursos',
    loadChildren:()=>import('./pages/cursos/cursos.module').then(m=>m.CursosModule)
  },
  {
    path:'materias',
    loadChildren:()=>import('./pages/materias/materias.module').then(m=>m.MateriasModule)
  },
  {
   path:'**',
   redirectTo:'home'
 },

]
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Lo curioso es que en otro trabajo que tengo, lo hice de la misma forma (y lo hago, porque subo actualizaciones) y no estoy teniendo este problema. Espero que puedan ayudarme. Un saludos.

6
  • que servidor utilizas? por ejemplo deploy to tomcat 9 soluciona useHash:true -->titanwolf.org/Network/q/49ae1918-2313-4e2b-b3de-24d8788c0eac/y
    – nestdan
    Commented el 15 dic. 2021 a las 13:44
  • si estoy entendiendo bien a que te refieres utilizo Laragon (un equivalente a Wamp o Xamp) que a su vez levanta un Apache, ya había intentado el useHash:true, pero no solución el problema. Igual Gracias.
    – FerMV
    Commented el 15 dic. 2021 a las 22:56
  • Si me refería a intertar lo que comentas te puede ayudar esto?qastack.mx/programming/51182322/…
    – nestdan
    Commented el 15 dic. 2021 a las 23:17
  • podes tener en cuenta esto no se si es tu caso ?si LocationStrategy en HashLocationStrategy esta en la lista de proveedores la url se ve asi www.pagina.com/#/ -->{ provide: LocationStrategy, useClass: HashLocationStrategy },
    – nestdan
    Commented el 16 dic. 2021 a las 0:08
  • @nestdan Muchas gracias por el dato, al final encontré un repositorio casi actualizado, lo cloné, y levantó bien. Voy a tener en cuenta este comentario ahora al compilarlo y subirlo otra vez. Nuevamente gracias.
    – FerMV
    Commented el 16 dic. 2021 a las 0:37

1 respuesta 1

0

Llegué aqui porque tengo el mismo problema. Pude solucionarlo de la siguiente manera:

    @NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      relativeLinkResolution: 'legacy',
      useHash: false
    })

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.