How to include external Angular 2 app in ASP.NET Webforms aspx page

Question

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

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>

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)?

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).

I'm glad you have identified the solution for this.. I was exactly trying the same approach to launch an angular component in an aspx page with a master. Could you please provide how you launched/redirected to this ASPX page? which inturn loads the Angular components via routing. — BVS
– BVS, Commented May 12, 2018 at 11:29

PajamaDuck · Accepted Answer · 2017-11-20 23:00:04Z

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

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" %>

add a ScriptManager with EnablePageMethods="true",

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

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>

EDIT: 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

works better than

ng build --prod -output-hashing=none

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

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=""/>

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

Collectives™ on Stack Overflow

How to include external Angular 2 app in ASP.NET Webforms aspx page

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related