Развертывание Angular SPA в подпапке - PullRequest
Новая
       40

Развертывание Angular SPA в подпапке

0 голосов
/ 07 ноября 2018

У меня есть веб-приложение ASP.net Core 2.1 Web API + Angular 6, созданное с использованием шаблона проекта Visual Studio 2017 Angular. И API, и приложение Angular находятся в одном веб-проекте. В разработке он работает внутри IIS Express, а в работе он использует IIS.

Само приложение работает нормально, но мне трудно развернуть его в подпапке существующего веб-сайта, настроенного как новое веб-приложение в IIS.

Когда я вызываю URL как:

Angular умеет правильно строить относительные пути, и приложение прекрасно загружается.

Когда я захожу на URL как (обратите внимание на отсутствующую косую черту):

IIS обслуживает веб-страницу index.html (почему? Я бы ожидал 404!), Но тогда Angular не сможет правильно рассчитать относительные пути к ресурсам JS / CSS.

Я попытался с помощью модуля Microsoft.AspNetCore.Rewrite перенаправить путь ^$ на /index.html, и он работает, но он также перезаписывает исходно рабочие запросы, давая уродливую вспышку в адресной строке:

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

Я пытался перенаправить на #/, но Chrome останавливает запросы с помощью ERR_TOO_MANY_REDIRECTS.

Есть ли решение этой проблемы? Обратите внимание, что мне нужно общее решение, которое позволит мне публиковать веб-приложение либо в подпапке, либо в своем собственном домене без перестройки приложения.

Соответствующие фрагменты:

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="./">

Заранее спасибо за помощь

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

После изучения кода промежуточного программного обеспечения Redirect на https://github.com/aspnet/BasicMiddleware/blob/268290a8b56fe44d0e03cbd69d78ba7a17b4f2c1/src/Microsoft.AspNetCore.Rewrite/Internal/RedirectRule.cs#L47 становится ясно, что предоставленное промежуточное программное обеспечение Redirect не позволяет перенаправлять пустой путь ('') без перенаправления корневого ('/') пути.

Однако, черпая вдохновение из этого кода, было легко создать собственное правило перезаписи, которое делает именно то, что мне нужно: 

// 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;
        }
    }));

Теперь веб-приложение Angular корректно загружается либо при развертывании в своем корневом домене, либо в подпапке, даже если пользователь вызывает его без символа косой черты.

0 голосов
/ 08 ноября 2018

Установите <base href="/AngularWebApp" /> и убедитесь, что файлы находятся в папке wwwroot/AngularWebApp.

В Startup вы можете сделать что-то вроде: 

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();
      }
});

Ссылка: https://medium.com/@levifuller/building-an-angular-application-with-asp-net-core-in-visual-studio-2017-visualized-f4b163830eaa

...