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

本文介绍了如何在 ASP.NET Webforms aspx 页面中包含外部 Angular 2 应用程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Another team (read outsourced) wrote an Angular 2 app and then sent us the compiled files.

如何在我的 aspx 页面中包含这些(现在)js 文件?不可能这么简单:

How do I include these (now) js files in my aspx page? It can't be as simple as:

<%@ 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 文件(我已经考虑过这种可能性)，所以我这样做是否正确?

Can it? I would assume I need to call a function to cause the javascript files to fire? Or am I not doing this correctly as the only solutions I keep finding involve creating a .NET core or MVC app and then adding Angular files to that (I've considered this possibility)?

我对 Angular 2 几乎一无所知(我正在学习，但我的知识不足以生成专业质量的代码，尤其是在我们目前的短时间表中)，因此让另一个团队编写 Angular 代码.

I know next to nothing about Angular 2 (I'm learning, but I don't know enough to produce professional quality code, especially on our current short timetable), hence having another team write the Angular code.

非常感谢任何方向建议(我已经寻找了几个小时的答案).

Any direction advice is greatly appreciated (I've been searching for answers for hours now).

推荐答案

我在这篇文章中找到了答案:Angular2:无法读取未定义的属性调用"(引导时)在这篇文章中:Angular2 选择器不匹配任何带有 bundle 和 ECM6 的元素

I found my answer in this post:Angular2: Cannot read property 'call' of undefined (when bootstrapping)and in this post: Angular2 Selector did not match any elements with bundle and ECM6

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

Specifically, I needed to set Async="false" in my page declaration,

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

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

add a ScriptManager with EnablePageMethods="true",

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

然后按特定顺序调用我的脚本:内联、polyfills、供应商、主要.第二篇文章专门说在你的应用标签之后调用你的脚本，即

and then call my scripts in a specific order: inline, polyfills, vender, main.The second post specifically says to call your scripts after your app tag, i.e.

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

November 2017We have been working with the code and found that the map files are necessary. We found the command

ng build --env=prod

效果比

ng build --prod -output-hashing=none

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

as the former gives the maping files which are needed in the asp.net application in order for everything to run correctly.

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

Additinoally, I found another post about the need to add some code to the index.html and the app.modules.ts files on this stack post: Set base href dynamically - Angular 2 / 4with regards to setting the

<base href=""/>

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

so that the angular application is appended to the end of the correct url structure.

这篇关于如何在 ASP.NET Webforms aspx 页面中包含外部 Angular 2 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

WebForms