web-dev-qa-db-fra.com

angular 2 Erreur d'actualisation du déploiement Azure: la ressource que vous recherchez a été supprimée, son nom a été modifié ou est temporairement indisponible

J'ai une application Angular 2 rc-2 avec un routage de base implémenté. Les chemins sont /path1 qui est le chemin par défaut et /path2. Le chemin de la maison / redirige vers /path1. Lorsque je l'exécute localement (lite-server), tout fonctionne bien. J'ai réussi à déployer cette application sur une application Web Azure. L'application fonctionne OK MAIS si je rafraîchis la page lorsque je suis en /path1 ou /path2 J'obtiens cette erreur: The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

Une approche possible consiste à implémenter la réécriture d'URL. J'ai ajouté un fichier web.config dans mon projet

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

Dans ce cas, je peux effectuer une actualisation sans obtenir ce message d'erreur, mais toute actualisation me redirige vers l'URL par défaut. Je me rafraîchis de /path2 et il me redirige vers /path1 (URL par défaut).

Des idées pour améliorer le rafraîchissement? :)

angularazureangular2-routing
33
g bas

Une version plus simple de la méthode de @Guilherme Teubl. Cela a parfaitement fonctionné pour moi.

<?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>
11
Ifesinachi Bryan

Si quelqu'un est toujours coincé avec cela, je voudrais ajouter deux choses.

  1. ajoutez le web.config à votre dossier src. Dans mon cas, avoir le web.config à la racine n'a pas résolu le problème.

  2. Ajoutez-le à votre .angular-cli.json ainsi

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

5
Leonardo Trimarchi

J'ai également rencontré ce problème et contourné cette erreur en utilisant le code suivant:

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

Vous pouvez en savoir plus sur HashLocationStrategy ici: https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html

1
Karan Bir