Встраивание приложения Angular внутри страницы.net ASPX с главной страницей

Question

У меня есть веб-приложение ASP.NET с главной страницей, содержащей верхний колонтитул, вкладки, BodyContent (здесь содержится каждое содержимое страницы), заполнители нижнего колонтитула для пользовательских элементов управления (верхний колонтитул, вкладки, нижний колонтитул) и содержимое страницы (MainContent). Пользовательский элемент управления вкладками имеет неупорядоченный список вкладок, например, давайте рассмотрим текст вкладки как TabOne, TabTwo, TabFour. Один щелчок каждой вкладки соответствующей веб-страницы загружается с помощью функции javascript со строкой кода ниже:

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

Теперь я получил новый запрос на добавление вкладки TabThree для загрузки угловой страницы, показывающей верхний колонтитул, вкладки, нижний колонтитул и BodyContent, содержащего содержимое углового приложения, т. Е. По щелчку TabThree я должен загрузить угловое приложение в существующий ASP. Веб-приложение NET, аналогичное ссылочной ссылке ( Как включить внешнее приложение Angular 2 на ASP.NET Webforms aspx-страницу)

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

Если я запускаю угловое приложение независимо, оно нормально запускается с помощью команды ng serve -o и прекрасно подходит по URL-адресу ( http://localhost:4200/). Теперь я скопировал папку dist в рабочую область веб-приложения ASP.NET и переименовал ее в AngularModules. При нажатии на TabThree я попытался загрузить угловой компонент в Bodycontent с помощью одной из приведенных ниже строк кода для навигации:

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

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

Содержимое Head загружается нормально, но Bodycontent, который должен загружать Angular-компонент TabThree, пуст, с записью ошибки консоли, как показано ниже:

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 

Я сослался на ссылку ( включая приложение Angular2 на страницу веб-формы Asp.Net), но это тоже не решило проблему, и я не могу запустить компонент Angular в качестве вкладки в заполнителе BodyContent.

Я изучил обе ссылочные ссылки, но у них нет правильной информации о том, как происходит маршрутизация / навигация для загрузки углового компонента на странице ASPX.

Я пробовал другие подходы, кроме упомянутых выше, которые перенаправляют всю страницу и запускают приложение Angular как отдельное, но мое требование состоит в том, чтобы вписать угловой компонент в Bodycontent страницы TabThree.aspx, чтобы он соответствовал другим вкладкам / страницам.,

Любая помощь в решении этой проблемы маршрутизации в гибридном приложении была бы большой помощью, и я был бы признателен за то же самое.

Заранее спасибо!!

Я не нашел ни одного возможного дубликата для того же самого, и я также связал ссылки, надеюсь, это не помечено как дубликат.

Answer 1

Я исправил с помощью IFrame на странице aspx.

//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);