angular 2 azure déployer erreur de rafraîchissement: la ressource que vous recherchez a été retirée, son nom a été changé, ou est temporairement indisponible
j'ai une application 2 rc-2 angulaire avec routage de base implémenté.Les chemins sont /path1 qui est le chemin par défaut et /path2.Le chemin d'accès / redirection /path1. Quand je l'exécute localement (Lite-server) Tout fonctionne très bien. J'ai réussi à déployer cette application sur une application Web Azure. L'application fonctionne bien mais si je rafraîchis la page quand je suis dans /path1 ou /path2 j'ai cette erreur : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
une approche possible est d'implémenter la réécriture d'url. J'ai ajouté un web.fichier de configuration dans mon le 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 faire un refresh sans recevoir ce message d'erreur.Mais tout rafraîchissement me redirige vers l'url par défaut. Je actualisation à partir de /path2 et il me redirige vers /path1 (url par défaut).
des idées pour améliorer actualiser ? :)
4 réponses
Vous devez ajouter web.config le fichier à la racine de votre Angular2 app. C'est ainsi que les serveurs Azure (serveur IIS) fonctionnent.
J'utilise webpack donc je l'ai mis sur src dossier. N'oubliez pas de le copier sur votre dist dossier lorsque vous depploy. J'ai utilisé CopyWebpackPlugin pour configurer mon webpack pour le copier.
C'est le web.fichier de configuration:
<?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>
Il y a 2 règles:
1ère règle est de rediriger tous les appels vers https. Retirez-le si vous n ' utilisez pas https.
la 2e règle est de régler votre problème. J'ai reçu de référence de la 2ème règle ici (merci à l'utilisateur gravityaddiction à partir de www.reddit.com):
https://www.reddit.com/r/Angular2/comments/4sl719/moving_an_angular_2_app_to_a_real_server/une version plus simple de la méthode de @Guilherme Teubl. Cela a fonctionné parfaitement 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>
j'ai aussi affronté ce problème et j'ai 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
Si quelqu'un est encore coincé avec cela, je voudrais ajouter deux choses.
- ajouter le web.config dans le dossier src. Dans mon cas ayant le Web.config dans la racine n'a pas résolu le problème.
ajoutez - le à votre
.angular-cli.jsoncomme"apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico", "web.config" ], ... } ],