如何在 ASP.NET Webforms aspx 页面中包含外部 Angular 2 应用程序答案

【问题标题】：How to include external Angular 2 app in ASP.NET Webforms aspx page如何在 ASP.NET Webforms aspx 页面中包含外部 Angular 2 应用程序
【发布时间】：2017-10-31 11:49:07
【问题描述】：

另一个团队（阅读外包）编写了一个 Angular 2 应用程序，然后将编译后的文件发送给我们。

如何在我的 aspx 页面中包含这些（现在）js 文件？不能这么简单：

<%@ 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 代码。

非常感谢任何方向建议（我一直在寻找答案几个小时）。

【问题讨论】：

我很高兴您已经找到了解决方案。我正在尝试使用相同的方法在具有母版的 aspx 页面中启动角度组件。您能否提供您如何启动/重定向到此 ASPX 页面？进而通过路由加载 Angular 组件。

标签： asp.net angular webforms

【解决方案1】：

我在这篇文章中找到了答案： Angular2: Cannot read property 'call' of undefined (when bootstrapping) 在这篇文章中：Angular2 Selector did not match any elements with bundle and ECM6

具体来说，我需要在我的页面声明中设置 Async="false"，

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

添加一个带有 EnablePageMethods="true" 的 ScriptManager，

<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 年 11 月我们一直在处理代码，发现地图文件是必要的。我们找到了命令

ng build --env=prod

效果比

ng build --prod -output-hashing=none

因为前者提供了 asp.net 应用程序中所需的映射文件，以便一切正常运行。

另外，我在此堆栈帖子中发现了另一篇关于需要向 index.html 和 app.modules.ts 文件添加一些代码的帖子：Set base href dynamically - Angular 2 / 4 关于设置

<base href=""/>

以便将 Angular 应用程序附加到正确的 url 结构的末尾。

【讨论】：