如何在ASP.NET Webforms aspx页面中包含外部Angular 2应用 [英] How to include external Angular 2 app in ASP.NET Webforms aspx page

问题描述

另一个团队(外包外包)编写了一个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 Core或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:无法读取未定义的属性"call"(自举时) 并且在这篇文章中: 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 2017 We 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文件中添加一些代码的文章:

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 / 4 with regards to setting the

<base href=""/>

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

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

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