Home/ Questions/Q 1376

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 62k
Asked: 2024-11-25T07:35:09+00:00

From Monolithic To Micro Frontends – Part 3

  • 62k

Table Of Contents

This will be the last part of the series and, we will see how can we register our Angular application inside our React application.

Prerequisites

  • Inside your Angular application open main.single-spa.ts file, and insert this line of code 
import "zone.js/dist/zone.js";
Enter fullscreen mode Exit fullscreen mode

  • Run your Angular application 
npm run serve:single-spa:angular-app
Enter fullscreen mode Exit fullscreen mode

And now you should have your Angular application running and its main.js file serving using this URL: http://localhost:4200/main.js

Application Registration

To register your Angular application you will need to use systemjs to load your Angular application module from the URL

Note: if you used systemjs directly to import your module inside your React application you might face this error
'System.import' is restricted from being used. Please use import(), so we will use a workaround to register the application.

index.html

  • Open index.html inside the public folder, and add these scripts which are responsible to load systemjs library 
<script src="https://cdn.jsdelivr.net/npm/import-map-overrides@1.16.0/dist/import-map-overrides.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/system.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/amd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/named-exports.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

  • Create our import map JSON object, which will contain a key value for our Angular application the key will be a unique name and the value will be the URL of the module, and also will contain the shared dependencies, read more about it from here 
<script type="systemjs-importmap">   {     "imports": {       "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.5.5/lib/system/single-spa.min.js",       "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",       "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",       "@angularApp": "http://localhost:4200/main.js"     }   } </script>
Enter fullscreen mode Exit fullscreen mode

  • Create a new script tag and inside it, we will define our function which will be used to load our Angular application module 
<script>    window["@angularApp"] = () => System.import("@angularApp"); </script>
Enter fullscreen mode Exit fullscreen mode

The final result for index.html should be like this

index.js

  • Open index.js file inside your React application and, add this snippet to register your application before start() 
registerApplication(   '@angularApp',   window["@angularApp"],   (location) => true );
Enter fullscreen mode Exit fullscreen mode

The final result for index.js should be like this

Start The Application

Now run your React application using the same script 

npm start
Enter fullscreen mode Exit fullscreen mode

and your application should be started and working fine, you can access it using this URL: http://localhost:3000/.
Now the two applications are running on the same page. you can control when to load or unload the application from the DOM by implementing the activity function inside registerApplication for more info check the documentation, in my case, I want to run the two applications on the same page, so I just returned true.

Conclusion

Alright, that is all for now, and I hope it was useful for you. You should now have a basic knowledge of what is micro frontends and how single-spa managed it. Also, I will leave below some references you can get back to it anytime.

angularjavascriptreactwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,