选择器“app-root”与 asp.net mvc 中的任何元素都不匹配答案

【问题标题】：The selector "app-root" did not match any elements in asp.net mvc选择器“app-root”与 asp.net mvc 中的任何元素都不匹配
【发布时间】：2021-09-22 12:37:49
【问题描述】：

我有ASP.Net MVC5 Web 应用程序并且需要将Angular5 应用程序与其集成。

参考下面的链接，我正在做集成。

运行独立的Angular5 应用程序时，它运行良好。但是当同一个组件与 Razor 视图集成时，我收到以下错误。

选择器“app-root”没有匹配任何元素

我花了一天多的时间来解决这个问题。

Index.cshtml 如下所示。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Home Page - My ASP.NET Application</title>
 <link href="/bundles/styles.bundle.js" rel="stylesheet"/>

 <script src="/bundles/inline.bundle.js"></script>
 <script src="/bundles/polyfills.bundle.js"></script>
 <script src="/bundles/scripts.bundle.js"></script>
 <script src="/bundles/vendor.bundle.js"></script>
 <script src="/bundles/main.bundle.js"></script>

</head>
<body>
 <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">

<div class="container body-content">

<div class="row">
  <app-root></app-root>
</div>
    <hr />
    <footer>
        <p>&copy; 2018 - My ASP.NET Application</p>
    </footer>
</div>


</body>
</html>

谢谢。

【问题讨论】：

标签： asp.net-mvc angular5 angular-cli

【解决方案1】：

天哪！！

两个步骤解决了这个令人头疼的问题：-

在头部添加<base href="/">
移动了页面底部的捆绑包，即在结束正文标记之前

@Styles.Render("~/Content/Styles") @Scripts.Render("~/Scripts/Bundles") </body>

希望这会有所帮助！

【讨论】：

【解决方案2】：

将代码保留在 Index.cshtml 中，如下所示。它应该可以工作。

<html>
  <head>
     <base href="/" />
  </head>
  <body>
      <app-root></app-root>
      <script type="text/javascript" src="~/Scripts/lib/runtime.js"></script>
      <script type="text/javascript" src="~/Scripts/lib/polyfills.js"></script>
      <script type="text/javascript" src="~/Scripts/lib/vendor.js"></script>
      <script type="text/javascript" src="~/Scripts/lib/main.js"></script>
   </body>
</html>

【讨论】：

【解决方案3】：

我遇到了这个问题，但后来意识到原因是我没有按照演示将我的静态脚本引用包装在 @section 脚本标记中，它们位于 app-root 标记之上。布局需要将脚本写入页面中app-root标签之后。如果标记出现在引用之前，您将收到该错误消息。

【讨论】：