wake-up-neo.com

Angular 2 Auf IIS gehostet: HTTP-Fehler 404

Ich habe eine einfache App mit einer Komponente, die bestimmte Parameter von der URL erwartet. Es gibt nur eine Route in der Anwendung:

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

In der Index.html habe ich dies im Header <base href="/">

Ich verwende Webpack und die Anwendung läuft gut in der Entwicklungsumgebung, wenn Sie die URL durchsuchen: http://localhost:4000/hero/1/1.

Beim Erstellen der App für die Produktion und beim Abrufen der Verteilungsdateien sollten diese jedoch auf IIS gehostet werden. Ich bekomme den folgenden Fehler, wenn ich versuche, dieselbe URL zu durchsuchen:

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

Die Anwendung funktioniert gut, wenn ich das gesamte Routing entferne und einfach auf dem IIS nach http:localhost:4200 suche.

9
Hussein Salman

Wir müssen IIS durch Hinzufügen einer Umschreibungsregel auf index.html zurücksetzen.

Schritt 1: Installiere IIS URL Rewrite Module 

Schritt 2: Fügen Sie in web.config eine Umschreibregel hinzu

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

SCHRITT 3: füge den web.config-Link zu angular.json hinzu: (da er nach ng build übersprungen wird)

"architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                         ..........
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            **"src/web.config"**
                        ]
1
ogaltsev

Wenn Sie eine IIS - Anwendung wie myApp unter Ihrer Standardwebsite verwenden (die URL für Ihre Anwendung sollte die Syntax http: // localhost/myApp/my-angle-route haben), dann Sie sollte versuchen, die Aktion zu ändern

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

Dann funktioniert es problemlos für meine Umgebung.

Eine Schritt-für-Schritt-Anleitung finden Sie hier: https://blogs.msdn.Microsoft.com/premier_developer/2017/06/14/tips-for-running-anangular-app-in-iis/

0
Robert