ASP.NET Webforms aspxページに外部Angular 2アプリを含める方法

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 CoreまたはMVCアプリケーションを作成してAngularファイルを追加する（この可能性を考慮しています）ことがわかっている唯一の解決策として、これを正しく実行していませんか？

私は角2については何も知らない（私は学んでいるが、私たちは現在の短い時間割では、特に専門的な品質のコードを作成するのに十分ではない）ので、別のチームに角度コードを書く。

いずれの方向のアドバイスも大変ありがとうございます（私は今数時間の回答を探しています）。

Answer 1

私はこの記事で私の答えを見つけた： Angular2: Cannot read property 'call' of undefined (when bootstrapping) と、この記事で：Angular2 Selector did not match any elements with bundle and ECM6

具体的には、私は私のページ宣言で非同期= "false" に設定するために必要な、

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

追加= "true" をEnablePageMethodsとのScriptManager、その後、

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

、特定の順序で私のスクリプトを呼び出します。インライン、ポリフィル、ベンダー、メイン。 第2のポストは、具体的後のアプリのタグスクリプトを呼び出すために言う、すなわち

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

EDIT：2017年11月 私たちは、コードで働いていると、マップファイルが必要であることがわかりました。私たちは、前者が正しく実行するすべてのためのために、asp.netアプリケーションで必要とされているmapingファイルを与えるように、コマンド

ng build --env=prod 

が

ng build --prod -output-hashing=none 

より良い作品を発見しました。

Additinoally、私はこのスタックのポスト上のindex.htmlとapp.modules.tsファイルにコードを追加する必要性については、別の記事を見つけました：そう

<base href=""/> 

を設定することに関してSet base href dynamically - Angular 2/4 角度アプリケーションは正しいURL構造の末尾に追加されます。