2

I want to implement small angular 5 application which can be loaded in one of the div on the aspx web page. I am looking for some guidelines/sample implementation for the same. Let me know if you can guide me to correct implementation.

What I have done so far -
1. Created a sample Angular app using Angular CLI
-> ng new my-project
2. Created new ASP.Net Application using Visual Studio. (In reality this is exsiting production application, I do not have choice to change this much)
3. Now I want to inject the Angular app created in step 1, under new div element in header of Master page i.e. Site.Master page - 

<div style="height:200px;width:200px;">
    <app-root></app-root>
</div>

4. I copied the "dist" folder from angular app created from step 1 into the ASP.Net Application
5. I added below javascript references in the Site.Master page -

<link rel="stylesheet" href="Scripts\dist\styles.e126e9be62c6ec7bbe7a.bundle.css">
<script type="text/javascript" src="Scripts\dist\inline.c2cb6d48ecf795001683.bundle.js"></script>
<script type="text/javascript" src="Scripts\dist\polyfills.e2849426e0e249e7e4c2.bundle.js"></script>
<script type="text/javascript" src="Scripts\dist\vendor.d5313318b7c6a324c5a8.bundle.js"></script>
<script type="text/javascript" src="Scripts\dist\main.c802be7b400789c4e980.bundle.js"></script>

Questions :-
1. Is this right approach?
2. I keep getting the Zone.js browser errors because it looks like default ASP.Net application refers Zone javascript and so does the default angular app
3. What would be potential issues that I would face if I build this as enterprise level application?
4. What will happen if I have same Javascript library referred in aspx and in angular app?

CHash11
  • 746
  • 4
  • 14
  • 31
  • 1
    (1) its working, but not exactly the best approach, better of use [package manager](https://github.com/johnpapa/Angular-NuGet) to manage (almost) everything. (2) [zone.js is used by angular](https://stackoverflow.com/a/49873382/4648586) to track requests. (3) it will be a pain to copy-paste every time, see point 1. (4) there will be conflict, it applies to any html page (which aspx generates). hope someone will elaborate more. cheers! – Bagus Tesa Aug 09 '18 at 07:17
  • @BagusTesa can you please elaborate more on the Point (1) . Also I have updates question a bit to add more clarity on the ASP.Net application in question. – CHash11 Aug 23 '18 at 02:04
  • Question to anyone reading this, is it wise idea to use ReactJs for this?I am not sure but this is what I heard from a UI developer, React is better when you want to build partial pages/controls and Angular is better when you want to build full page/app – CHash11 Nov 21 '18 at 02:16

1 Answers1

0

From my expirience, I learnt that ReactJS is probably better fit for this purpose. I have used ReactJs to accomplish the above task withouth glitch and its running perfectly fine. Here are my answers to questions in context based on my experience -

  1. Is this right approach?
    ANSWER :- Its perfectly alright to do this with React, in fact its a recommended way to gradually expand presence for ReactJs in your website in case strategic direction in your oragnisation to move to React from Legacy.

  2. I keep getting the Zone.js browser errors because it looks like default ASP.Net application refers Zone javascript and so does the default angular app
    ANSWER :- Did not face this issue with ReactJS

  3. What would be potential issues that I would face if I build this as enterprise level application? ANSWER :- If your existing Web application is heavily using Jquery/Javascript or other libraries and you want to do same in injected React App, then it might be something to think about. Mainly you want to keep existing web page light and put more focus on React App.

  4. What will happen if I have same Javascript library referred in aspx and in angular app?
    ANSWER :- Avoid using same javascript library in ReactJs, in fact it would be better to avoid Jquery or old JS libraries in ReactJS.

Reference :- https://jonhilton.net/use-react-in-your-existing-asp-net-app/

CHash11
  • 746
  • 4
  • 14
  • 31