angularjs - error de actualización azul de angular 2 azure: el recurso que está buscando se eliminó, se cambió su nombre o no está disponible temporalmente

ng-click function

Question

Tengo una aplicación Angular 2 rc-2 con enrutamiento básico implementado. Las rutas son /path1 que es la ruta predeterminada y /path2 . La ruta principal / redirige a /path1 . Cuando lo ejecuto localmente (lite-server) todo funciona bien. Logré implementar esta aplicación en una aplicación web de Azure. La aplicación funciona bien, PERO si actualizo la página cuando estoy en /path1 o /path2 Recibo este error: The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

Un posible enfoque es implementar la reescritura de URL. Agregué un archivo web.config en mi proyecto

<?xml version="1.0" encoding="UTF-8"?>

<configuration>
    <system.webServer>
        <rewrite>
        <rules>
        <clear />

         <!-- check if its path1 url and navigate to default page -->
        <rule name="Path1 Request" enabled="true" stopProcessing="true">
        <match url="^path1" />
        <action type="Redirect" url="/index.html" logRewrittenUrl="true" />
        </rule>

         <!-- check if its path2 url and navigate to default page -->
        <rule name="Path2 Request" enabled="true" stopProcessing="true">
        <match url="^path2" />
        <action type="Redirect" url="/index.html" logRewrittenUrl="true" />
        </rule>

         </rules>
        </rewrite>
    </system.webServer>
</configuration>

En este caso, puedo realizar una actualización sin recibir este mensaje de error. Pero cualquier actualización me redirige a la URL predeterminada. Actualizo desde /path2 y me redirige a /path1 (URL predeterminada).

¿Algún pensamiento para mejorar la actualización? :)

Answer 1

Debe agregar el archivo web.config a su aplicación raíz Angular2. Así es como funcionan los servidores de Azure (servidor IIS).

Estoy usando webpack, así que lo puse en la carpeta src . No te olvides de copiarlo en tu carpeta dist cuando despliegues. Utilicé CopyWebpackPlugin para configurar mi paquete web para copiarlo.

Este es el archivo web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <clear />
                <rule name="Redirect to https" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
                </rule>
                <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>

Tiene 2 reglas:

La primera regla es redirigir todas las llamadas a https. Quítalo si no usas https.

La segunda regla es arreglar tu problema. Conseguí la referencia de la segunda regla aquí (gracias a gravityaddiction del usuario de www.reddit.com):

https://www.reddit.com/r/Angular2/comments/4sl719/moving_an_angular_2_app_to_a_real_server/

Answer 2

Si alguien sigue con esto, me gustaría agregar dos cosas.

1. agrega el web.config a tu carpeta src. En mi caso, tener el archivo web.config en la raíz no solucionó el problema.

2. .angular-cli.json a tu .angular-cli.json así.

   "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico", "web.config" ], ... } ],

Answer 3

También enfrenté este problema y resolví este error usando el siguiente código:

import { NgModule }      from ''@angular/core'';
import { BrowserModule } from ''@angular/platform-browser''; 
import { FormsModule }   from ''@angular/forms'';
import { AppComponent }  from ''./app.component'';
import { routing }       from ''./app.routes'';
import {AgmCoreModule} from ''angular2-google-maps/core'';
import { LocationStrategy, HashLocationStrategy } from ''@angular/common'';

@NgModule({
  imports: [ BrowserModule, FormsModule, routing, AgmCoreModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})

export class AppModule { }

Puede obtener más información sobre HashLocationStrategy aquí: https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html

Answer 4

Una versión más sencilla del método de @Guilherme Teubl. Esto funcionó perfectamente para mí.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular4" 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>