Tengo un proyecto muy simple que tiene el siguiente enrutamiento.

const routes: Routes = [
  { path: "start", component: StartComponent },
  { path: "sub01", component: Sub01Component },
  { path: "", redirectTo: "/start", pathMatch: "full" },
  { path: "**", component: StartComponent }
];

Cuando lo ejecuto localmente usando ng serve y navego a localhost: 4200 , puedo ver el contenido de la página de inicio y la URL se reescribe a localhost: 4200 / start , tal como se esperaba. Luego, produje una versión semifinal con ng build y la puse en el directorio dist de mi IIS. Navegar hasta la dirección de la aplicación produce el mismo resultado que el anterior. También puedo confirmar que navegando a p. Ej. Las URL de las imágenes también producen el resultado esperado.

La diferencia, como noté, es que localmente, funciona para recargar la página (es decir, navegar a localhost: 4200 / start ) mientras que la misma operación en el control remoto falla, lo que me da 404 (así que navegando a http://address.that-worked-just.now/start no funciona). Como puedo acceder a otras URL además de la raíz, me parece que solo el enrutamiento no funcionará.

Estoy un poco asombrado por este comportamiento y no estoy seguro de cómo diagnosticarlo más. La única diferencia que conozco dentro de mi alcance es que, localmente, sirvo la aplicación utilizando la CLI angular predeterminada mientras estoy en el control remoto, tengo IIS que sirve index.html que contiene el script. Entonces me imagino que una vez que el documento se entrega al cliente, todo lo demás sucede en el cliente. (La aplicación es realmente limitada y no hay interacción con el servidor, no hay servicios, etc. ya que es básicamente una página de destino, al menos por ahora).

¿Me falta algo que debería declararse en alguno de los archivos de configuración? ¿O es probable que ocurra un mal comportamiento extraño debido a alguna política de firewall o algo así? No estoy seguro de cómo determinar eso y prefiero asumir que he hecho algo estúpido que culpar al equipo del servidor. Dada la descripción anterior, ¿qué más se puede inferir?

-2
Konrad Viltersten 3 ago. 2020 a las 14:25

1 respuesta

La mejor respuesta

IIS tiene su propio sistema de enrutamiento. Entonces, cuando alojemos Angular en IIS, el enrutamiento angular fallará, porque IIS no comprende el enrutamiento angular y buscará un recurso que coincida con la ruta y le dará un error 404.

Para resolver el problema, puede probar una de las siguientes soluciones:

Utilice la regla de reescritura de URL de IIS para establecer el enrutamiento:

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

Fuente: https://angular.io/guide/deployment#fallback-configuration-examples < / a>

Otra forma es agregar la página de error para 404 para redirigir a /index.html.

enter image description here

2
jonrsharpe 2 sep. 2020 a las 08:28