使用Visual Studio的Angular 2路由. net

本文关键字：2路 net Angular Visual Studio 使用 | 更新日期: 2023-09-27 18:09:36

我在Angular 2的网站上完成了"英雄指南"教程，一切都很顺利。如果我四处点击，URL就会改变，当我刷新时，它会把我带到原来的地方，就像你期望的那样，正确的路由。

我现在想在后端使用。net和c#，所以我阅读了Angular 2的教程，在Visual Studio中设置项目(我之前使用的是Sublime Text)。我完成了它并使其工作，但注意到路由只在按后退/前进按钮时工作。当我只使用Sublime和NPM时，刷新的效果不太好。我回到教程，在底部发现了一条与我有关的消息:

"如果这个应用使用了Angular的路由器，刷新浏览器会返回404 - Page Not Found。看看地址栏。它是否包含一个导航url(一个"深链接")?我们必须将服务器配置为为这些请求返回index.html。在此之前，请删除导航路径并再次刷新。"https://angular.io/docs/ts/latest/cookbook/visual - studio 2015. - html # !#生成-运行

这是否意味着当我刷新页面时，Angular 2的路由将无法在Visual Studio中工作?当使用Visual Studio/. net/c#时，Angular 2的路由是否没有希望完全工作?

使用Visual Studio的Angular 2路由. net

Angular 2使用HTML5历史API。url看起来就像任何其他网站。当你加载http://example.com/posts/23时，. net后端将尝试处理它，如果不能，将返回404。

那不是你想要的。

你想返回index.html的内容，让Angular处理剩下的部分。

注意，你不想重定向到http://example.com/index.html，如果你这样做，它会加载angular，但你会丢失当前路径。这样你就永远不能分享到你的网站的链接。

我假设你使用的是最新版本的。net Core和Visual Studio的模板。

你需要做的:

  • 安装NuGet包Microsoft.AspNetCore.StaticFiles
  • 转到Startup.cs，找到Configure方法

  • 在app.UseMvc();

    之前添加这些行
    app.UseDefaultFiles();
app.UseStaticFiles();

  • 在app.UseMvc();

    之后添加这些行
    app.Run(async context =>
{
    context.Response.StatusCode = 200;
    context.Response.ContentType = "text/html";
    await context.Response.SendFileAsync("./wwwroot/index.html");
});

  • 添加到文件的顶部

    using Microsoft.AspNetCore.Http;

查看更多信息:

https://docs.asp.net/en/latest/fundamentals/static-files.html

https://angular.io/docs/ts/latest/guide/router.html !# base-href

相关文章：