thank you! But doesnt this approach make your component 'smart' and not so re-usable anymore? I cleary see the problem with inputs/outputs, but I'm afraid putting the data directly into the component will kill the scalability
Your series is great help! I followed it but when i am trying run link like localhost:4000 of mf1 in mf2 i am getting CORS issue, how should i resolve it?
Thanks for your video. Can we expect React tutorial as well? Just want to confirm that mef1 and mef2 both are different projects correct? If yes, could you please show me how to combine both projects like where you placed a mef2 bundle in the base of the mef1 projects. It's very helpful for me to understand more easily.
Hi, I am using Ngx-translate. I am using native-federation by angular architect. I am facing issue in remote app. How to add ngx-translate at component level. so that it will work while using host app
There are various ways to control it, one simple way is to check it in your MFE, if it's not expecting data /parameters / auth level then you can block the rendering.
Thanks for the video, can we create a common angular library to hold reusable components and shared services and data. I tried it but its not singleton. Every web components has its own instance of common library...any thoughts?
I am not 100% sure, but by using Module Federation, you can access the service and render the data, making it a common module to hold your data. You can check the video on Dynamic Module Federation if you want to know more Thanks.
I noticed that you left the in index.html. If I had to pass the value via @input into my app.component.ts which is where the application starts. would that only be possible via the custom tag? or could I pass it via parameters? How would it work?
What can I use to communicate old frontend in AngularJS to new frontend in angular 16? Module Federation doesn't work with angularJS, neither single-spa, any help? thanks
Hi and thank you again. I was not able to use this methodology to have a host app host more than one web component (unless, after moving to where the second component is placed, I clicked Refresh on the browser --- then if I moved to where the first component is placed it wouldn't display unless I again clicked Refresh). If possible it would be great if you could expand this tutorial to show hosting multiple Angular web components / elements in a host Angular application.
No it can receive the event if you are listening to it, what you want is like BehaviourSubject. But you can use session storage in this case and use the same key to grab.
What about sharing data using services? If i want initiate data on the host and share it between mfe1 and mfe2, how can i do that? Should i crrate the same service on the 3 apps?
@@FunOfHeuristic but im talking more like a subscription not event emmiter, so i dont need to invoque the component, i send the data to the service, and anyone can subscribe to it, more like a session or a localstorage stuff
You can use session storage and locals storage and they will work fine, but not service because it will give you compile time error, because your mfe will not have any idea about your base services.
It's normal input output, what ever you can do with normal angular components you can do the same. Think this as normal angular components in this scenario.
thank you! But doesnt this approach make your component 'smart' and not so re-usable anymore? I cleary see the problem with inputs/outputs, but I'm afraid putting the data directly into the component will kill the scalability
Excellent Explanation. 💯💯💯💯💯💯
Your series is great help!
I followed it but when i am trying run link like localhost:4000 of mf1 in mf2 i am getting CORS issue, how should i resolve it?
Thanks for your video. Can we expect React tutorial as well?
Just want to confirm that mef1 and mef2 both are different projects correct?
If yes, could you please show me how to combine both projects like where you placed a mef2 bundle in the base of the mef1 projects. It's very helpful for me to understand more easily.
You can put the mfe bundle in cdn and refer to it in the base app. I will make a video series for making an application
@@FunOfHeuristic thanks for your kind response waiting for your new videos
Hi, I am using Ngx-translate. I am using native-federation by angular architect. I am facing issue in remote app. How to add ngx-translate at component level. so that it will work while using host app
thank you for the tutorial, I have a question though.
How we can Secure the micro front ends app?
apparently, everyone can call it.
There are various ways to control it, one simple way is to check it in your MFE, if it's not expecting data /parameters / auth level then you can block the rendering.
Thanks for the video, can we create a common angular library to hold reusable components and shared services and data. I tried it but its not singleton. Every web components has its own instance of common library...any thoughts?
I am not 100% sure, but by using Module Federation, you can access the service and render the data, making it a common module to hold your data.
You can check the video on Dynamic Module Federation if you want to know more
Thanks.
I think you linked to the wrong repo for this video. Can you provide link to the code?
liked, subscribed
Can you please tell or share some ref. how to create shared service from host app to remote app
I noticed that you left the in index.html. If I had to pass the value via @input into my app.component.ts which is where the application starts. would that only be possible via the custom tag? or could I pass it via parameters? How would it work?
It will work as usual, because when we expose the component through angular elements then we don't need index.html to render it.
@@FunOfHeuristic Truly, thanks for your attention!
What can I use to communicate old frontend in AngularJS to new frontend in angular 16? Module Federation doesn't work with angularJS, neither single-spa, any help? thanks
Browser events(event emitter) will work for you.
@@FunOfHeuristic i will try that, thanks!
How should we pass the access token from host app to mfe?
Please create videos on React as well.
Hi Can u share us the code for 2 mfe's communication
Hi and thank you again. I was not able to use this methodology to have a host app host more than one web component (unless, after moving to where the second component is placed, I clicked Refresh on the browser --- then if I moved to where the first component is placed it wouldn't display unless I again clicked Refresh). If possible it would be great if you could expand this tutorial to show hosting multiple Angular web components / elements in a host Angular application.
In real time apps, is it a good practice to hold this customElement.js file at some location say in an S3 bucket and then read it from there?
Yes all static files should come from a CDN
@@FunOfHeuristic Thanks for the response!
Will this work if I am opening the micro app2 after sending the event from app 1. Here both apps are loaded in browser so able to receive the event
No it can receive the event if you are listening to it, what you want is like BehaviourSubject. But you can use session storage in this case and use the same key to grab.
Hi iam not able to grab event.details please help me
Eroor says event dont have property detail but i can see it in console
Hello, You might be reading the details before it arrives. Please use event?.details, if it helps
What about sharing data using services? If i want initiate data on the host and share it between mfe1 and mfe2, how can i do that? Should i crrate the same service on the 3 apps?
From host to mfe you can share data by input
@@FunOfHeuristic but what if i want to leave all the info available at any time, like a subscription, is there a way to do it?
That's what I have shown in the video the pub sub model, you will emit your data wherever you want and can receive it wherever you want.
@@FunOfHeuristic but im talking more like a subscription not event emmiter, so i dont need to invoque the component, i send the data to the service, and anyone can subscribe to it, more like a session or a localstorage stuff
You can use session storage and locals storage and they will work fine, but not service because it will give you compile time error, because your mfe will not have any idea about your base services.
How to share assets like static images(svg, png) from remote to shell . ?
It's always better to host files in CDN, so you can access them throughout your application
Can you please help know how to pass data from host to mfe and from mfe to host
It's normal input output, what ever you can do with normal angular components you can do the same. Think this as normal angular components in this scenario.
Please do it for react