Micro Frontend in Angular using Angular Elements | Micro Frontend

Angular elements can be used to create a micro-frontend application in Angular. We can take the help of web components to create a micro front-end application. You can convert your component(s) or the entire application to a micro frontend, which can then be used in multiple locations or in a base application. The main advantage of the micro foreground is that it can be developed and integrated into any framework.
#mfe #microfrontends #angular
GitHub: github.com/fun...
Link to the playlist: bit.ly/3y3c1Mk
Some more playlists:
Create PWAs: bit.ly/359BXpK
NgRx: bit.ly/2Qu0Ucu
Performance optimization: bit.ly/3fFa1Q8
RxJs: bit.ly/3hytr8o
Angular Tutorial: bit.ly/2Tnwk1t
Dashboard with chart.js: bit.ly/3c9Jd85
Application Development: bit.ly/398w7Gf
Upload File to server: bit.ly/3ccsjWd
Data Structure and algo: bit.ly/3c8b7Bh
Discord: / discord
Slack: bit.ly/2RXPcEK
You can support me on Patreon: / funofheuristic
Equipment used for Video (India links):
Headphone (ATH M50X): amzn.to/3xDcSQK
Microphone (AKG D5): amzn.to/3b1gi5R
Audio Interface (EVO 4): amzn.to/327tnGJ
Camera(Canon 200D): amzn.to/3ja1Pr9
Thanks for watching...

[@zebcode]

It would be great to have an updated version of this showing how it can be done using stand alone components in a newer Angular project.

[@abhijit4uguru]

this is pretty helpful and proper base material to understand MFE in angulars. 10/10

[@VivekSharma24290]

Another application to use Angular Elements is we can package any component/package as a Web Component to support "cross-framework".

[@Evika_cutie]

This is pretty simple explanation, I loved it. It works for me :)

[@vinaykumarmiryala6082]

Eagerly waiting for the next video on micro frontend

[@soumighosh5096]

Awaiting for the next part.

[@ykarthikeyasharma]

Hi, it is helpful. As entrycomponents is deprecated in Angular 16 and in higher versions. How do we create the MFEs

[@subratbhola1770]

really helpfull . Thank you subrat

[@dmytrodomaretskyi5757]

Clear explanation. Thx for your job bro

[@poojapoojitha9114]

Wow nice

[@sanjeebsahoo6145]

Thanks Very good and informative video.

[@Wideraperture]

Hi, How to make a platform service which is singleton and can be used across the micro frontend apps?

[@witty_idipt]

Is there a way to track these microfrontends, without using external providers?

[@irshadmuhammed7740]

The bundled file is not working on angular 17

[@nanasarathi]

Well explained 👍 Thanks for creating this video 🙏 Eagerly waiting for the entire series on micro frontend

[@ramyabalasubramanian6916]

Hi. Great video. How can i acheive routing within angular element? If my angular element is an application in most cases it will have routing.

[@rahoolification]

Fantastic!

[@_pankajkr]

Nicely explained. 😊 By the way, audio quality is awesome. Which model of Shure microphone you are using?

[@FunOfHeuristic]

Shure MV7

[@alessandropanarese2535]

Hi thanks for your good video. Could you suggest some guide or book to use as integration of your video, related to how migrate an Angular application in a WebComponent wrapper?

[@josileudorodrigues7818]

Exist something that I can do to run --hmr with Micro front-end to improve my perf of development?

[@manuelcarok]

Hello, did you find a soluction? That you can help me

[@FunOfHeuristic]

Unfortunately we can't do it from base app, as it's not connected directly, but we can configure it in monorepo

[@vukkumsp]

May be we can keep micro frontend modules as a cdn link throughout the enterprise just like we keep npm, maven libraries in repo.

[@stratvids]

there is nothing about micro frontend in this video, just how to make a basic web component using angular elements. commenting your bootstrap in and out is also unnecessary, you can use bootstrap: environment.production ? [] : [AppComponent], this way when you do a production build you don't bootstrap anything, but if you use ng serve it will

[@javidcarlos]

Loads fine but my css is not appended in Host app . Tried adding in Concat js too . still Doesnt work . can u help here?

[@javidcarlos]

Load images / styles under assets folder

[@FunOfHeuristic]

You can use ViewEncapsulation.ShadowDom in your component so the css will be wrapped in a shadow dom and will be included in your js file

[@ibrahimkhaleelullah515]

I have a question related to MicroFrontend. I have a remote angular application having angular elements. Need to configure the remote application to bundle these web components and expose them so the host application can just reference that in its index.html file. Note: Here the host application is a legacy application and does not understand angular but needs to reference remote-hosted web components in its index.html file.

[@FunOfHeuristic]

If I understood your question correctly, that's what we're demonstrating in the video. You can create a web component (JS bundle) and run it in any framework or in a simple HTML file.

[@nilbristi]

Nice explanation. Can you guide me on how can I create an angular widget and use/call it an of another angular project? For example just like we use transak or stripe widgets.

[@shaibyasandeep]

I am trying to render multiple angular elements(angular-6) on another angular application(shell-Angular -15), but only two of them are rendering ...rest are not defined in shell application, do you have any clue , what could be reason ?

[@FunOfHeuristic]

Have you added all the script and tags properly, and make Shure the tags name should be different.

[@123ankit321]

Nice guitar !

[@davidlatty]

entrycomponents is deprecated for angular 9. Please show that example... --prod is deprecated too ... it is --configuration production i believe

[@FunOfHeuristic]

Entry component is not necessary and now default build is prod build.

[@varunkoundal882]

Hi , it's not working... Entry components itself is not working in angular 16.. also when i am running a server it is showing me a tree structure instead of index.html

[@FunOfHeuristic]

Now you don't need an entry component, You need to run the server where your index.html is for example dist/

[@varunkoundal882]

I tried still I am getting a blank page , I tried with exactly you have shown still it's not working for me

[@FunOfHeuristic]

@@varunkoundal882 if you are not getting any error in console then there is something with directory you are starting your server. By the way you should check the module federation way of creating MFE, it's a lot more efficient than angular elements.

[@varunkoundal882]

In console I am facing error with custom element define

[@JohnManavalan]

What is there in the runtime js. Do we have zone js inside that.

[@satishattada]

Entry components not supporting in latest angular version, what is the alternate for it

[@FunOfHeuristic]

Now it should work without an entryComponent, I will also check and update here.

[@ishraq95]

@@FunOfHeuristic not working

[@FunOfHeuristic]

Hey I have updated the code in the repo could you please check if that helps

[@ishraq95]

@@FunOfHeuristic It was working. But routing doesn't work..

[@radharamanyadav3508]

Hello i hope you are doing well, can you please provide next video on Micro frontend

[@ojiepermana]

i get error when i use [routerlink] in microfrontend. like this NullInjectorError: R3InjectorError(e)[e -> e -> e]: NullInjectorError: No provider for e!. can u help. thanks

[@FunOfHeuristic]

The video for navigation is inline

[@sureshveeramalla963]

Can we add react application with Angular?

[@FunOfHeuristic]

Yes, you can create a micro frontend in react and plug that to angular

[@vukkumsp]

Yeah, micro frontend helps to use different libraries/frameworks into a single application. Good idea.

[@mousikeanurag7519]

Nice But how can we use ngb pagination or ngb date picker in as angular element.?

[@FunOfHeuristic]

Just use it as a normal application and export the css, or you can put the css in the base app.

[@rameshy2415]

Nice video on micro ui, have one doubt if my parents app version is angular 9 & child app version is angular 15 will that work?

[@FunOfHeuristic]

Yes

[@dhanushr6172]

Great, but is there any performance issues for using react package in angular??

[@FunOfHeuristic]

There will be some bandwidth issues, if the user has low bandwidth then it might take a little more time to load both angular and react bundles. In the usual scenario it's good to use the same framework. With module federation we can share the framework code between different mfes

[@dhanushr6172]

​@@FunOfHeuristic waiting for more videos :)

[@kavyashreebj5848]

Is there a way to create Angular Elements as a library and publish it to npm?

[@FunOfHeuristic]

Yes, but there were some limitations. Will get back to this once I find something

[@pali122]

wont this maybe add douplicated code? like one app vs two microfrontends with poly and vendors

[@FunOfHeuristic]

It's depends on how you dividing your micro Frontend, and yes it will add some angular or any other framework code per micro FE, but that is negligible to how much benefit we will get out of it, and from 13 we don't need poly in angular so only angular code. The basic app bundled micro FE is only 131 KB.

[@RajashekarReddydasari]

man i dont know what this video is about. it gives info about how to create angular elements but nothing about mfe. Also the font is very tiny, cant see.

[@itscodingbere]

How to set the baseurl for my micro front end ?

[@FunOfHeuristic]

Do you mean base url in the base app or in the mfe.

[@itscodingbere]

@@FunOfHeuristic Thank you for replying Actually i am trying to make a chatbot with the help of your videos so i wan to make it in such a way it can be integrated in any web application. So my first question is it possible ? Second question about baseUrl i was asking was how can i set the baseurl for my chatbot app i.e micro front end ?

[@valikonen]

Man, this is not micro frontend, it's just a pseudo web component.....

[@steffen01102]

And why not?

[@magdyelmansy4272]

how can we use this script in WordPress app

[@FunOfHeuristic]

This is a web component so you can easily use this with WordPress

[@witty_idipt]

my index.html doesn't show the app-mfe content!

[@FunOfHeuristic]

Index.html which is created by angular will have angular components details, as you have created this you need to add that in the html file, you can use any html file

[@witty_idipt]

@@FunOfHeuristic my index.html file is not showing the output, i did everything explained in your video

[@FunOfHeuristic]

@@witty_idipt any error in the console

[@witty_idipt]

@@FunOfHeuristic no, everything ran smoothly, just the component is not loading, if i add anything else in html file, it shows, can you share your source code, and any help reagrding this pls

[@FunOfHeuristic]

Please check the description of the video.

[@shriramjadhav]

Angular component animation does not work with Angular Elements!!!!

[@FunOfHeuristic]

Any error you are facing

[@narendrabhadouriya3873]

your code is not working

[@FunOfHeuristic]

Hey if it's not working for the new version of Angular, please have a look on GitHub I have updated the code there

[@alnes204]

in Angular 17, it still will not work, also your updated Code. @@FunOfHeuristic

[@burymm]

looks weird

[@brunoccs]

Whole shit is every programmer from India these days? Can't find a single video about micro frontends without an accent