Thankyou so much for explaining in such a nice way. Please make more video on how to pass data from react component to angular and how to load both on same page without navigation/eager load on single page.
my existing application implemented in angular 11, but now i have created micro frontend like above video. but i want to include existing app(angular 11) as well in this micro frontend. Please suggest
Thanks for details in the video. Also can we "serve" angular app locally to test application after creating with single-spa. I am getting an blank page
we need to add a separate project in angular.json to run the angular app as standalone (pointing to main.ts and separate tsconfig). Please find more details in the below link. github.com/single-spa/single-spa-angular/issues/92
Hi, can you create a video on how to add global styles, font awesome or any css from library in single-spa-angular. Since i upgraded angular version from 8 to 14 and single-spa-angular @7. icons and fonts from library's are not loading on the screen.
How to use angular generated application(ng new app name) with single Spa application(crete-single-spa)? Like i dont want to use angular application generated by create-single-spa. Also angular application generated by single-Spa is not running separately so how to fix this?
@@JSFrameworks ok got it. I know that there is a documentation in angular regarding setting up a routing using '/' in an apache server. Unfortunately, I cannot set it up properly. in case you have a tutorial or you can refer me to any site regarding on this topic. kindly share. Again thanks to your tutorial. I'm looking forward for more single-spa topics.
We need to configure our server to use index.html as fallback for routes which are not found on server(so that it will use client side routes). For "http-server", it was very easy just make a copy of index.html and rename as 404.html. angular.io/guide/deployment#server-configuration covers most of the server configs i think.
Thanks for this video, i just have one thing i have an error in my anglaur app , would anyone help me please >>>Uncaught Error: Unable to resolve bare specifier 'angular-app', this is the Error i searched a lot and tried many solutions but it dose not work with me
single-spa.js.org/docs/ecosystem-angular#installation-1 provides steps how to convert existing angular app to Single spa format. Please check it out. Once this step is done, manually add the route and app details in the container.
I have not used angularjs in past 4 years, so it is taking time. Will update asap. In the mean time this blog explains how to create the angular/angularjs app, medium.com/@ankur.101045/running-angularjs-angular-8-together-using-single-spa-36e8a578bc54
Uncaught TypeError: application '@react-app/react-app' died in status LOADING_SOURCE_CODE: Cannot read properties of undefined (reading 'ReactCurrentOwner') at 20 (react-jsx-runtime.production.min.js:9:270) at o (bootstrap:19:22) at 848 (jsx-runtime.js:4:20) at o (bootstrap:19:22) at single-spa-react.js:1:6716 this error i am getting
Followed this smoothly up until adding Angular MFE. The CLI didnt give me option to add routing and once the Angular App was added it didnt have the necessary main.single-spa.ts.
How to use angular generated application(ng new app name) with single Spa application(crete-single-spa)? Like i dont want to use angular application generated by create-single-spa. Also angular application generated by single-Spa is not running separately so how to fix this?
Thankyou so much for explaining in such a nice way. Please make more video on how to pass data from react component to angular and how to load both on same page without navigation/eager load on single page.
The best tutorial video for micro frontends. Thank you so much @JS Frameworks, really solved my problem
Thanks a lot bro. I was searching for this treasure for a whole week. Great work 👍🏻
What an amazing video, congratulations! I just wanted to know if it's possible to run Angular normally without needing the base application.
Nice MFE explained, however can you let me know how we can create a centeralized Redux store which can be accessible from each MFE's
I tried to create a root config project and I still can't load the page. I don't know what the problem is. Versions maybe?
my existing application implemented in angular 11, but now i have created micro frontend like above video. but i want to include existing app(angular 11) as well in this micro frontend. Please suggest
How should we deploy the micro front ends and the root config to a production server, could you please make a video on this?
👍
thank you so much for this beautiful explanation.
Thank you for the video. Its very helpful. I would really appreciate if you post a solution to fix the routing issue in prod mode.
Very helpful video. Thank you. Keep going 🙌🏼
Thanks
Thanks for this video, when i tried to click sub apps entire page is loading. it can't be possible with out entire page load ? please suggest
Using hashed routing won't reload entire page
@@JSFrameworks can you please guide me how we can do hashed routing
Thanks for details in the video. Also can we "serve" angular app locally to test application after creating with single-spa. I am getting an blank page
we need to add a separate project in angular.json to run the angular app as standalone (pointing to main.ts and separate tsconfig). Please find more details in the below link.
github.com/single-spa/single-spa-angular/issues/92
I was able to work this one. I share my github link this weekend and provide some steps so that you can follow.
Hi, can you create a video on how to add global styles, font awesome or any css from library in single-spa-angular. Since i upgraded angular version from 8 to 14 and single-spa-angular @7. icons and fonts from library's are not loading on the screen.
How to use angular generated application(ng new app name) with single Spa application(crete-single-spa)? Like i dont want to use angular application generated by create-single-spa. Also angular application generated by single-Spa is not running separately so how to fix this?
If I add more routes other than "**" routes in angular. It doesn't work. Can you please let me know how to implement that.
** should be added as the last option in route configuration
@@JSFrameworks
{ path: 'abc/:userId', component: ABCComponent },
{path:'**',component:EmptyRouteComponent} I did like this
how would one can use first route? angular/abc/someuserId ?
could be good if you have implemented vue parcel as well
Ok. Will do
ua-cam.com/video/E4VRBPNJzAc/v-deo.html
how to use craco for creating single spa ??
Not familiar. Need to check
in the production build, how will we do the routing?
If we use hash style routing, no changes are needed in production, since we use client side routing.
@@JSFrameworks ok got it. I know that there is a documentation in angular regarding setting up a routing using '/' in an apache server. Unfortunately, I cannot set it up properly. in case you have a tutorial or you can refer me to any site regarding on this topic. kindly share. Again thanks to your tutorial. I'm looking forward for more single-spa topics.
We need to configure our server to use index.html as fallback for routes which are not found on server(so that it will use client side routes). For "http-server", it was very easy just make a copy of index.html and rename as 404.html.
angular.io/guide/deployment#server-configuration covers most of the server configs i think.
@@JSFrameworks thank you! Ill definitely try this out.
Thanks for this video, i just have one thing i have an error in my anglaur app , would anyone help me please >>>Uncaught Error: Unable to resolve bare specifier 'angular-app', this is the Error i searched a lot and tried many solutions but it dose not work with me
Should be issue with the system-import-map not having details about 'angular-app'
Hai Brother, in production Mode, How to do the Configuration for the Route ? Any Videos For that
Will check that 👍
How load in container our existing angular project
single-spa.js.org/docs/ecosystem-angular#installation-1 provides steps how to convert existing angular app to Single spa format. Please check it out.
Once this step is done, manually add the route and app details in the container.
I already try that but not work
Could you clarify how to enable that angular route from react app to avoid 404?
You need to configure some kind of redirect in your web server (eg. Nginx)to handle 404
Tys for the video sir..
sir you add one more video . Communicating (passing Data) between angular and Reactjs MFE.
Sure
One vdo for angular js and angular 8
Sure. will do
@@JSFrameworks plz quick
Created a sample Single spa with Angularjs and Angular 12.
github.com/anuroopjoy/single-spa-legacy-angular
Will do video next week.
Doesn't the page become heavy if use multiple frameworks on the same page and reduces the performance?
Single spa uses only the minimal code needed for rendering the apps and only the apps in the current route will be active at the time.
Any leads for a react - angulatJS single SPA ?
You can try something similar to this. ua-cam.com/video/ZJ8Cvo5UZdM/v-deo.html
Replace the angular app with React app.
Can i load my project on cli loading container
I think you can load on the cli generated root config
It will work or not
Super Class
Thanks
Can we use webpack4 with Single SPA?
Yes I think so. Not tried it though
New vdo when came
ua-cam.com/video/ZJ8Cvo5UZdM/v-deo.html
How implementing angularjs
I want to cntact u immediately other wise my job is difficulty situation
I have not used angularjs in past 4 years, so it is taking time. Will update asap. In the mean time this blog explains how to create the angular/angularjs app,
medium.com/@ankur.101045/running-angularjs-angular-8-together-using-single-spa-36e8a578bc54
Super
Very useful video, time also to work on English pronunciation😉😉
Has always been my weak point 😊.
Uncaught TypeError: application '@react-app/react-app' died in status LOADING_SOURCE_CODE: Cannot read properties of undefined (reading 'ReactCurrentOwner')
at 20 (react-jsx-runtime.production.min.js:9:270)
at o (bootstrap:19:22)
at 848 (jsx-runtime.js:4:20)
at o (bootstrap:19:22)
at single-spa-react.js:1:6716 this error i am getting
Followed this smoothly up until adding Angular MFE. The CLI didnt give me option to add routing and once the Angular App was added it didnt have the necessary main.single-spa.ts.
Hope you were using the create-single-spa CLI and added angular as an application from that. Should be some environment setup issue.
How to use angular generated application(ng new app name) with single Spa application(crete-single-spa)? Like i dont want to use angular application generated by create-single-spa. Also angular application generated by single-Spa is not running separately so how to fix this?
This thread contains some solutions. Please try
github.com/single-spa/single-spa-angular/issues/92#issuecomment-509393411