deploy - publicar angular en iis

Cómo desplegar la aplicación angular-cli en iis

Question

Tengo la aplicación angular2-cli simple (una página con formulario controlado por modelo, sin enrutador involucrado). Con "ng serve" todo funciona bien. Hice la versión de producción con ng build --product. Copié todo el contenido de la carpeta ./dist en una nueva carpeta en C: / inetpub / wwwroot. Hice una aplicación virtual desde la consola de gestión de IIS. El archivo de aplicación defualt es index.html. Navego a la aplicación uri y solo obtengo la página con "Cargando ...". Intento compilar sin el interruptor de producto (solo compilación ng) pero el resultado es el mismo. La aplicación angular no se está cargando. ¿Se necesita algo más para publicar la aplicación angular en IIS?

Answer 1

Además de la respuesta de ulubeyn que principalmente me funcionó, agregué mis propias reglas de reescritura de IIS para habilitar:

1) la redirección inicial de / dist al alias 2) descargas de Javascript del alias y 3) enrutamiento angular en el alias

<rules>
<rule name="Redirect from blank URL to IIS Alias" stopProcessing="true">
<match url="^/?$" />
<action type="Rewrite" url="/MyDist" />
</rule>
<rule name="Redirect from /dist folder to IIS Alias" stopProcessing="true">
<match url="^(.*)/dist" />
<action type="Rewrite" url="/yourAliasNameOnIIS" />
</rule>
<rule name="Allow Angular URL Routing on IIS Alias" stopProcessing="true">
<match url="^yourAliasNameOnIIS/*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/yourAliasNameOnIIS" />
</rule>
<rule name="Redirect to IIS Alias folder with parameters" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/yourAliasNameOnIIS/{R:1}" appendQueryString="true" />
</rule>
</rules>

Answer 2

Así es como resuelvo esta situación;

• Crear proyecto con angular-cli.
• Construye tu aplicación con ng build
• Abre IIS, crea un nuevo directorio virtual y muestra la carpeta dist
• Establezca base href en su index.html desde / hasta /yourAliasNameOnIIS

• Utilice este web.config para redireccionar solicitudes a su página index.html

  <system.webServer>
  <rewrite>
  <rules>
  <rule name="AngularJS Routes" stopProcessing="true">
  <match url=".*" />
  <conditions logicalGrouping="MatchAll">
  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
  <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
  </conditions>
  <action type="Rewrite" url="/yourAliasNameOnIIS" />
  </rule>
  </rules>
  </rewrite>

• Convierte tu directorio virtual a una aplicación web

También puede usar ng build --deploy-url "/yourAliasNameOnIIS" para cambiar la ruta src en dist/index.html .

¡Espero que ayude!

Answer 3

Cuando abres las herramientas de desarrollo de tu navegador, habrías visto los mensajes 404 cuando la aplicación intentaba descargar los archivos js, css, etc.

Debe establecer la base href en index.html para

<base href="./">

Esto asegurará que la referencia de referencia sea relativa a la ubicación de su sitio web en IIS. También debe utilizar la estrategia de ubicación de hash, de lo contrario, IIS interceptará los cambios en la URL del enrutador ng2 e intentará encontrar un controlador / acción para la URL.

bajo las importaciones de su app.module.ts:

RouterModule.forRoot(routerConfig, { useHash: true })

He realizado estos 2 pasos y todo funciona perfectamente en Azure VM con IIS. Hacerlo de esta manera también significa que no tiene que poner su SPA en la raíz y puede tener múltiples SPA que se ejecuten alegremente uno al lado del otro (en diferentes sitios web en IIS)

Answer 4

Me referí a muchas sugerencias, lo que funcionó para mí fue este link

Una buena explicación de por qué las cosas deben configurarse de una manera diferente para una aplicación Angular se describe claramente aquí. Seguí los pasos del enlace y luego agregué un web.config dentro de la ubicación de la carpeta de archivos publicados con la siguiente configuración:

<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

Los ajustes también se describen en el enlace de arriba. Espero que esto ayude a alguien.

Answer 5

Para aquellos que usan angular i18n, debe crear la aplicación para cada idioma y colocarlos en carpetas separadas.

ng build --output-path=dist/fr --prod --bh /fr/
ng build --output-path=dist/en --prod --bh /en/

y aquí está la configuración para iis

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<directoryBrowse enabled="true" />
<rewrite>
<rules>
<rule name="Imported Rule 1" stopProcessing="true">
<match url="^../index/.html$" ignoreCase="false" />
<action type="None" />
</rule>
<rule name="Imported Rule 2" stopProcessing="true">
<match url="(..)" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
</conditions>
<action type="Rewrite" url="{R:1}/index.html" />
</rule>
<rule name="Imported Rule 3">
<match url="^$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^fr" />
</conditions>
<action type="Redirect" url="/fr/" redirectType="Found" />
</rule>
<rule name="Imported Rule 5">
<match url="^$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^es" negate="true" />
</conditions>
<action type="Redirect" url="/en/" redirectType="Found" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

Answer 6

Para mí, fue muy simple:

1. Ejecute el comando ng build. Se generará la carpeta dist.
2. Haga href = "" en el archivo index.html .
3. Dar la ruta de la carpeta dist a la aplicación IIS y funcionará.

Esto lo hace aún más simple, no necesita modificar el archivo index.html :

ng build -prod --base-href

Answer 7

Probé el siguiente enfoque funcionó.

1. Crear nuevo sitio web en IIS (a través de inetmgr)
2. use "ng build --prod" - generando código de versión de producción
3. Copie los archivos de la carpeta dist y péguelos en la carpeta raíz del sitio web de IIS (No copie la carpeta y colóquela en la carpeta raíz del sitio web de IIS, lo que causará un problema)
4. Establece las credenciales, autorización y etc ... desde tu final.
5. Establezca el permiso de acceso de la carpeta raíz para "MACHINE_NAME / IIS_IUSRS & MACHINE_NAME / NETWORK SERVICE"
6. Establezca la página predeterminada como "index.html" en IIS
7. Ahora puedes navegar por el sitio web.

Answer 8

Puede implementarlo sin ningún archivo web.config como se muestra a continuación,

Puede encontrar index.html en la carpeta dist dentro de ella y encontrar la etiqueta base href

Ahora cambia su camino como corresponde

Ej: si se está desplegando dentro de wwwroot

<base href="/">

Por ejemplo: si se implementa dentro de una carpeta en wwwroot

<base href="/FolderName/">