angular 2 azure deploy refresh error: La risorsa che stai cercando è stata rimossa, ha cambiato nome o è temporaneamente non disponibile

Question

Ho un'app Angular 2 rc-2 con instradamento di base implementato. I percorsi sono /path1 che è il percorso predefinito e /path2. Il percorso di casa / reindirizza a /path1. Quando lo eseguo localmente (lite-server) tutto funziona correttamente. Sono riuscito a distribuire questa app in un'app Web di Azure. L'applicazione funziona bene ma se mi aggiorna la pagina quando ho m in /path1 o /path2 ottengo questo errore: The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

Un possibile approccio è quello di implementare URL Rewrite. Ho aggiunto un file web.config nel mio progetto

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

In questo caso posso fare un aggiornamento senza ottenere questo errore message.But qualsiasi aggiornamento mi reindirizza l'URL predefinito. Aggiornamento da /path2 e reindirizza a /path1 (url predefinito).

Qualche idea per migliorare l'aggiornamento? :)

Answer 1

È necessario aggiungere web.config alla tua app Angular2 di root. Ecco come funzionano i server di Azure (IIS Server).

Sto usando il webpack così l'ho messo nella cartella src. Non dimenticare di copiarlo nella cartella dist quando si disinstalla. Ho usato CopyWebpackPlugin per configurare il mio webpack per copiarlo.

Questo è il file 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> 

Dispone di 2 regole:

prima regola è quella di reindirizzare tutte le chiamate a https. Rimuovilo se non usi https.

La seconda regola è quella di risolvere il problema. Ho avuto di riferimento della seconda regola qui (grazie all'utente gravityaddiction da www.reddit.com):

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

Answer 2

ho anche affrontato questo problema ed ho ottenuto intorno a questo errore utilizzando il codice seguente:

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

si può imparare di più su HashLocationStrategy qui: https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html

Answer 3

Una versione più semplice del metodo di @Guilherme Teubl s'. Questo ha funzionato perfettamente per me.

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