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

Question

另一个团队(阅读外包)编写了一个 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 代码。

非常感谢任何指导建议(我已经搜索了几个小时的答案)。

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

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 结构的末尾。