如何调用 Angular-CLI .NET Core 中的 index.html？答案

【问题标题】：How index.html in Angular-CLI .NET Core is called?如何调用 Angular-CLI .NET Core 中的 index.html？
【发布时间】：2018-10-08 09:22:23
【问题描述】：

我已经使用 Visual Studio 2017 构建了一个 Angular-CLI .Net Core SPA

dotnet new angular -o my-new-app

我正在努力寻找的是在写入时如何默认调用位于ClientApp/src 文件夹内的index.html，例如

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...请问有什么好的解释吗？

【问题讨论】：

我希望它是 configuration.RootPath = "ClientApp/dist"; 和 webpack 的组合。

标签： asp.net asp.net-mvc asp.net-core angular-cli

【解决方案1】：

所以我有完全相同的问题，但对于 React App（我猜对于 angular 非常相似）。我花了最后 2 个小时来调查事情是如何在幕后工作的，但我仍然不太确定如果我是对的，但这就是我发现的：

发展

spa.UseReactDevelopmentServer(npmScript: "start");

此方法运行名为start 的npmScript - 您可以在scripts 部分的package.json 文件中找到它。该脚本启动 WebPackDevServer，它在内存中执行 webpack 管道，然后也从内存中提供生成的文件（它允许在浏览器中快速重新加载文件，而无需重新构建应用程序，这对开发非常有用）。

Webpack 管道生成必要的 js & css 脚本，将这些文件的链接注入 index.html，然后将所有必要的文件复制到指定目录（或本例中的内存；））

它为该服务器设置代理，以便 ASP 将所有请求传递到该服务器，最终您的文件只是从内存中提供。

您也可以直接从控制台运行此服务器，并指示 ASP 为现有服务器设置代理，而无需启动 npm 脚本。可以通过UseProxyToSpaDevelopmentServer方法实现。

生产

在生产构建的情况下，不（也不应该）使用服务器。应该调用build 脚本（通过PublishRunWebpackstep，你可以在csproj 文件中找到），它将运行类似的管道，将生成缩小文件和正确的 index.html 到指定文件夹。由于AddSpaStaticFiles 配置，这些文件将直接从 HDD 提供。

至少这是我目前对这个过程的理解。

【讨论】：

【解决方案2】：

也许这个问题已经晚了，但是我遇到了同样的问题来弄清楚位于 ClientApp/src 文件夹中的 index.html 是如何被 http://localhost:57788 调用的，这就是我发现的.

根据微软对app.UseSpa方法的要求：

通过以下方式处理中间件链中从这一点开始的所有请求返回单页应用程序 (SPA) 的默认页面。这中间件应该放在链的后面，这样其他的用于提供静态文件、MVC 操作等的中间件需要优先级。

这意味着所有没有注册的有效路由的请求（http://localhost:57788 没有任何控制器，根据该项目的路由配置这是必需的）将到达并激活 app.UseSpa 中间件。获取角度引导 Index.html 文件路径的框架，首先从 spa.Options.SourcePath 属性 (ClientApp) 文件夹名称中选择，然后在 ClientApp /src/tsconfig.app.json 文件中查找“baseUrl”（“./ ")，这是 index.html 应该驻留的文件夹。如果框架在 ClientApp/src/ 文件夹中找到 index.html 文件，将其发送给客户端。

为了验证，您可以尝试：
1.如果你把src文件夹名改成src_，你会得到这个错误：
错误：ENOENT：没有这样的文件或目录，stat 'C:..... \ClientApp\src \tsconfig.app.json'
2. 如果你把 index.htm 文件名改成 index__.html 你会得到这个错误：
无法获取 /
3.请求有效路由：http://localhost:57788/
SampleData/WeatherForecasts 正在返回 json 数据。

【讨论】：

【解决方案3】：

如果您直接请求服务器，则应在此处给出的“ClientApp/dist”文件夹中为您提供 index.html：

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

你在这里调用该服务：

        app.UseSpaStaticFiles();

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

如果您在开发环境中，它将使用npm start 命令，它等于您上面定义的SourcePath 中的ng serve，以启动角度服务器和代理请求角度服务器。实际上显示的 index.html 只是在内存中，既不在 dist 文件夹中，也不在 wwwroot 中。

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

【讨论】：

【解决方案4】：

由注册的静态文件中间件提供

app.UseStaticFiles();

您可以在这里阅读：Work with static files in ASP.NET Core

Github 仓库：https://github.com/aspnet/StaticFiles

【讨论】：

不，不是！我可以删除这个中间件，一切都会好起来的。此外，index.html 不在根文件夹 (wwwroot) 内，无法用作文件

【解决方案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" });
});

【讨论】：

感谢您抽出一些时间来回答我的问题，但是如果您更彻底地查看我的问题，您会发现我已禁用 MVC 并且没有 routes.MapSpaFallbackRoute。跨度>
我认为UseSpa() 不会调用Home 控制器的Index-action。我什至没有。为了测试你的理论，我创造了一个。我将不会被召唤。它将从ClientApp/src 调用硬编码的index.html。
硬编码在NodeJS-module react-scripts文件config/paths.js，它有：appHtml: resolveApp('public/index.html')

【解决方案6】：

应用发布后，index.html添加所有css和js资源并复制到dist文件夹。默认情况下会加载 index.html 文件。基本上它取决于 IIS 中的默认文档设置（在 Windows 上）。

【讨论】：

【解决方案7】：

我遇到了和你一样的问题，这是我第一个来寻求答案的地方。

解决方案实际上是：

app.UseDefaultFiles();

点击 http:domain/ 之后，index.html 按预期提供。

Source

【讨论】：