Configuration angulaire et WebAPI

Question

Nous avons une application Angular 4 et une application WebAPI (.NET Framework). Nous avons configuré une application Azure avec les deux applications déployées (client et service). Le chemin racine pointe vers le client.

Les requêtes HTTP à notre API (/ api/{controller} /) n'atteignent pas notre service et il semble que la route angulaire les récupère et renvoie le fichier index.html comme contenu de réponse.

Comment pouvons-nous configurer Azure pour que notre application Angular serve le contenu HTML/CSS/JS et tout appel aux routes "/ api /" vers notre service?

Nous avons essayé d'avoir le point d'accès racine au service, mais nous recevons ensuite un 404 pour toutes les demandes non-API.

Answer 1

Pour répondre à ma propre question, je devais servir des fichiers statiques comme décrit dans cet article:

https://mirkomaggioni.com/2016/09/11/owin-middleware-for-static-files/

En un mot, je déployé le service (WebAPI) à la racine Azure et le client (Angulaire 4) déployé en tant que dossier "dist" compilé.

J'ai ajouté les paquets NuGet suivants:

<package id="Owin" version="1.0" targetFramework="net452" /> 
<package id="Microsoft.Owin" version="3.1.0" targetFramework="net462" /> 
<package id="Microsoft.Owin.FileSystems" version="3.1.0" targetFramework="net462" /> 
<package id="Microsoft.Owin.Host.SystemWeb" version="3.1.0" targetFramework="net462" /> 
<package id="Microsoft.Owin.StaticFiles" version="3.1.0" targetFramework="net462" /> 

a ensuite créé une classe OWIN de démarrage qui ressemble à ceci:

public class Startup 
{ 
    public void Configuration(IAppBuilder app) 
    { 
     var physicalFileSystem = new PhysicalFileSystem(@"./dist"); 
     var options = new FileServerOptions 
     { 
      EnableDefaultFiles = true, 
      FileSystem = physicalFileSystem 
     }; 
     options.StaticFileOptions.FileSystem = physicalFileSystem; 
     options.StaticFileOptions.ServeUnknownFileTypes = true; 
     options.DefaultFilesOptions.DefaultFileNames = new[] 
     { 
      "index.html" 
     }; 

     app.UseFileServer(options); 
    } 
}