CODEWITHSUNDEEP
asp.netangularwebforms
PajamaDuck
PajamaDuck

Reputation: 124

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

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

Upvotes: 4

Views: 3905

Answers (1)

PajamaDuck
PajamaDuck

Reputation: 124

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.

Upvotes: 5

Related Questions