Integrating angular web component

Hi,
I have followed below article and created web component. I need to use this component in below two existing applications. Can you please guide me the same. I am new to angular and web components.

  1. MVC application
  2. Angular JS application
1 Like

ASP.NET MVC? .NET Framework or .NET Core?

Its ASp.net framework

It’s .net framework and I also need to integrate in angular js

Welcome by the way :slight_smile:

Do you render HTML server-side? Or only use ASP.NET MVC as a web API?

Thank you🙂 I will render html at server side

Hi @vvennapusa and welcome to inDepth!

I read your question. actually, I have done exactly that - incorporate ANgular components inside an ASP. NET app. But I would like to have more details - what problems exactly are you facing?

1 Like

Thanks for the reply. It would be helpful if you can give me steps to use this web component in my .net framework applications. How do I publish this? Do I need to convert this as mom package or node module? If I just add the scripts path (which I got in dist folder) in my html and add the custom element it’s not recognised. The script file I have copied from dist folder and placed in my .net project folder and referred that path. Not sure if it’s correct.

I mean npm package not mom, it’s typo

@vvennapusa all you need is to buld your Angular web component. Say you named it ‘my-component’. Just run ng build MyComponent --prod, it will generate the files. Now go to the html page in your MVC app where you want to include you web component. Include the relevant file that you just built (usually it’s polyfills.js, vendor.js, scripts.js, main.js and runtime.js - in this exact order). After the files are included (make sure to include them before you use the web component) just place the selector where in your page you need the component - <my-component></my-component>

It’s great can you please paste ur html page where u used web component so that I will follow the same and check. Including files u mean copy the below mentioned js files in the project folder and refer them in html vua script tag?

Yes, exactly. You can take a look at this repository, it is not MVC, but that does not matter. Step by step explanation how to build and deploy it, written by me

Thanks alot :slightly_smiling_face: I will follow this and get back to you

1 Like

@armen
Wouldn’t it be nice to use ngx-build-plus with the --single-bundle option?

1 Like

Definitely. I would use it, but I already had the scripts set up manually. @vvennapusa definitely take a look at what Lars suggests, it will help you a lot

Thanks for the suggestion BTW if I use this option will it generate as single script file? whats the actual benefit with this?

Hi, for me the files are generated like below. its has es5/es2015 in the scripts file names. How do i avoid that? i tried to include all in my html but it didnt work.

below is my html
image

@vvennapusa the benefit is that you have less files to include.

Yeah, it does generate lots of files without that option. You have to select the ones that you need. If you only build for modern browsers, you can go for -es2015.js files. IF you have to support older ones like IE 11, you can choose the ones with -es5.js

I did use only 2015 files in below order but still my custom element not loaded in my html. when i do ng serve in my angular application where the web componenets is there it did show as expected. i have added the custome element in index.html there. But when i try to use in another application the custom element not loading.