使用 Asp.net 5 针对 Angular SPA 提供静态文件

Question

我用 Angular 和 Asp.net 创建了 SPA 5. 所有假设为 Angular 路由路径的路由都将 return index.html，然后 Anguar 将进一步处理路由。

当我在浏览器中输入 url：http://localhost:12599/user and press enter. Page is created, all static content is requested properly ex. http://localhost:12599/js/app.js 一切正常。

直到...我想要更复杂的路线，例如：http://localhost:12599/user/registration . My index.html is loaded properly but all static content is god damn invoked incorrectly, like this: http://localhost:12599/user/js/app.js。这显然是行不通的（404），因为额外的段 /user 被剥离了 /registration。

有没有一种干净的方法来处理这个问题。或者我必须在处理静态内容时在中间件中做一些肮脏的工作？

像这样：

IF path.Contains("/js") THEN path = path.stripOutEverythingBefore("/js")

所以这将转换 http://localhost:12599/user/js/app.js to http://localhost:12599/js/app.js

我的一些设置代码，所以这对你们来说不会太枯燥：

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) //, IRouteBuilder routes
{
    loggerFactory.AddConsole();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.Use(async (context, next) =>
    {
        await next();

        if (context.Request.Path.ToString().Contains("index.html") ||
            SinglePageAppRequestCheck(context))
        {
            // add config cookie
            var webConfig = new WebConfigModel();
            Configuration.Bind(webConfig);
            var jsonSettings = new JsonSerializerSettings()
            {
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            };
            context.Response.Cookies.Append("ldmeConfig", JsonConvert.SerializeObject(webConfig, Formatting.None, jsonSettings));
        }

        // If there's no available file and the request doesn't contain an extension, we're probably trying to access a page.
        // Rewrite request to use app root
        if (SinglePageAppRequestCheck(context))
        {
            context.Request.Path = "/index.html";
            await next();
        }
    });

    app.UseStaticFiles();
}

private static bool SinglePageAppRequestCheck(HttpContext context)
{
    return context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value);
}

设置取自http://benjii.me/2016/01/angular2-routing-with-asp-net-core-1/

Answer 1

只需将基础 link 添加到您的索引中，所有相关请求都会正确完成

<base href="/">

我就知道，就是这么简单...虽然我花了 3 天时间才弄明白 :)

使用 Asp.net 5 针对 Angular SPA 提供静态文件

Serving static files with Asp.net 5 against Angular SPA

asp.net

static-content

angularjs

single-page-application

asp.net-core

有没有一种干净的方法来处理这个问题。或者我必须在处理静态内容时在中间件中做一些肮脏的工作？