ASP.NET Core 404 для шаблона проекта со связанными файлами Angular 6 (неправильный каталог вывода dist)

Question

Я создал приложение ASP.NET Core с шаблоном проекта Angular https://docs.microsoft.com/en-US/aspnet/core/client-side/spa/angular?view=aspnetcore-2.1&tabs=visual-studio

Генерируемый выход

При развертывании на IIS базовая ссылка: <base href="/">

И путь к скриптам внутри сгенерированного dist / index.html:

<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>

Проблема: 404 ошибки

Однако C # Startup.cs должен правильно указать путь к выходному каталогу

Проект ASP.NET Core должен знать, что эти файлы находятся в каталоге ClientApp/dist из-за этого кода:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

        // In production, the Angular files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist";
        });
    }

Почему базовый путь установлен неправильно?

Проект выполняется на IIS, мы видим, что фоновое сообщение инициализации index.html отображается правильно, однако, как показано на рисунке, все ресурсы загружаются в корневой «/» сервера, поэтому они получают 404.

Если я попытаюсь загрузить http://{SERVERIP}/{PROJECTNAMEHERE}/runtime.js, я вижу, что это работает, поэтому я предполагаю, что это, вероятно, только вопрос base href .

Как динамически установить этот базовый href из ASP.NET Core?

Answer 1

У меня возникла эта проблема после получения совета Setrákus о включении этой строки в мой файл Startup.cs

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    ...
    app.UseSpaStaticFiles();
}

Итак, после некоторых проб и ошибок я обнаружил, что у меня работает следующее:

• Удалить папку dist в ClientApp

• Запустите команду угловой сборки, которая задает базовый href веб-сайтов, например, если мой предполагаемый пункт назначения был http://localhost/ABC, тогда я бы запустил

  'ng build --base-href /ABC/'
  

Это обработало угловое приложение, но есть необходимость в изменении и на стороне .NET Core.

Глядя на некоторые похожие проблемы на GitHub , казалось, что вызов для включения связующего программного обеспечения для угловых компьютеров UseAngularCliServer () вызывал проблему.

Чтобы удалить вызов UseAngularCliServer () Вы можете просто закомментировать его, как показано ниже, если вы только тестируете, или если это для правильной среды хостинга, измените переменную среды ASPNETCORE_ENVIRONMENT на «Production», чтобы пропустить что если блок.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    ...
    if (env.IsDevelopment())
    {
       //spa.UseAngularCliServer(npmScript: "start");
    }
}

Answer 2

В Angular 6 введена функция нескольких проектов для одного рабочего пространства (см. this ), и каждый проект компилируется в подпапку внутри dist /, однако основной угловой шаблон ASP.NET работает с Angular 5. который компилируется сразу внутри dist /.

Итак, один из способов решить эту проблему: открыть angular.json и изменить значение «outputPath» с dist/<your project name> на просто dist