web-dev-qa-db-fra.com

Angular 2 hébergé sur IIS: erreur HTTP 404

J'ai une application simple avec un composant qui attend certains paramètres de l'URL. il n'y a qu'un seul itinéraire dans l'application:

const appRoutes: Routes = 
                       path: 'hero/:userId/:languageId',component: HeroWidgetComponent }];

Dans l'index.html, j'ai ceci dans l'en-tête <base href="/">

J'utilise Webpack et l'application fonctionne correctement dans un environnement de développement, lorsque vous parcourez l'URL: http://localhost:4000/hero/1/1.

Cependant, lors de la création de l'application pour la production et de l'obtention des fichiers de distribution, puis de l'hébergement sur IIS. J'obtiens l'erreur suivante en essayant de parcourir la même URL:

HTTP Error 404.0 - Not Found
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

L'application fonctionne correctement si je supprime tout le routage et navigue simplement: http:localhost:4200 sur IIS.

angulariishttp-status-code-404angular2-routing
9
Hussein Salman

Nous devons faire en sorte que IIS retombe dans index.html en ajoutant une règle de réécriture.

Étape 1: Installez IIS URL Rewrite} _ Module 

Étape 2: Ajoutez une règle de réécriture à web.config.

   <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      <system.webServer>
        <rewrite>
          <rules>
            <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>
24
Hussein Salman

Si vous utilisez une application IIS telle que myApp sous votre site Web par défaut (l'URL de votre application doit avoir la syntaxe http: // localhost/myApp/my-angular-route ), puis vous devrait essayer de modifier l'action pour

<action type="Rewrite" url="/myApp/"/>;

Ensuite, cela fonctionne pour mon environnement sans aucun problème.

Vous trouverez des instructions étape par étape ici: https://blogs.msdn.Microsoft.com/premier_developer/2017/06/14/tips-for-running-an-angular-app-in-iis/

0
Robert