Tengo el AngularJS proyecto de semillas y he añadido

$locationProvider.html5Mode(true).hashPrefix('!');

a la app.js archivo. Quiero configurar IIS 7 para enrutar todas las solicitudes para

http://localhost/app/index.html

así que esto funciona para mí. ¿Cómo puedo hacer esto?

Actualización:

Sólo he descubierto, descargado e instalado el IIS URL Rewrite module, con la esperanza de que esto hará que sea fácil y obvia para lograr mi objetivo.

Actualización 2:

Supongo que esto resume lo que estoy tratando de lograr (tomado de la AngularJS documentación del Desarrollador):

El uso de este modo requiere la reescritura de URL en el lado del servidor,
básicamente, usted tiene que reescribir todos sus enlaces a punto de entrada de su
aplicación (por ejemplo, index.html)

Actualización 3:

Todavía estoy trabajando en esto y me doy cuenta de que necesito NO redirect (tienen reglas que reescritura) de ciertas URLs como

http://localhost/app/lib/angular/angular.js
http://localhost/app/partials/partial1.html

así que cualquier cosa que está en el css, js, lib o parciales de directorios no es redirigido. Todo lo demás tendrá que ser redirigido a app/index.html

Alguien sabe cómo conseguirlo fácilmente, sin tener que añadir una regla para cada archivo?

Actualización 4:

Tengo 2 reglas de entrada se define en el IIS URL Rewrite module. La primera regla es:

¿Cómo puedo configurar IIS para la Reescritura de URL de una aplicación AngularJS en HTML5 modo?

La segunda regla es:

¿Cómo puedo configurar IIS para la Reescritura de URL de una aplicación AngularJS en HTML5 modo?

Ahora cuando me vaya a localhost/app/vista1 se carga la página, sin embargo, los archivos de soporte (el que esta en el css, js, lib parciales y directorios) también están siendo reescritos para la app/index.html página – así que todo se está volviendo como el index.html página sin importar qué URL se utiliza. Supongo que esto significa que mi primera regla, que se supone que para evitar estas direcciones Url de ser procesados por la segunda regla, no funciona.. alguna idea? …¿alguien? …Me siento tan sola… 🙁

  • Gracias por esto! Muy útil!
  • la segunda regla es la crítica: lo que usted necesita para asegurarse de que es de enrutamiento para app/index.html y no app/ explícitamente desencadenar la página que sirve de AngularJS. he perdido 2 horas de mi vida antes de que me lo imaginé. 🙂
  • Otra forma de utilizar ASP.NET MVC y agregar a RouteConfig.cs: rutas.MapRoute(nombre de: «por Defecto», url: «{*nada}», por omisión: nuevo { controller = «Casa», action = «Index», } ); y su HomeController Índice sólo devuelve Archivo(«~/index-anyhinghere.html», «text/html»); Entonces, su aplicación se convierte en IIS independiente
  • He tenido que instalar «reescritura de URL módulo de «Instalador de la Web'». Si el módulo de reescritura de url no existe, entonces mientras se recarga, vuelva a escribir no va a funcionar. INSTALE el módulo de reescritura de URL. 🙂
InformationsquelleAutor Dean | 2012-09-27

6 Comentarios

  1. 268

    Escribo una regla en la web.configuración después de $locationProvider.html5Mode(true) se establece en app.js.

    Esperanza, ayuda a alguien.

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

    En mi index.html he añadido esto a <head>

    <base href="/">

    No olvide instalar IIS Reescritura de URL en el servidor.

    Además, si utiliza la API de Web de IIS y, esto va a funcionar si su API es en www.yourdomain.com/api causa de la tercera entrada (tercera línea de estado).

    • Esto fue muy útil y me pareció que para ser el más completo. Gracias!
    • me alegro de ayuda @Mario
    • PERFECTO! Este fue un asunto difícil para mí, pasé horas y horas trabajando en esto. Gracias! CONSEJOS A NADIE: he añadido index.html a la <tipo de acción=»Reescribir» url»/index.html» /> a Continuación, en mi index.html (directorio raíz de archivo Angular de SPA, el <base href=»/index.html» /> Cuando me las apañé el código anterior, no coincide con mi <base href /> de modo que no funcione correctamente. Enorme puntales de la «/(api)» patrón también, yo seguía tropezando con la que parte.
    • Bonito y limpio solución, gracias!
    • lo que si puedo alojar en sitios web de Azure?
    • Kit de herramientas, tengo la misma pregunta. Yo, básicamente, ha implementado esta exactamente como Brad Martin describe en diciembre 31, pero no parece ayudar. Esto puede estar relacionado con Azure. Necesario investigar más …
    • Yo uso IIS 7.5 y permitir a los $locationProvider.html5Mode(verdadero) y el <base href=»/MyAppName/index.html» /> también hizo la web.config reglas, pero mi espalda botón me lanza la app , ¿sabes cómo solucionarlo ??
    • Para la agrupación y minificación de trabajo (suponiendo que su paquete de nombres contienen «bundles») ; <añadir entrada=»{REQUEST_URI}» pattern=»^/(paquetes)» negar=»true» /> Probado con angular-interfaz de usuario del router
    • Bueno… Que ayuda a
    • He intentado lo mismo sugerida por @Yagiz Ozturk. Las reglas agregadas en la web.config, agregó ruta de acceso base en <head>, que también se instala de Reescritura de Url 2.0, pero todavía estoy recibiendo un error 404. Estoy usando IIS 10
    • cómo cambiar esto en la web.config RewriteEngine On Options FollowSymLinks RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /#/$1 [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)/(.*)$ /#/$1/$2 [L]
    • Ozturk. Después de la sustitución de «api» con mi nombre de directorio, no estoy recibiendo un error 404 la página se está cargando. Después de pulsar F5, la pantalla se queda en blanco. Estoy utilizando componentes y el componente de enrutamiento. Después de pulsar F5, <ngOutlet> no se carga a todos
    • Gracias @YagizOzturk!, Esto funcionó después de instalar el IIS URL Rewrite module 2
    • Es una broma que tenemos que saltar a través de estos aros Angular de enrutamiento. Esto mata angular de enrutamiento para mí. Qué lío.
    • La muestra, casi por encima trabajado como escrito, tuve que corregir la ruta de acceso «(/api) en primer lugar. Entonces cuando me di cuenta que en mi navegador del cliente > modo de desarrollador en Red, mi Descanso devoluciones de llamada no fueron apareciendo, he añadido una cuarta regla {REQUEST_URI} patrón=»(/*.scriptName)» negar=»true» todo empezó a funcionar. Nota: si me golpeó el botón refresh, Angular no sabe cómo restablecer el estado de la ruta. Este es un desarrollador (me) o error de función dependiendo de cómo se mira el mundo. Gracias por tu post Ozturk!
    • Esto funcionó perfecto. Excepto cuando tratando de invocar a la OAuthAuth con Asp.Net WebApi. Mi TokenEndpointPath era la opción por defecto y no bajo /api. Considerar la adición de <add input="{REQUEST_URI}" pattern="^/(token)" negate="true" /> al final de la lista de condiciones. Luego de autenticación que va a funcionar tan bien.
    • A mí me funciona, gracias! Pero yo tenía la Reescritura de URL módulo instalado. Cuando he añadido la regla de reescritura que no estaba funcionando. Necesitaba ir a «Programas y Características», encontrar «IIS URL Rewrite Module 2» y, a continuación, llame a reparación de este módulo. Ahora está trabajando!
    • Él trabajó como un encanto! Thankyouuuuuu
    • Muchas gracias
    • gracias es muy útil, especialmente {REQUEST_URI}…
    • PERFECTO! lástima que el angular equipo tomó su código pero no menciona la api parte

  2. 36

    El IIS reglas de entrada como se muestra en la cuestión de HACER el trabajo. Tuve que borrar la caché del navegador y agregar la siguiente línea en la parte superior de mi <head> sección de la index.html página:

    <base href="/myApplication/app/" />

    Esto es debido a que tengo más de una aplicación en localhost y así lo solicita, a otros los parciales fueron tomadas para localhost/app/view1 en lugar de localhost/myApplication/app/view1

    Esperemos que esto ayude a alguien!

    • Yo no necesito esto, pero la pregunta ediciones eran grandes. Gracias!
    • También esto puede ser útil. Trabajó para mí cuando recarga la página. Sin ningún tipo de reglas especiales para cada archivo: coderwall.com/p/mycbiq
    • como @ash-dijo clarke, no es necesario pero es una buena práctica, de todos modos, ya que permite los enlaces de la página para ser agnóstico acerca de que «el subdirectorio» a la que pertenece.
    • Me encontré con la solución anterior trabajo, pero no en la recarga, aquí está mi código: stackoverflow.com/questions/25644287/iis-url-rewrite-rules Alguna idea?
    • No sé o he intentado ti filtrar ciertas llamadas. Una forma de hacerlo sería tener la API en otro dominio, etc. Pero tal vez esto no es una solución para u. Pero u puede continuar a hacer en mi enlace de arriba. Y tal vez el autor puede responder a usted?
    • Gracias por este y por los comentarios de todos. En mi caso, ya que estoy usando una .NET MVC estructura, en lugar de especificar una página de la regla de reescritura, por la que se especifica la URL a la MVC ruta a la página de índice y que lo hizo. (es decir. localhost/Home/Index). Además, he tenido a cuenta para las llamadas a la api en la regla de reescritura. En cualquier caso, este hilo me indicó la dirección correcta! Gracias
    • Usted también puede hacer algo como esto: [HttpGet Ruta(«», Orden = 1), Ruta(«{angularRoute}», Order = 2)] public ViewResult Index() { return View(); } Esto puede ser lo que @Nanar se refiere.
    • Tenía el mismo problema; la limpieza de la caché al parecer es clave pues bien, no consigo que trabajar de otra manera.

  3. 9

    En mi caso yo seguía recibiendo un 403.14 después de que yo había configurar correctamente las reglas de reescritura. Resulta que yo tenía un directorio que era el mismo nombre que uno de mis URL rutas. Una vez me quitaron el IsDirectory regla de reescritura de mis rutas funcionaba correctamente. Hay un caso en que eliminar el directorio de la negación puede causar problemas? Yo no puedo pensar en ninguna en mi caso. El único caso que se me ocurre es si usted puede navegar por un directorio con su aplicación.

    <rule name="fixhtml5mode" stopProcessing="true">
      <match url=".*"/>
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  4. 9

    El problema con sólo tener estas dos condiciones:

      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />

    es que sólo funcionan mientras el {REQUEST_FILENAME} existe físicamente en el disco. Esto significa que no puede ser escenarios donde una solicitud para un nombre incorrectamente vista parcial devolvería la raíz de la página en lugar de un 404 que podría causar angular para ser cargado dos veces (y en ciertas situaciones puede causar un desagradable bucle infinito).

    Por lo tanto, segura y a la «reserva» reglas sería recomendable, para evitar estas duro para solucionar los problemas:

      <add input="{REQUEST_FILENAME}" pattern="(.*?)\.html$" negate="true" />
      <add input="{REQUEST_FILENAME}" pattern="(.*?)\.js$" negate="true" />
      <add input="{REQUEST_FILENAME}" pattern="(.*?)\.css$" negate="true" />

    o de una condición que coincide con cualquier archivo que termina:

    <conditions>
      <!-- ... -->
      <add input="{REQUEST_FILENAME}" pattern=".*\.[\d\w]+$" negate="true" />
    </conditions>
  5. 1

    La forma más sencilla que he encontrado es sólo para redirigir las peticiones que desencadenan 404 para el cliente. Esto se hace mediante la adición de un hashtag incluso cuando $locationProvider.html5Mode(true) se establece.

    Este truco funciona para entornos con más de Aplicaciones Web en el mismo Sitio Web y que requieren URL restricciones de integridad (E. G. de autenticación externo). Aquí está el paso a paso de cómo hacer

    index.html

    Conjunto de la <base> elemento correctamente

    <base href="@(Request.ApplicationPath + "/")">

    web.config

    Primera redirigir 404 a una página personalizada, por ejemplo «Home/Error»

    <system.web>
        <customErrors mode="On">
            <error statusCode="404" redirect="~/Home/Error" />
        </customErrors>
    </system.web>

    Casa controlador

    Aplicar una simple ActionResult a «traducir» la entrada en un clientside ruta.

    public ActionResult Error(string aspxerrorpath) {
        return this.Redirect("~/#/" + aspxerrorpath);
    }

    Esta es la forma más sencilla.


    Es posible (recomendable?) para mejorar la función de Error con algunos mejorado lógica para redirigir 404 a cliente sólo cuando la dirección es válida y dejar que el 404 gatillo normalmente cuando nada se encuentra en el cliente.
    Digamos que usted tiene estos angular rutas

    .when("/", {
        templateUrl: "Base/Home",
        controller: "controllerHome"
    })
    .when("/New", {
        templateUrl: "Base/New",
        controller: "controllerNew"
    })
    .when("/Show/:title", {
        templateUrl: "Base/Show",
        controller: "controllerShow"
    })

    Tiene sentido para redirigir la URL del cliente sólo cuando se inicie con «/Nuevo» o «/Show/»

    public ActionResult Error(string aspxerrorpath) {
        //get clientside route path
        string clientPath = aspxerrorpath.Substring(Request.ApplicationPath.Length);
    
        //create a set of valid clientside path
        string[] validPaths = { "/New", "/Show/" };
    
        //check if clientPath is valid and redirect properly
        foreach (string validPath in validPaths) {
            if (clientPath.StartsWith(validPath)) {
                return this.Redirect("~/#/" + clientPath);
            }
        }
    
        return new HttpNotFoundResult();
    }

    Esto es sólo un ejemplo de la mejora de la lógica, por supuesto, cada aplicación web tiene diferentes necesidades

  6. 0

    He estado tratando de implementar una simple Angular 7 aplicación a un Azure Web App.
    Todo funcionaba bien, hasta el punto en que se actualiza la página. Al hacerlo, fue la presentación de mí con un error 500 – contenido movido.
    He leído tanto sobre el Angular docs y en alrededor de un buen par de foros, que necesito para agregar un sitio web.archivo de configuración para mi solución implementada y asegúrese de que la regla de reescritura de la reserva de la index.html archivo.
    Después de horas de frustración y de prueba y error de las pruebas, he encontrado el error era bastante simple: la adición de una etiqueta alrededor de mi archivo de lenguaje de marcado.

Dejar respuesta

Please enter your comment!
Please enter your name here