.Net Core 2和AngularJS SPA无法正常运行

时间:2018-08-09 07:58:52

标签: c# angularjs asp.net-core asp.net-core-2.1 asp.net-core-mvc-2.0

我一直在将项目从.NET Framework迁移到.NET Core 2,并且过程比预期的要顺利,但是当我认为自己已经克服了最艰巨的挑战时,我就无法终生SPA方面的工作。

启动应用程序时,只要我进入根目录(https://localhost:5001),它就可以正常工作,并且可以使用Angular路由进行导航。但是,如果我尝试通过路线加载页面,例如https://localhost:5001/login,我得到一个通用的Chrome 404“找不到此本地主机页面”。

我的index.html在目录MyApp/Pages/中,而客户端代码在MyApp/wwwroot/app/中。将index.html移到wwwroot文件夹时,我什么也没得到。

在我的Startup.cs中,设置方法如下:

public class Startup
{
    // 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("/Error");
            app.UseHsts();
        } 

        app.UseHttpsRedirection();
        app.UseStaticFiles();

        var defaultFileOptions = new DefaultFilesOptions();
        defaultFileOptions.DefaultFileNames.Clear();
        defaultFileOptions.DefaultFileNames.Add("/index.html");
        app.UseDefaultFiles(defaultFileOptions);
        app.Use(async (context, next) =>
        {
            await next();
            if (context.Response.StatusCode == 404 &&
                !Path.HasExtension(context.Request.Path.Value))
            {
                context.Request.Path = "/index.html";
                context.Response.StatusCode = 200;
                await next();
            }
        });

        app.UseCookiePolicy();
        app.UseAuthentication();

        app.UseMvc();
    }
}

我尝试了许多指南,但似乎我能找到的大多数指南已经过时,或者当尝试使用帖子中的方法时,它们是我所没有的方法。非常感谢您提供任何帮助,因为我很想完成迁移并继续从事该项目。

3 个答案:

答案 0 :(得分:2)

这里的问题是您有一个SPA,而Angular拥有它自己的路由,但是当您尝试使用类似https://localhost:5001/login这样的URL时,此路由是由MVC提供的,而不是由Angular提供的,MVC没有提供找到合适的控制器并返回404。

您应该做的是返回index.html以响应此类请求,以便Angular路由可以处理它。您可以看一下这篇文章:

https://www.toptal.com/angular/angular-5-asp-net-core

答案 1 :(得分:1)

事实证明,我的问题出在我处理404的方式上。我在Startup.cs中执行context.Request.Path = "/index.html";,但它仍然无法解析html文件,因此我将其重定向回到根路径:

    app.Use(async (context, next) =>
    {
        await next();
        if (context.Response.StatusCode == 404 &&
            !Path.HasExtension(context.Request.Path.Value))
        {
            // This is what I changed. I need to resolve to "/" instead of "/index.html"
            context.Request.Path = "/";
            context.Response.StatusCode = 200;
            await next();
        }
    });

感谢@Anton Danylov的建议,指出我要重新阅读该部分代码。

答案 2 :(得分:0)

使用此代码:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseBrowserLink();
}
else
{
    app.UseExceptionHandler("/Error");
}

app.UseStaticFiles();

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

关注链接:Application startup in ASP.NET Core