Как называется index.html в Angular-CLI .NET Core?

Question

Я построил Angular-CLI .Net Core SPA с Visual Studio 2017, используя

dotnet new angular -o my-new-app 

Я пытаюсь найти то, как index.html, который находится внутри папки ClientApp/src, вызывается по умолчанию при записи, например.

http://localhost:57782

startup.cs Файл имеет следующее:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace angular_cli
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            //services.AddMvc();

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

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }

            app.UseStaticFiles();
            app.UseSpaStaticFiles();

            //app.UseMvc(routes =>
            //{
            //    routes.MapRoute(
            //        name: "default",
            //        template: "{controller}/{action=Index}/{id?}");
            //});

            app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501

                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });
        }
    }
}

Я специально отключил промежуточное ПО MVC, и все работает нормально. Тем не менее, у меня есть no idea by which mechanism and settings index.html is called ... Какие-нибудь хорошие объяснения, пожалуйста?

Answer 1

Если вы запрашиваете сервер напрямую, вам следует предоставить файл index.html в папке «ClientApp / dist», указанной здесь:

        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist";
        });

и вы вызываете эту услугу здесь:

        app.UseSpaStaticFiles();

        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

Если вы находитесь в среде разработки, которая у вас есть, она будет использовать команду npm start, равную ng serve в SourcePath, который вы определили выше, для запуска запросов углового сервера и прокси к угловому серверу. На самом деле отображаемый index.html находится только в памяти и не находится ни в папке dist, ни в wwwroot.

            if (env.IsDevelopment())
            {
                spa.UseAngularCliServer(npmScript: "start");
            }
        });
    }

Answer 2

Итак, у меня был точно такой же вопрос, но для React App (я думаю, что для angular это очень похоже). Я потратил последние 2 часа на расследование того, как все работает под капотом, и я все еще не совсем уверен, прав ли я, но вот что я узнал:

Разработка

spa.UseReactDevelopmentServer(npmScript: "start");

1. Этот метод запускает npmScript с именем start - его можно найти в файле package.json в разделе scripts. Этот скрипт запускает WebPackDevServer , который выполняет конвейер веб-пакетов в памяти, а затем подает сгенерированные файлы также из памяти (он позволяет быстро перезагружать файлы в браузере и без перекомпоновки приложения, которое отлично подходит для разработки).

Конвейер Webpack генерирует необходимые сценарии js & css, вставляет ссылки на эти файлы в index.html, а затем копирует все необходимые файлы в указанную директорию (или в данном случае в память;))

2. Он настраивает прокси на этом сервере, поэтому ASP передает все запросы на этот сервер, и в конечном итоге ваши файлы просто отправляются из памяти.

---

Вы также можете запустить этот сервер прямо из консоли и дать ASP команду настроить прокси на существующий сервер без запуска сценария npm. Это может быть достигнуто с помощью метода UseProxyToSpaDevelopmentServer.

Производство

В случае производственной сборки сервер не используется (и не должен использоваться). Должен быть вызван сценарий build (шаг PublishRunWebpack, который вы можете найти в файле csproj), который запустит аналогичный конвейер, который выдаст минимизированные файлы и соответствующий index.html в указанную папку. Затем эти файлы будут обслуживаться напрямую с жесткого диска благодаря конфигурации AddSpaStaticFiles.

По крайней мере, это мое нынешнее понимание этого процесса.

Answer 3

Я столкнулся с той же проблемой, что и вы, и это был первый раз, когда я пришел за ответом.

Решение на самом деле было:

app.UseDefaultFiles();

После этого нажмите http: домен / обслуживал index.html, как и ожидалось.

Источник

Answer 4

После публикации приложения index.html добавляет все ресурсы css и js и копирует их в папку dist. Файл index.html загружается по умолчанию. В основном это зависит от настроек документа по умолчанию в IIS (в Windows).

Answer 5

Я пытаюсь найти то, как index.html находится внутри Папка ClientApp / src вызывается по умолчанию при записи, например

Не используется index.html. Вместо этого он вызывает Home метод действия контроллера Index.

http://localhost:57782 совпадает с http://localhost:57782/Home/Index. Это в основном точка входа для всего приложения.

Вы можете видеть это внутри Startup.cs

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");

    routes.MapSpaFallbackRoute(
        name: "spa-fallback",
        defaults: new { controller = "Home", action = "Index" });
});

Answer 6

Предоставляется промежуточным ПО статических файлов, зарегистрированным

app.UseStaticFiles();

Вы можете прочитать об этом здесь: Работа со статическими файлами в ASP.NET Core

Github репо: https://github.com/aspnet/StaticFiles