Eckige erste Site-Besuch nicht-Root-Pfad funktioniert lokal, aber nicht in der Produktion

Question

In meiner Angular 4-Anwendung, wenn ich einen nicht-Root-Pfad in die URL als mein erster Besuch auf der Website eingeben (dh localhost:4200/projects), wird meine Anwendung bootstrapped und die korrekte Komponente wird auf dem Bildschirm im Browser gerendert.

Allerdings, sobald ich die Website über IIS, wenn ich gehe zu http://<my-domain>.com/projects gehen, bekomme ich einen 404-Fehler (nicht von meiner Anwendung) und die Anwendung wird nie bootstrapped.

Wie bekomme ich einen Besuch in einem Nicht-Root-Pfad als der erste Besuch der Website in der Produktion zu erkennen, dass die Anwendung eine Angular-Anwendung ist und die Anwendung für einen beliebigen Pfad, der die Wurzel oder darüber hinaus ist, Bootstrap?

Answer 1

Eine detailliertere Erklärung, warum dies geschieht, finden Sie unter my answer here. Ein kurzer Ausschnitt:

Auf der bereitgestellte Version der App, der Webserver sie weiß Hosting nur, wie das eine HTML-Datei dienen es sieht (index.html), die zu Ihrem Root-Pfad entspricht. Die zweite Sie versuchen, direkt auf http://url-to-your-app/art zum Beispiel zuzugreifen, wird der Server eine 404 nicht gefunden werden, da es nicht erkennt, dass der Pfad einer Ressource dienen kann.

Für IIS, ist der einfachste Weg, dies zu beheben, ist dies zu Ihrer web.config hinzufügen:

<?xml version="1.0" encoding="UTF-8"?> 
<configuration> 
    <system.webServer> 
     <httpErrors> 
      <remove statusCode="404" subStatusCode="-1" />     
      <error statusCode="404" path="/index.html" responseMode="ExecuteURL" />     
     </httpErrors> 
    </system.webServer> 
</configuration> 

Was das bedeutet ist IIS anweisen, mit Ihrem index.html zu reagieren, wenn ein 404 erkannt wird .

Eine andere Möglichkeit wäre, das URL-Rewriting einzurichten, aber dafür muss das Rewriting-Modul installiert und konfiguriert werden, was meiner Meinung nach im Vergleich zu der obigen Lösung zu viel Mühe macht.