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

Question

我使用 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 ......有什么好的解释吗？

Answer 1

所以我有完全相同的问题，但对于 React App（我猜对于 angular 来说非常相似）。 我花了最后 2 个小时来调查引擎盖下的工作原理，但我仍然不太确定我是否正确，但这就是我发现的：

发展

spa.UseReactDevelopmentServer(npmScript: "start");

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

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

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

---

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

生产

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

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

Answer 2

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

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

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

这意味着所有没有注册、有效路由的请求（http://localhost:57788 没有任何控制器，根据项目的路由配置这是必需的）将到达并激活 app.UseSpa 中间件。 获取 angular bootstrap Index.html 文件路径的框架，首先从 spa.Options.SourcePath 属性（ClientApp）文件夹名称中选择，然后在 ClientApp /src/tsconfig.app.json 文件（“./ ")，这是 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 数据。

Answer 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 ，以启动 angular 服务器并将请求代理到 angular 服务器。 实际显示的 index.html 只是在内存中，既不在 dist 文件夹中也不在 wwwroot 中。

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

Answer 4

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

app.UseStaticFiles();

您可以在此处阅读： 在 ASP.NET Core 中使用静态文件

Github 存储库： https : //github.com/aspnet/StaticFiles

Answer 5

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

它不使用index.html 。 相反，它调用Home控制器的Index action 方法。

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

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

Answer 7

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

解决方案实际上是：

app.UseDefaultFiles();

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

来源