Developing microfrontends using Angular involves loading and navigating a compiled package from npm

I have been struggling to find a solution to an ongoing issue and wasting time on futile attempts.

Currently, I am working with Angular 15 within a microfrontend architecture. My goal is to implement a system where I can download a compiled microfrontend using npm and visualize it in a development environment alongside the shell. The microfrontend itself is developed separately as a standalone Angular application.

In this microfrontend architecture, there is a process where a manifest is read to determine the URL of the microfrontend that needs to be loaded:

{
   "mfe1": "http://localhost:3000/remoteEntry.js"
}

My objective is to make the compiled microfrontend accessible at the specified URL above, which points to the compiled code located within the node_modules directory.

While this is not an issue in production environments where the server's URL hosts the compiled microfrontend, I am seeking a way to dynamically load it from the node_modules during development.

It is crucial for this project to maintain separation between the development of the shell and the microfrontends, with only the ability to download the microfrontends in their compiled form.

Is there a feasible way to achieve this?

In comparison to a traditional microfrontend setup, I have attempted to modify the angular.json file so that my MFE1 reference does not point to a folder such as projects/mfe1/src/... but rather to the compiled code within the node_modules directory.

javascriptangulartypescript

Answer №1

@update [Resolved]

I have discovered an even superior solution, possibly the ultimate one, achieved by polarizing the angular.json.

Within the "development/assets" section, insert this line:

{ "glob": "**/*", "input": "./node_modules/@my-package-whit-compiled-mfe/...", "output": "./assets/mfe/my-mfe-name" }

It will appear like this:

"development": {
    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": true,
    "namedChunks": true,
    "assets": [
        "projects/shell/src/favicon.ico",
        "projects/shell/src/assets",
        { "glob": "**/*", "input": "./node_modules/@my-package-whit-compiled-mfe/...", "output": "./assets/mfe/my-mfe-name" }
               ]
}

This ensures that when the shell is compiled, the compiled microfrontend is transferred to the assets folder.

Now, update the string specified in the manifest to load the microfrontend as shown below:

{
   "mfe1": "http://localhost:5000/assets/mfe/my-mfe-name/remoteEntry.js"
}

Et voilà!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Do you know if there is a setting in prettier that allows line breaks to be preserved?

Encountering an issue with the prettier extension in VS Code, Whenever I enter the following code: const result = await pool .request() .query('select NumberPlate, ID, TimeStamp from RESULTS order by ID'); and save the file, it con ...

javascriptexpressprettier

"Enhance the visual appeal of your Vue.js application by incorporating a stylish background image

Currently, I am utilizing Vue.js in a component where I need to set a background-image and wrap all content within it. My progress so far is outlined below: <script> export default { name: "AppHero", data(){ return{ image: { bac ...

javascripthtmlcssvue.js

Is it possible for a memory leak to occur when a jQuery object is created within a function but never actually used?

As an illustration: function calculateTime(minutes) { var newTime = new Date(); newTime.setHours(0, minutes, 0, 0); return angular.element('<input type="hidden"/>').timepicker('setTime', newTime).val(); } I'm cu ...

javascriptjqueryhtmlangularjs

What is the most effective method for attaching a jQuery click event to every anchor tag within each row of a table?

Displayed here is a grid (basic html table) showcasing users with the option to delete a specific user by clicking on the delete link. My typical approach involves: <% foreach (var user in Model.Users) {%> <tr > <td align="right"><% ...

javascriptjquery

The incorrect ordering of my array within a nested ng-repeat in AngularJS

I have extracted Json data from a mongodb database collection. Successfully displayed the keys of this json. Currently attempting to present an array in a table using a double ng-repeat in my view. Although I am close to achieving my desired outcome, th ...

javascriptangularjsangularjs-ng-repeat

Attempting to utilize a for loop in JavaScript to condense code, however encountering a "not defined" error

I'm relatively new to working with javascript and currently attempting to enhance the following code snippet (which has been tested and is functioning correctly): // snail 1 // var s1 = document.createElement("div"); s1.id = snail1.id; s1.className = ...

javascriptfor-loopundefined

What could be the reason for Spawn() not being invoked?

After working with node.js and express for some time, I have encountered a persistent bug in my code. In my service file, there is a resolved Promise where I call spawn(), but for some reason, the spawn code never gets executed (or if it does, ls.on(' ...

javascriptnode.jsexpresspromisespawn

Firebase Cloud Function Local Emulator Fails to Retrieve Data with Error 404

My goal is to locally trigger a Firebase Cloud Function using the emulator. However, every time I try, the function returns a 404 Not Found status code and a response body of Cannot Get. The function is deployed locally and visible on the UI, but it fails ...

typescriptfirebasegoogle-cloud-platformgoogle-cloud-functions

The timer countdown is encountering an issue where it cannot update the 'textContent' property of a null element

I'm encountering errors with a countdown script that I can't seem to resolve. The error message is generating 1 error every second: Uncaught TypeError: Cannot set property 'textContent' of null at (index):181 (anonymous) @ (index):181 ...

javascripttimerwebcountdown

Unable to attach eventName and callback to addEventListener due to the error message stating 'No overload matches this call'

I am attempting to attach an event listener to the input element stored within a class method. This method takes a props object containing eventName and callback. public setTextFieldInputListener({ eventName, callback }: TextFieldListenerProps): void { ...

javascripttypescriptevent-listener

Retrieve the file that has been uploaded to AWS S3

Here is a snippet of code to consider : var express = require('express'), aws = require('aws-sdk'), bodyParser = require('body-parser'), multer = require('multer'), multerS3 = req ...

javascriptnode.jsamazon-web-servicesamazon-s3

What is the best way to send data to an API controller using AJAX in an MVC framework?

I am facing an issue with POSTing a string data to the api controller in mvc using ajax. Despite my efforts, the data does not seem to reach the api controller. Here is what I have attempted: This is the JavaScript code I have used: ...

javascriptc#ajaxasp.net-mvcasp.net-core

What exactly is the most efficient method for validating fields within an Angular template?

My reactive form is currently displaying a validation message for each field that is not valid. However, I noticed that I was repeatedly using the check !!(!form.get(field)?.valid && form.get(field)?.touched); in every input field. So, I decided to ...

angularangular-reactive-forms

What is the proper way to display the complete result of aggregating each outcome from the previous iteration within two nested queries in an array using NodeJS and Mongoose?

As a newcomer to both Stackoverflow and NodeJS/Mongoose, I apologize if I make any mistakes or break any rules. Thank you in advance. I'm looking for a function that can return all nearby products based on my current location, which is provided by th ...

javascriptnode.jsmongodbexpressmongoose

Are the Bootstrap columns arranged in a vertical stack instead of side by side?

I currently have two large columns that are stacked vertically on top of one another. I want them to be side by side, like | 1 | 2 |, so that the user can view both columns simultaneously. I am seeking tips or suggestions on how to resolve this issue. Whil ...

javascripthtmlcssbootstrap-4

Troubleshooting a 400 Bad Request Error in jQuery Ajax for WordPress Widgets

I am attempting to send information to admin-ajax.php in order to save it as a $_POST variable for handling on the cart page. However, my .ajax function keeps failing. var sendJsonA = {'value':'Data coming from JSON'} var ajaxurl = $ ...

javascriptphpjqueryajaxwordpress

Tips for utilizing the Toggle Slider JS functionality

I'm attempting to change a value using a slider in HTML, here is my approach: html file : <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script scr="./scripts.js" ...

javascripthtmlcheckbox

Convert time display to a 24-hour format using JavaScript

I managed to convert the time format from GMT to my browser's local time using the following JavaScript code: var newDate = new Date(timeFromat); timeFormat = newDate.toLocaleString(); Now, I want to change the time format to a 24-hour clock format ...

javascript

What is the process for setting up basic http authorization using angular.js?

My backend setup follows a structure similar to what is explained in this article. I am looking to make a GET request using angular.js, just like curl does it, with authorization via HTTP headers: $ curl -u miguel:python -i -X GET http://127.0.0.1:5000/a ...

javascriptangularjshttp-authentication

What is the proper way to transfer data to PHP using AJAX?

I'm facing an issue while trying to send FormData to a PHP file. When I press submit, nothing happens. However, when I send data separately, it works fine. <form method="post" class="code_form" enctype="multipart/form-data& ...

javascriptjqueryajaxform-data