angular-elements | hosting Angular Components as Custom Elements | Web Framework library

Our Angular-Elements webcomponent should have the two methods openModal() and closeModal() that can be used as custom-element inside React, Vue or any other library to change the visibility state.

This simple javascript usage should be possible:

I'm trying to create some custom elements with Angular Elements 8 and it works great when using simple objects as string/number on my @Input(). But when I wanted to start using arrays of objects IE EDGE/11 throws exceptions.

Procedure

Clone repo (code github repo) or do the following:

1. ng new "some name"

2. update browserlist to include IE11

3. ng generate component simple-list

4. Write code for component with inputs

5. Serve solution (without angular elements I know) and everything works.

6. Add angular elements (ng add @angular/elements)

7. Modify module to bootstrap component as custom element

8. Serve and load with EDGE, see console error

Is there any way to use css selectors like :first-child, :not(:last-child) inside of the shadow dom?

The example is like this

CustomElement.html

Recently our team has decided to implement micro front end architecture in our legacy product. It has been developed using Asp.Net aspx pages along with javascript/jquery.

Last year we started using angular in our application for some of the views. To load angular we are placing the prod build files in .net project and we are loading the component in aspx master page.

We are planning to migrate our rest pending older views to angular using micro front end architecture.

So I did a small poc for the same and was able to achieve the architecture to somewhere close to it.

I followed this url for implementation and ran it on port 4400.

https://medium.com/swlh/build-micro-frontends-using-angular-elements-the-beginners-guide-75ffeae61b58

And in my existing angular project i am loading this using customElements

I recently downloaded the Angular CLI (@angular/cli 9.0.1). I then proceeded to create a new application so that I could create a new Angular Element, package it up, and use it in another application.

After following a few blogs, the final step of every blog I came across all talk about creating a single JS file from the generated files dropped under the dist/ folder. For example: https://blog.bitsrc.io/using-angular-elements-why-and-how-part-1-35f7fd4f0457

Then using the cat command, we are concatenating the runtime.js, polyfills.js, scripts.js, and main.js files from the dist/angular-app folder into a angularapp.js file inside the preview folder.

Running ng build angular-app --prod --output-hashing=none instead seems to produce files named:

• main-es5.js
• main-es2015.js
• polyfills-es5.js
• polyfills-es2015.js
• runtime-es5.js
• runtime-es2015.js

I scoured every single file that had the terms es5 and es2015 and changed it to es6, but it still produced the same es5 and es2015 file names. What am I doing wrong here?

I have a vector a and need to perform a summation over two indices, something as

I have been trying all day to get an Angular elements component working, as I was considering using them in an upcoming project.

I have followed a number of tutorials (all very similar), and just cannot get them working. One of the tutorials is this one.

I have the following package.json for the Elements project

I need to create an Angular app with different microservices. There doesn't seem to be any clear tutorials on how to actually turn a component into a microservice. I tried this tutorial but it doesn't explain the packaging process. Is packaging a component into a microservice the same as packaging a library? Are they imported into a project the same way?

What is the best way to prepare a component so it can be consumed as a microservice?

I'm trying to export angular custom elements defined in a library L - through the constructor of the AppModule of the library L(customElements.define('my-custom-element', myComponent)).

On importing the library L, my angular application throws exception when using the element,