Micro Frontend in Angular using Angular Elements | Micro Frontend

[@zhandosainabek]

Thanks man! You explained everything so simple!

[@abhijit4uguru]

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

[@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.

[@vinaykumarmiryala6082]

Eagerly waiting for the next video on micro frontend

[@shivautube2009]

I have a question- how can we achieve UI framework agnostic approach in host and MFE Integration...in other words, how can I make an Angular Host app have React/Vue MFEs...vice versa...is web components the way...or we can use module federation as well.. Which is better/easier

[@soumighosh5096]

Awaiting for the next part.

[@Evika_cutie]

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

[@ykarthikeyasharma]

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

[@VivekSharma24290]

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

[@dmytrodomaretskyi5757]

Clear explanation. Thx for your job bro

[@witty_idipt]

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

[@sanjeebsahoo6145]

Thanks Very good and informative video.

[@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.

[@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.

[@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.

[@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

[@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

[@irshadmuhammed7740]

The bundled file is not working on angular 17

[@subratbhola1770]

really helpfull . Thank you subrat

[@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 :)

[@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.

[@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..

[@JohnManavalan]

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

[@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

[@poojapoojitha9114]

Wow nice

[@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

[@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.

[@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?

[@_pankajkr]

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

[@FunOfHeuristic]

Shure MV7

[@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 ?

[@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

[@rahoolification]

Fantastic!

[@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

[@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.

[@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.

[@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.

[@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.

[@magdyelmansy4272]

how can we use this script in WordPress app

[@FunOfHeuristic]

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

[@123ankit321]

Nice guitar !

[@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.

[@radharamanyadav3508]

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

[@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

[@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.

[@nanasarathi]

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

[@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

[@valikonen]

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

[@steffen01102]

And why not?

[@shriramjadhav]

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

[@FunOfHeuristic]

Any error you are facing

[@brunoccs]

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

[@burymm]

looks weird