html - Obtenga el enrutamiento Angular2 trabajando en IIS 7.5

iis-7.5

Question

He estado aprendiendo Angular2. El enrutamiento funciona bien cuando se ejecuta en el servidor lite de nodejs. Puedo ir a la página principal (localhost: 3000) y desplazarme por la aplicación. También puedo escribir localhost: 3000 / employee e irá a la página solicitada.

La aplicación eventualmente vivirá en un servidor Windows IIS 7.5. El enrutamiento funciona bien si comienzo en la página principal (localhost: 2500), puedo moverme a través de la aplicación sin ningún problema. Donde me encuentro con un problema es cuando intento ir directamente a una página que no sea la página de destino principal (localhost: 2500 / empleado). Obtengo un error HTTP 404.0.

Aquí está mi archivo app.component que maneja el enrutamiento.

import { Component } from ''@angular/core'';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from ''@angular/router-deprecated'';
import { HTTP_PROVIDERS } from ''@angular/http'';

import { UserService } from ''./services/users/user.service'';
import { LogonComponent } from ''./components/logon/logon.component'';
import { EmployeeComponent } from ''./components/employee/employee.component'';


@Component({
     selector : ''opi-app'',
     templateUrl : ''app/app.component.html'',
     directives: [ROUTER_DIRECTIVES],
     providers: [ROUTER_PROVIDERS, UserService, HTTP_PROVIDERS]
})

@RouteConfig([
     {
      path: ''/'',
      name: ''Logon'',
      component: LogonComponent,
      useAsDefault: true 
     },
     {
      path: ''/employee'',
      name: ''Employee'',
      component: EmployeeComponent
     }
])

export class AppComponent { }

Me gustaría decir que entiendo el problema. IIS está buscando un direcotry de / employee pero no existe. Simplemente no sé cómo hacer que IIS sea consciente del enrutamiento.

Answer 1

(Para angular 2, angular 4)

Cree un archivo web.config como en el artículo mencionado.

<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" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Colóquelo en el directorio raíz (igual que index.html) de su sitio. El mío está en la carpeta dist (proyecto angular-cli).

Después de la implementación, vaya a IIS si tiene acceso y puede hacer clic en el ícono de reglas de reescritura y ver que lea esta configuración. Si no ve un icono para las reglas de reescritura, deberá habilitar el módulo en el icono "módulos". Este fragmento de código no fue escrito por be, pero quería compartir mejores detalles de implementación.

Answer 2

Debería estar usando el módulo de reescritura de URL para lograr esto. .com/questions/12614072/… se proporciona una información muy detallada sobre cómo usarlo.

Y aquí está un fragmento de código web.config de muestra que me funcionó en IIS 8.

Answer 3

Mi aplicación angular 6 se está ejecutando en una subcarpeta y tuve problemas con el nombramiento para redirigir a la subcarpeta. En su lugar, redirigir directamente al index.html

Paso 1.) Crea una aplicación angular con la --base-href esta manera: ng build --prod --base-href /ng/

Paso 2.) Crea un web.config en esta carpeta con el redireccionamiento al index.html de esta manera:

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

Answer 4

Si usa un proyecto Core 2.1, puede omitir las reglas de reescritura de web.config y realizar enlaces profundos en Angular colocando este código en la parte inferior de Startup.cs .

   app.Use(async (context, next) =>
   {
       context.Response.ContentType = "text/html";
       await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
   });

Source

Answer 5

Usar el módulo de reescritura de URL matará la ruta de enrutamiento dentro de la aplicación. He cambiado la página de error para la respuesta 404 No encontrado a mi archivo index.html . Esto no cambiará la URL en el navegador, pero el servidor devuelve toda la aplicación.

Cómo: Sitio-> Aplicación-> Páginas de error del menú contextual en el Código de estado 404, elija Editar ... y elija la opción Ejecutar URL en este sitio. Ingrese /index.html y presione OK. Tenga en cuenta que la ruta es desde la raíz del sitio, por lo que es posible que deba incluir la ruta de su aplicación.