2

Escribo por que mi problema es el siguiente tengo un sitio básico hecho con angular a modo de practica pero caí en cuenta de dos cosas una vez que lo lleve a producción ( ng build --prod ), que en los lugares que deje el href y no el routerLink simplemente redirecciona pero me aparece el siguiente error,

introducir la descripción de la imagen aquí

y es básicamente lo mismo si intento acceder por medio de la url poniendo directamente http://localhost/login ( en este caso lo subí a un servidor local pero al subirlo a un hosting el error persiste )

¿Hay alguna forma que se pueda acceder a distintos componentes, no solo al principal por la url ? algo así como en el entorno de desarrollo que era solamente poner http://localhost:4200/login

introducir la descripción de la imagen aquí

probablemente este fallando en algo de la rutas o eso quiero pensar :D

<code>
const routes: Routes = [
  {
    path: '',
    redirectTo: '/main',
    pathMatch: 'full'
  },
  {
    path: 'main',
    component: MainComponent
  },
  {
    path: 'media',
    component: MediaComponent
  },
  {
    path: 'list',
    component: ListComponent
  }
  ,
  {
    path: 'register',
    component: RegisterComponent
  }
  ,
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'not-found',
    component: NotFoundComponent
  },
  {
    path: '**',
    redirectTo: 'not-found'
  }  
];
</code>

1 respuesta 1

4

Se trata del problema habitual con el routing HTML5 y la configuración del servidor web. Al cargar el enlace directamente el servidor web intenta resolver la ruta y no Angular, ya que Angular aún no se ha cargado debido a que el index del sitio no se ha cargado... (y por consiguiente ningún script se ha cargado en el navegador)

Respecto a este tema tienes dos opciones:

1. Configurar la aplicación para realizar el routing con el hash.

En el módulo donde estás definiendo las rutas, al momento de proveer el RouterModule especifica en las opciones que use el hash:

imports: [RouterModule.forRoot(APP_ROUTES, { useHash: true })],

De esa manera, no habrá problema con el routing de HTML, sin embargo la URL de tu aplicación ahora se verá así:

http://localhost:4200/#/login

2. Delegar esa configuración al servidor web.

Sea Nginx, Apache, ExpressJS, etc... debes configurarlo para que siempre redireccione primero al index.html antes de intentar resolver una ruta. Te dejo dos ejemplos:

NodeJS

app.get('/*', function(req, res) { 
    res.sendFile(__dirname + '/index.html');
});

Nginx

location / {
    try_files $uri $uri/ /index.html;
}

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.