Как включить внешнее приложение Angular 2 в ASPX-страницу ASP.NET Webforms

Question

Другая команда (читай аутсорсинг) написала приложение Angular 2, а затем прислала нам скомпилированные файлы.

Как мне включить эти (сейчас) файлы js в мою страницу aspx? Это не может быть так просто, как:

<%@ Page Title="" Language="C#" MasterPageFile="~/CISBase.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="StudyPrograms.Default" MaintainScrollPositionOnPostback="True" %>

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


<asp:Content ID="HeadContent" ContentPlaceHolderID="CISBaseHead" runat="server">
  <script type="text/javascript" src="../CIS.js"></script>
  </asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="CISBaseMainContent" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
  <section 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" />

  </section> 

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="CISBaseBottomScript" runat="server">
</asp:Content>

Может это? Я бы предположил, что мне нужно вызвать функцию, чтобы вызвать запуск файлов javascript? Или я делаю это неправильно, поскольку единственные решения, которые я продолжаю находить, включают создание ядра.NET или приложения MVC, а затем добавление к нему файлов Angular (я рассматривал эту возможность)?

Я почти ничего не знаю об Angular 2 (я учусь, но я не знаю достаточно, чтобы создавать код профессионального качества, особенно по нашему текущему короткому графику), поэтому другая команда пишет код Angular.

Любой совет направления очень ценится (я искал ответы в течение нескольких часов).

Answer 1

Я нашел свой ответ в этом посте: Angular2: не могу прочитать свойство 'call' из undefined (при начальной загрузке) и в этом посте: Angular2 Selector не соответствует ни одному элементу с bundle и ECM6

В частности, мне нужно было установить Async="false" в объявлении моей страницы,

<%@ Page Title="" Language="C#" MasterPageFile="~/CISBase.Master" AutoEventWireup="true" 
CodeBehind="Default.aspx.cs" Inherits="StudyPrograms.Default" 
MaintainScrollPositionOnPostback="True" Async="false" %>

добавить ScriptManager с EnablePageMethods="true",

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

а затем вызывать мои скрипты в определенном порядке: inline, polyfills, vender, main. Во втором посте конкретно говорится, чтобы вызывать ваши скрипты после тега приложения, т.е.

...
<app-root>Loading...</app-root>

<script type="text/javascript" src="AngularModules/inline.bundle.js"></script>
<script type="text/javascript" src="AngularModules/polyfills.bundle.js"></script>
<script type="text/javascript" src="AngularModules/vendor.bundle.js"></script>
<script type="text/javascript" src="AngularModules/main.bundle.js"></script>
<link href="AngularModules/styles.bundle.css" rel="stylesheet" />
...
</asp:Content>

РЕДАКТИРОВАТЬ: ноябрь 2017 Мы работали с кодом и обнаружили, что файлы карты необходимы. Мы нашли команду

ng build --env=prod

работает лучше чем

ng build --prod -output-hashing=none

поскольку первый дает файлы сопоставления, которые необходимы в приложении asp.net для того, чтобы все работало правильно.

Кроме того, я обнаружил еще один пост о необходимости добавить некоторый код в файлы index.html и app.modules.ts в этом сообщении стека: динамически устанавливать base href - Angular2/4 в отношении установки

<base href=""/>

так что угловое приложение добавляется в конец правильной структуры URL.