如何在ASP.NET Webforms中包含外部Angular 2應用程序頁面

另一個團隊（閱讀外包）編寫了一個Angular 2應用程序，然後向我們發送了編譯後的文件。如何在ASP.NET Webforms中包含外部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代碼。

任何方向的建議非常感謝（我一直在尋找答案，現在幾個小時）。

來源

2017-05-30 papaJeremy

我發現我在這個崗位回答： Angular2: Cannot read property 'call' of undefined (when bootstrapping) 並在此職位：Angular2 Selector did not match any elements with bundle and ECM6

具體來說，我需要在我的網頁申報設置異步=「假」，

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

添加用的ScriptManager =的EnablePageMethods 「真」，

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

，然後調用我的腳本按照特定的順序：內聯，polyfill，供應商，主要。第二後明確表示，打電話給你的腳本後你的應用程序標籤，即

... 
<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年11月我們一直在努力的代碼，發現地圖文件是必要的。我們發現命令

ng build --env=prod

工作比

ng build --prod -output-hashing=none

因爲前者給出了所需要的asp.net應用程序，以便一切就會正常運行馬坪文件。

Additinoally，我發現另一篇文章對需要添加一些代碼中的index.html並在此疊後的app.modules.ts文件：要設置

<base href=""/>

所以Set base href dynamically - Angular 2/4 與問候角度應用程序被附加到正確的url結構的末尾。

來源

2017-05-31 00:17:59 papaJeremy

如何在ASP.NET Webforms中包含外部Angular 2應用程序頁面

回答

相關問題