Angular 7 y IIS

En ocaciones nos pasa que estamos desarrollando una aplicacion en angular y no nos gusta que las URLS este el llamado HashTag (#) que tiene angular en su configuración. Existe una manera mediante la configuración para quitarlo facilmente, en el archivo de rutas: ejemplo

//En este caso no sale el hash tag
@NgModule({
  imports: [RouterModule.forRoot(routes)],  
  exports: [RouterModule]
})

// En este casi si sale solo con poner el useHash:true
@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],  
  exports: [RouterModule]
})

En el caso de que useHash:false, ocurre que cuando se sube el proyecto a un servidor (Hosting) y estamos navegando por una url, cuando se actualiza la misma o se refresca el servidor muestra un error o 404 o 505, esto es devido a que el angular no encuentra el index del proyecto donde redirigir las rutas declaradas en el archivo de rutas.

La solucion que encontre despues de buscar varios días es la siguiente:

Primero crear un fichero llamado web.config en el path NombreProyecto/src/web.config luego agregar el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>

Luego de esto en el archivo angular.json agregar lo siguiente:

"assets": [
    "src/favicon.ico",
    "src/assets",
    "src/web.config" //agregar esta linea
],

Lo siguiente sería ng build –prod y listo.

Estos pasos fueron suficientes para que cuando refrescara una página que estuviera navegando; el servidor no me mostrara el error 404 o 505.

Please follow and like us:
error

Leave a Reply

Your email address will not be published. Required fields are marked *