Embedding an Angular app inside .net ASPX page with master page

I've an ASP.NET Web application with master page containing a header, tabs, BodyContent(each page content goes here), footer place holders for user controls (header, tabs, footer) and page content (MainContent). The Tabs user control has unordered list of tabs, for example let's consider Tab's text as TabOne, TabTwo, TabFour, One click of each tab respective webpage loads with the help a javascript function with below line of code:

window.location.href = "TabOne.aspx";

Now I got a new request to add a tab TabThree to load an angular page showing Header, tabs, footer and the BodyContent holding the content of angular application i.e., on click of TabThree, I've to load an angular application in existing ASP.NET web application similar to the reference link(How to include external Angular 2 app in ASP.NET Webforms aspx page)

//TabThree.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Base.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Programs.Default" %>

<%@ MasterType VirtualPath="~/Base.Master" %>


<asp:Content ID="Header" ContentPlaceHolderID="Header" runat="server">
<%--<base href="/AngularComponents/">--%> //No difference with uncommenting the base href
<%--<base href="/">--%>
    <script type="text/javascript" src="../Tabs.js"></script>
</asp:Content>
<asp:Content ID="Tab" ContentPlaceHolderID="Tab" runat="server">
</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="BodyContent"   runat="server">

<div id="pageContent">
   <app-root>Loading...</app-root>
   <script type="text/javascript" src="AngularModules/inline.bundle.js"></script>
   <script type="text/javascript" src="AngularModules/main.bundle.js"></script>
   <script type="text/javascript" src="AngularModules/polyfills.bundle.js"></script>
   <script type="text/javascript" src="AngularModules/vendor.bundle.js"></script>
   <link href="AngularModules/styles.bundle.css" rel="stylesheet" />
 </div> 
</asp:Content>
<asp:Content ID="Footer" ContentPlaceHolderID="Footer" runat="server">
</asp:Content>

If I run the angular application independently it launches fine with ng serve -o command and it comes up fine at the URL (http://localhost:4200/#/TabThree?id=TID100). Now I've copied the dist folder to the ASP.NET Web application workspace and renamed it as AngularModules, On click of TabThree I've tried to load the angular component into Bodycontent with one of the below line of code for navigation:

window.location.href = "TabThree.aspx/#/TabThree?ID=TID100";

window.location.href = "TabThree.aspx?AngularComponents/#/TabThree?ID=TID100";

The Head content loads fine but the Bodycontent which supposed to load Angular component of TabThree is blank with the console error logged as below:

ERROR Sys.ParameterCountException: Sys.ParameterCountException: Parameter count mismatch.
"ERROR"
{
  [functions]: ,
  __ proto __: { },
  __zone_symbol__currentTask: { },
  description: "Sys.ParameterCountException: Parameter count mismatch.",
  message: "Sys.ParameterCountException: Parameter count mismatch.",
  name: "Sys.ParameterCountException",
  stack: "Sys.ParameterCountException: Sys.ParameterCountException: Parameter count mismatch.
  at String$startsWith (http://localhost:62557/ScriptResource.axd?

  d=gb2H0hcR0_2oXWpLxJmdTg2S_j-8tZAZO1r6sTjByVD4-_6_cs99E6CayZY9pi0-N-ip5bmZNlhZWaB-IG2xnFZG-NKKnY8LqkMvfx1uzDhC1zqaP8PQi4JB24Hq7urD6rwOMv6ZCQbxzc19pQ0mcl6iexnSPre_a0zN-jpBGmFTlZ5rxoZ47qCy4shfjh4T0&t=ffffffff87bbe9c7:494:12)
  at startsWith 

I referred the link (Including an Angular2 application to Asp.Net Webforms Page) but that too didn't solve the problem and I'm not able to launch the Angular component as a Tab in the BodyContent placeholder.

I've studied both the reference links but they don't have the right information about how the routing/navigation is happening to load the angular component in the ASPX Page.

I've tried other approaches than mentioned above which redirects the entire page and launch Angular application as a standalone but my requirement is to inscribe the angular component into the Bodycontent of the TabThree.aspx page so it would be consistent with the other Tabs/pages.

Any help in solving this Routing issue in the hybrid application would be a great help and I would appreciate the same.

Thanks in Advance!!

I didn't find any possible duplicate for the same and I've linked the references as well, Hopefully this is not marked as duplicate.

I've fixed with the help of IFrame in the aspx page.

//TabThree.aspx

<div id="dvngComponent" runat="server"></div>

//TabThree.aspx.cs

string url = "AngularComponents/#/TabThree?ID=TID100";

HtmlGenericControl ngComponent = new HtmlGenericControl("iframe");
ngComponent.Attributes.Add("id", "frmNgComponent");
ngComponent.Attributes.Add("src", url);
ngComponent.Attributes.Add("allowtransparency", "true");
ngComponent.Attributes.Add("frameBorder", "0");
ngComponent.Style["margin"] = "0 0 0 0";
ngComponent.Style["width"] = "100%";
ngComponent.Attributes.Add("height", "300px");
dvngComponent.Controls.Add(ngComponent);