如何修复我的路由？我有一个带有 Angular 前端的 C# 项目。如果我转到调用 Angular 组件的 c# View ，一切都会中断。如果我调用 Angular View (直接从 URL)，一切正常。

C# 路由到 C# View

• 如果我在 startup.cs 中正确路由，我会去: xxx/Home/index 这只是一个调用 Angular 组件的 View (它会抛出一堆 500 错误)

手动路由到 Angular

• 如果我手动将 /anything 添加到 url (xxx/Home/Index/anything)，Angular 路由将接管一切并正常加载。

索引方法调用

public class HomeController : Controller
{
public IActionResult Index()
{
    return View("IndexAng");
}
}

IndexAng.cshtml

@{
    ViewData["Title"] = "Home Page";
}

@*<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>*@
@*<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>*@
<h3>Loading Ang App root:</h3>
<app-root></app-root>
<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/main-client.js" asp-append-version="true"></script>
}

调用c#路由时出错:

从Startup.cs配置方法

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ApplicationDbContext identityContext,
                    UserManager<ApplicationUser> userManager, RoleManager<IdentityRole> roleManager)
        {

#if DEBUG
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                {
                    HotModuleReplacement = true
                });
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }
#else
            app.UseExceptionHandler("/Home/Error");
#endif
            app.UseStaticFiles();
            //app.UseSession();
            app.UseAuthentication();
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");

                routes.MapSpaFallbackRoute(
                    name: "spa-fallback",
                    defaults: new { controller = "Home", action = "Index" });
            });

        }

尝试导航到 main-client.js 的屏幕截图

最佳答案

首先，注意一点:我遇到了完全相同的问题，但使用的是 ASP.NET MVC 5。 因此，我不能 100% 保证完全相同的解决方案会奏效。

但是，我相当确定我要描述的技术是可靠的，并且 至少可以通过最小的努力进行调整。

归根结底:为了拥有ASP.NET MVC(简称MVC) 和 Angular 2+ 愉快地共存，他们必须知道路由处理在哪里 服务器的责任将结束，而客户端的责任将开始。

我们还必须了解 MVC 如何在提供路由时简化地址 请求。

我提倡的解决方案是创建一个 Controller ，称为 NgController , 它将为所有单页应用程序(从现在开始，SPA)提供服务 您的安装。

NgController 的草图这是:

public class NgController : Controller
{
    private boolean Authenticated()
    {
        // returns true if the user is authenticated. This system can
        // (and probably should) be integrated or replaced with
        // one of the ASP.NET Core authentication modules.
        return true;
    }

    public ActionResult Index()
    {
        if (!Authenticated())
            return RedirectToAction("Login", "Authentication", new { ReturnUrl = HttpContext?.Request?.Path });

        // Index does not serve directly the app: redirect to default one
        return RedirectToAction("TheApp");
    }

    // One action for each SPA in your installment
    public ActionResult TheApp() => UiSinglePageApp("TheApp");
    public ActionResult AnotherSPA() => UiSinglePageApp("AnotherSPA");

    // The implementation of every SPA action is reusable
    private ActionResult UiSinglePageApp(string appName)
    {
        if (!Authenticated())
            return RedirectToAction("Login", "Authentication", new { ReturnUrl = HttpContext?.Request?.Path });

        return View("Ui", new SinglePageAppModel { AppName = appName });
    }
}

真正基本的东西:我们只需要确保默认 Index操作不直接提供给任何应用程序。

然后，我们需要确保 MVC 路由正常工作:

1. 要去 map /TheApp/...和 /AnotherSPA/作为根路由(因为我们喜欢简短的助记 URL)
2. 不会干扰将由 Angular 处理的路由部分。

一些路线以及它们应该如何表现:

• https://server:port 的 URL应该重定向到 https://server:port/TheApp
• https://server:port/TheApp应由 TheApp 提供服务NgController 中的操作
• https://server:port/AnotherSPA应由 AnotherSPA 提供服务NgController 中的操作
• https://server:port/TheApp/some/token/and/subroute/for/angular/deep/linking应由 TheApp NgController 中的操作以及 TheApp 之后的所有内容应保持原样并直行 到 Angular 路由器

我选择的配置是这样的(MVC 5，需要对 MVC Core 2 进行一些调整):

public static void RegisterRoutes(RouteCollection routes)
{
    // the Ng controller is published directly onto the root,
    // the * before id makes sure that everything after the action name
    // is kept as-is
    routes.MapRoute("Ng",
        "{action}/{*id}",
        new {controller = "Ng", id = UrlParameter.Optional},
        new {action = GetUiConstraint()}
    );

    // this route allows the mapping of the default site route
    routes.MapRoute(
        "Default",
        "{controller}/{action}/{*id}",
        new { controller = "Ng", action = "Index", id = UrlParameter.Optional }
    );
}

/// <summary> The Ui constraint is to be used as a constraint for the Ng route.
/// It is an expression of the form "^(app1)|(app2)$", with one branch for
/// each possible SPA. </summary>
/// <returns></returns>
public static string GetUiConstraint()
{
    // If you don't need this level of indirection, just
    // swap this function with the result.
    // return "^(TheApp)|(AnotherSPA)$";

    var uiActions = new ReflectedControllerDescriptor(typeof(NgController))
        .GetCanonicalActions()
        .Select(x => x.ActionName.ToLowerInvariant())
        .Where(x => x != "index")
        .Select(x => "(" + x + ")");

    return string.Concat("^", string.Join("|", uiActions), "$");
}

现在 MVC 路由和 Controller 可以正常运行，并且可以测试重定向部分 以及“不要乱用应用程序名称后的所有内容”部分。 ;)

我们现在必须设置托管 Angular 应用程序所需的唯一 MVC View 。 “Ng” Controller 需要一个“Ui” View 。唯一真正重要的一点 View 的 <base>标记在 html 文档的头部。 我亲自复制了dist文件夹到 static MVC 站点内的文件夹， 只是为了澄清命名。 “静态”文件夹旨在包含所有 (你猜对了)静态内容。我认为 MVC 创建了一个 Content文件夹，由 默认，但我从来不喜欢那个名字。

MVCroot
 |-static
   |-ng
     |-TheApp (this is the dist folder for TheApp)
     |-AnotherSPA (this is the dist folder for AnotherSPA)

我也把每个js文件打包成一个文件，名字和SPA一样，但是没必要。
而且我不喜欢 partials，只是因为我不需要布局，所以我把所有东西放在一起。
YMMV.

Ui.cshtml

@{
    Layout = null;
    var baseUrl = Url.Content("/") + Model.AppName;
    var appName = Model.AppName.ToLowerInvariant();
}
<!DOCTYPE html>
<html style="min-height: 100%;">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="~/static/favicon.ico">

    <title>My marvelous application</title>

    @Url.CssImportContent("static/ng/{appName}/css/main.css")

    <!-- This is the CRUCIAL bit.  -->
    <base href="@baseUrl">
</head>

<body>
    <app-root>Loading...</app-root>
    @Url.ScriptImportContent($"~static/ng/{appName}/main.js")
</body>

</html>

AAAAAnd... 我们完成了 MVC 方面的工作。

在客户端，我们只需要确保 Angular 管理路由 使用适当的默认值(不要启用散列选项)。

一切都应该正常工作。

希望对您有所帮助。

关于c# View 调用 Angular 组件中断，但直接调用 Angular 工作正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52449672/