Routing einer Angular 2 App mit Web API

Question

Ich habe eine Angular 2 Anwendung mit Angular CLI erstellt. Dies muss eine .NET 4.6 Web API aufrufen. Die Routenführung macht mich verrückt.

Für Angular ist der Standardordner für die Ausgabe /dist. Angular CLI macht all die Verkleinerung und Baumschütteln, von denen Sie träumen können und gibt dann sowohl seine JavaScript-Dateien als auch index.html in diesen Ordner aus.

Also, wenn ich index.html ausführen, werden diese Dateien aus dem gleichen Ordner abgerufen. Alles funktioniert gut, weil index.html einen Tag wie dieser enthält:

<base href="/"> 

Das Web-API-Projekt hat die erwartete Struktur, mit dem Winkel App einen Parasiten in seiner Wurzel.

So sieht es wie folgt aus:

WebAPI_Project 
|- App_Start 
| | 
| |-WebApiConfig.cs 
|- Controllers 
|- Models 
|- src /* This is the root of the Angular app */ 
| |- app 
| | |- core   /* These three folders */ 
| | |- shared   /* are for the modules */ 
| | |- another_module /* used in the app  */ 
| | |- app.component.ts 
| | |- app.module.ts 
| |- index.html 
|- dist /* This is the Angular output folder */ 
    |- index.html 
    |- main.bundle.js 

WebApiConfig.cs hat die Standard-Setup:

public static void Register(HttpConfiguration config) 
{ 
    // Web API routes 
    config.MapHttpAttributeRoutes(); 

    config.Routes.MapHttpRoute(
     name: "DefaultApi", 
     routeTemplate: "api/{controller}/{id}", 
     defaults: new { id = RouteParameter.Optional } 
    ); 
} 

die Winkel App ausführen zu können, verwende ich normale ng serve, die einen Web-Server an http://localhost:4200 erstellen. Dieser Webserver weiß nichts über das Web-API-Projekt, daher muss ich das auch innerhalb von Visual Studio ausführen, wodurch IIS Express unter http://localhost:5200 gestartet wird.

Dieses Setup funktioniert ziemlich gut und ermöglicht es mir, die Live Reload-Unterstützung von Angular CLI zu nutzen.

Der größte Nachteil für mich ist, dass diese Konfiguration unterscheidet sich von dem, was wir für die Produktion erwarten. Dort würde ich erwarten, einen Webserver (IIS) zu haben, der sowohl das Web-API-Projekt (wie derzeit) (/api/) als auch die Angular-App (vorzugsweise /) bedient. Auch im Entwickler muss ich an CORS denken, was das Produktions-Setup nicht tun würde.

Um dies zu tun, muss ich das WebApiConfig Routing ändern, um meine statischen Dateien zu liefern, die unter /dist/ sein werden.

Für ASP.NET-Core und für MVC 4, gibt es zahlreiche Artikel zeigen, wie ich Microsoft.AspNetCore.StaticFiles (oder Microsoft.AspNet.StaticFiles) in Startup.cs verwenden sollte. Grundsätzlich fügen Sie die folgenden zwei Zeilen in die Configure Funktion:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
    ILoggerFactory loggerFactory) 
{ 
    // Other stuff 

    // Two new lines 
    app.UseStaticFiles(); 
    app.UseDefaultFiles(); 

    app.UseMvc(m => 
    { 
     // Other routes specified here 
    }); 
} 

Das Problem ist, dass ich auch nicht ASP.NET MVC Core oder verwenden Sie.

Obwohl die Web-API MVC ohne Views ist, kommt ein Web-API-Projekt nur mit der WebApiConfig.cs-Datei, keinem Startup.cs und keinem `IApplicationBuilder '.

Ich habe versucht, diese Linie zu meiner Register Funktion hinzugefügt:

config.Routes.IgnoreRoute("StaticFiles", "*.html"); 

Das das index.html dient (aber localhost:5200/dist/index.html), aber es kann nicht sein Vermögen, weil base href="/" finden. Ich kann das in index.html ändern, aber dann bricht ng serve.

Ich glaube, ich brauche eine von zwei Dinge:

1. Ein Weg, um eine Route zu erstellen, so dass ein Verweis auf /index.html dient /dist/index.html oder
2. Ein Weg, um die Montage Static bereits erwähnt zu verwenden.

Also, wie würde ich das erreichen?

Answer 1

ich nur konnte nicht Dmitriy's answer für mich zu arbeiten, aber Er hat mich auf den richtigen Weg gebracht.

Ich benötigte zwei Regeln: Eine, um die Angular-App von der Wurzel aus zu bedienen, während die Web-API /api/ routing und eine andere, das Standarddokument zu dienen.

Hier sind sie:

<rewrite> 
    <rules> 
     <rule name="Serve Angular app from root" stopProcessing="true"> 
     <match url="([\w\.]+)" /> 
     <conditions> 
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> 
     </conditions> 
     <action type="Rewrite" url="/dist/{R:1}" /> 
     </rule> 
     <rule name="Default document" stopProcessing="true"> 
     <match url="^$" /> 
     <action type="Rewrite" url="/dist/index.html" /> 
     </rule> 
    </rules> 
</rewrite> 

Answer 2

Sie benötigen erste deaktivieren web api Routing für Winkel Dateien, dieses, nach innen zu web.config hinzufügen:

<rewrite> 
    <rules> 
    <rule name="AngularJS" stopProcessing="true"> 
     <match url=".*" /> 
     <conditions logicalGrouping="MatchAll"> 
     <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
     <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
     <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> 
     </conditions> 
     <action type="Rewrite" url="/index.html" /> 
    </rule> 
    </rules> 
</rewrite> 

Und dann <base href="/"> zu Ihrem index.html hinzuzufügen.

UPD: Rewrite Zugang

Sie können fügen Sie eine weitere Rewrite-Regel index.html Zugriff auf Ihre /dist/ Ordner außer Kraft zu setzen:

<rewrite> 
    <rules> 
     <rule name="DistAccess" stopProcessing="true"> 
      <match url="^(.*)/dist/(.*)" /> 
      <action type="Rewrite" url="{R:1}/{R:3}" /> 
     </rule> 
    </rules> 
</rewrite>