angularjs - ejemplo - Cómo hacer que la aplicación html5Mode sea raíz relativa en lugar de raíz de servidor relativa

ng-init

Question

Para ayudar con el SEO y los enlaces profundos, encendí el modo html 5 en mi proyecto angular de esta manera:

index.html

<base href="/webapplicationname/">

app.js

  // use the HTML5 History API
  $locationProvider.html5Mode(true);

web.config

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Main Rule" 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="/webapplicationname/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

Mi raíz de depuración de IIS Express es http://localhost:10223 y mi raíz de desarrollo local es http://myvirtualmachine/webapplicationname .

/webapplicationname/ no existe en mi configuración de depuración. Tampoco existe en los otros entornos pasado dev. Pero se me ha transmitido que cualquier entorno podría estar fuera de la raíz o estar en una carpeta de aplicación web con un nombre que no controlo, por lo que no puedo contar con un patrón.

Solo quiero usar / como mi base . Si lo hiciera, funcionaría en la depuración. Quiero tener ese trabajo en otros entornos, independientemente de dónde viva la aplicación web en relación con la raíz del servidor web.

Tal como está, si cambio la raíz a / , como en <action type="Rewrite" url="/" /> y <base href="/"> , / apunta al lugar incorrecto en mi entorno de desarrollo local. http://myvirtualmachine/ a http://myvirtualmachine/ lugar de http://myvirtualmachine/webapplicationname , que generará 404s. ¡Necesita señalar la raíz de mi aplicación , no la raíz del servidor web!

¿Cómo puedo obtener la funcionalidad ~/ -like aquí?

Answer 1

En lugar de cambiar la base, puede usar el $ locationProvider

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

Esto debería ayudarte.

Answer 2

Esto es lo que hice para que esto funcione. Si alguien tiene una manera más limpia, házmelo saber.

Desactivé requireBase como dijo Rabi, lo que creo que ayuda si está creando la base de forma dinámica.

  $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
  });

En lugar de <base href="WhateverTheApplicationRootIs" /> , hice esto en el mismo lugar en el elemento html head :

  <script type="text/javascript">
    var firstPathPart = document.location.pathname.split("/")[1];
    var href;
    switch (firstPathPart) {
      case '''':
      case ''login'':
      case ''forgot-password'':
      case ''activation'':
      case ''home'':
      case ''mymainmenu1'':
      case ''mymainmenu2'':
      case ''profile'':
        href = ''/'';
        break;
      default:
        href = ''/'' + firstPathPart + ''/'';
    };
    document.write("<base href=''" + href + "'' />");
  </script>

que básicamente dice dinámicamente escribir la base. Escriba la base para señalar el primer segmento de la ruta de la url, excepto si resulta ser una de mis rutas angulares de nivel superior, en cuyo caso crea la raíz / .

En el web.config, dejé la referencia a /webapplicationname/ . Eso está permitido en nuestra tienda, ya que web.config se considera un entorno específico de todos modos. Por lo tanto, está permitido variar de entorno a entorno y administrarse con configuraciones separadas.

¿Por qué hice esto? Porque tener la base para ser cosas diferentes en diferentes ambientes no es aceptable en nuestra tienda. index.html es el código fuente, no la configuración. El código fuente tiene que ser el mismo en todos los entornos, aunque los archivos de configuración como web.config pueden variar.