Desplegar aplicación Angular en subruta del IIS (Internet Information Service) 👨‍💻

Cuando hablamos de desplegar 🚀 aplicaciones web no todo es Linux y Nginx.

En entorno industriales 🏭 es muy común tener Windows Server como servidores de aplicaciones y es posible que estés limitado a usar el servidor web de Microsoft, Internet Information Services (IIS).

Si vas a desplegar 👨‍💻 una aplicación web desarrollada con Angular en una subruta de un IIS tendrás que tener en cuenta algunos detalles, no será tan directo como desplegar en la ruta principal.

Crea el directorio para alojar los ficheros

Crea un directorio donde quieras que utilizarás para alojar los ficheros por los que estará formada la aplicación.

Crea la subruta en el IIS

Haz clic derecho en tu sitio principal en tu IIS y crea un directorio virtual.

A continuación, en el textbox de alias le asignarás el nombre de la subruta que quieras que el cliente llame para cargar tu nueva aplicación.

En el textbox de ruta de acceso física cargarás el directorio de tu equipo que contendrá los ficheros compilados de tu aplicación de Angular. El directorio que creaste en el punto anterior.

Compilando el proyecto

El comando por defecto para compilar tu proyecto de Angular es

ng build --configuration=production

El comando anterior generará todos los ficheros necesarios en una carpeta dist/nombre-de-tu-app en la carpeta de tu proyecto.

Si copias su contenido en la carpeta principal de tu IIS C:\inetpub\wwwroot tu aplicación cargará perfectamente.

Pero lo que queremos hacer es ejecutar nuestra aplicación en una subruta, por ejemplo https://tudominio.com/subruta.

Si subes tus ficheros compilados de Angular en el directorio físico que creamos en el primer punto verás que no funciona, y es porque tu aplicación de Angular está buscando los ficheros en la ruta principal de tu sitio.

Compilando para una subruta

Para que funcione tendrás que compilar usando el siguiente comando:

ng build --configuration=production --base-href "/subruta/"

Si quieres añadir un script build en tu package.json:

"build": "ng build --configuration=production --base-href \"/subruta/\"",

Si ahora copias los ficheros generados a tu directorio de la subruta de tu IIS verás que tu aplicación corre, pero... no carga los assets 😯

Encontrando los assets

Para que te cargue los assets, en tu aplicación tienes que hacer la llamada a la ruta escribiendo un ./ antes del assets, para indicar que vaya a buscar la carpeta de assets donde está el fichero index.html de la aplicación.

Por ejemplo 👇

           
<img
  class="logo_app"
  src="./assets/logo.jpg"
  height="32px"
  alt="Logo de la APP"
/>
  
        

🚩 Para las rutas en los ficheros CSS, no te funcionará, por ahora, estoy la propiedad que carga una ruta como un estilo en línea.

Por ejemplo, si quiere añadir una imagen como fondo en un div utilizando background-image, lo que hago es añadir en el html:

style="background-image: url('./assets/background-auth.jpg');"

Sé que no es muy elegante, pero hasta ahora no he encontrado otra forma.

Corrigiendo las redirecciones

Cuando hayas desplegado tu aplicación de Angular en el IIS y todo funcione, pero lo más probable es que cuando refresques la aplicación obtengas un 404 😱

Es debido a que hay que configurar la redirección URL base.

Para ello:

1. Crea un archivo web.config en el directorio raíz de la aplicación, es decir, donde está el index.html.
2. En su interior añade una sección system.webServer.
3. Dentro de system.webServer añade una sección rewrite.
4. Dentro de rewrite añade una regla de reescritura que redirija todas las solicitudes que no sean para archivos o directorios existentes al index.html, que es el archivo principal de la aplicación Angular.

Te debe quedar algo así:

          
<?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>
        

Añade el web.config al listado de archivos a añadir cuando compiles el proyecto, para ello:

1. Abre tu fichero angular.json
2. Busca dentro del campo con el nombre de tu proyecto, el campo de assets y añade al array el web.config

Te debería quedar algo así:

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

Vuelve a desplegar la aplicación en IIS.

Al refrescar la página, debería cargar correctamente sin el error 404 😉

Recomendación para desplegar el backend

Te recomiendo, que dentro del directorio virtual que has creado crees las aplicaciones que necesites para que toda tu aplicación y dependencias estén en un mismo sitio.

Hasta luego 🖖