CODEWITHSUNDEEP
asp.net-mvcangular5angular-cli
Kgn-web
Kgn-web

Reputation: 7555

The selector "app-root" did not match any elements in asp.net mvc

I am have ASP.Net MVC5 Web application & in need to integrate Angular5 app with it.

Referring to the below link, I am doing the integration.

When running the standalone Angular5 app, it runs fine. but when the same component integrating with Razor view, I am getting the below error.

The selector "app-root" did not match any elements

It's been more than a day that I spent on fixing this.

Index.cshtml looks as below.

<!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>

Thanks.

Upvotes: 0

Views: 2739

Answers (3)

drunkenwagoner
drunkenwagoner

Reputation: 201

I had this problem, but then realised the cause was that I hadn't wrapped my static script references in the @section scripts tag as per the demo, and they were above the app-root tag. The layout needs to write the scripts into the page after the app-root tag. If the tag appears before the references, you'll get that error message.

Upvotes: 0

RajaSimha
RajaSimha

Reputation: 1

Keep the code in Index.cshtml as below. It should work.

<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>

Upvotes: 0

Kgn-web
Kgn-web

Reputation: 7555

OMG!!

Two steps fixed this big head breaking issue:-

  • added <base href="/"> in head section

  • moved the bundles in the bottom of page i.e., just before the closing body tag

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

app running

Hope this helps!!

Upvotes: 4

Related Questions