Déploiement d'un SPA angulaire dans un sous-dossier

voix
1

J'ai une base ASP.net 2.1 API Web + angulaire 6 application web créée en utilisant Visual Studio 2017 modèle angulaire du projet. Tant l'api et l'application angulaire sont dans le même projet Web. Dans le développement, il fonctionne à l'intérieur IIS Express, alors que dans la production, il utilise IIS.

L'application elle-même fonctionne bien, mais je vais avoir du mal à le déployer dans un sous-dossier d'un site Web existant, configuré en tant que nouvelle application Web dans IIS.

Quand j'invoque les URL comme:

Angulaire est en mesure de construire les chemins relatifs correctement et les charges d'application bien.

Lorsque je visite les URL que (notez le slash manquant):

IIS sert la index.htmlpage Web (pourquoi? Je me attends à 404!), Mais angulaire ne peut pas calculer correctement les chemins relatifs aux ressources JS / CSS.

J'ai essayé d' utiliser le Microsoft.AspNetCore.Rewritemodule pour Rediriger le ^$chemin vers /index.htmlet il fonctionne, mais il reformule les demandes de travail à l' origine, ce qui donne un flash laid dans la barre d'adresse:

http://localhost:52000/AngularWebApp/=> http://localhost:52000/AngularWebApp/index.html=> http://localhost:52000/AngularWebApp/#/dashboard

J'ai essayé de rediriger vers , #/mais Chrome arrête les demandes avec ERR_TOO_MANY_REDIRECTS.

Y-a t'il une solution à ce problème? S'il vous plaît noter que je voudrais une solution générale qui me permettra de publier l'application Web, soit sous le sous-dossier ou sous son propre domaine sans reconstruire l'application.

extraits pertinents:

Startup.cs

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) {
...
app.UseRewriter(new RewriteOptions()
   .AddRedirect(@^$, /index.html, (int)HttpStatusCode.MovedPermanently));

app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseMvc(...);
app.UseSpa(...);
...
}

index.html

<base href=./>

Merci d'avance pour votre aide

Créé 07/11/2018 à 20:20
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
0

Après avoir examiné le code du middleware Redirect à https://github.com/aspnet/BasicMiddleware/blob/268290a8b56fe44d0e03cbd69d78ba7a17b4f2c1/src/Microsoft.AspNetCore.Rewrite/Internal/RedirectRule.cs#L47 il est clair que le middleware fourni Rediriger ne permettre à rediriger le chemin vide ( « ») sans rediriger également la racine de chemin ( « / »).

Cependant se inspirant de ce code, il était facile de construire une règle de réécriture personnalisée qui fait exactement ce que j'ai besoin:

// Load the index.html page when the url is invoked without the ending '/'
// Avoids problems with Angular when loading http://domain/AngularWebApp instead of http://domain/AngularWebApp/
app.UseRewriter(new RewriteOptions().Add(rewriteContext =>
    {
        var request = rewriteContext.HttpContext.Request;
        if (request.Path == PathString.Empty)
        {
            rewriteContext.HttpContext.Response.Redirect(request.PathBase + '/', true);
            rewriteContext.Result = RuleResult.EndResponse;
        }
    }));

Maintenant, les charges d'applications Web angulaire correctement soit lorsqu'il est déployé sur son propre domaine racine ou sous un sous-dossier, même si l'utilisateur il invoque sans le caractère slash.

Créé 09/11/2018 à 14:52
source utilisateur

voix
0

Définissez <base href="/AngularWebApp" />et ne manquez pas les fichiers angulaires dist sont dans le wwwroot/AngularWebAppdossier.

Dans Startup vous pouvez faire quelque chose comme:

app.Use(async (context, next) => {
   await next();
   if (context.Response.StatusCode == 404 &&
      !Path.HasExtension(context.Request.Path.Value) &&
      context.Request.Path.Value.StartsWith("/AngularWebApp/")) {
         context.Request.Path = "/AngularWebApp/index.html";
         await next();
      }
});

Référence: https://medium.com/@levifuller/building-an-angular-application-with-asp-net-core-in-visual-studio-2017-visualized-f4b163830eaa

Créé 07/11/2018 à 21:06
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more