The production assembly remoteEntry.mjs from nx (Module Federation) is not functioning correctly

When working on local development, everything is functioning properly. However, when attempting a production build and importing remoteEntry.js from the host to the remote port, an error message appears stating 

"Failed to fetch dynamically imported module error: http://localhost:2000/remoteEntry.mjs."

It seems that this error is caused by the browser not recognizing it as a script. Upon inspecting the sources, I couldn't find any mention of the js option. What steps can be taken to resolve this issue?

An example of tsconfig:

"target": "esnext",
"module": "esnext",
"lib": ["esnext", "dom"],

Environment: Angular 13, NX Monorepo, @nrwl/angular/module-federation(libs)

angulartypescriptmonorepoangular-module-federation

Answer №1

Resolved! It appears that the issue was related to the nginx setup. In order to fix this, we had to include nginx in the mime.types file.

server
{
   include mime.types;
   types
   {
      application/javascript mjs;
   }
...
}

Answer №2

1- To integrate the deployment tag into your host app's "project.json," follow these instructions.

"deploy": {
  "executor": "nx:run-commands",
  "outputs": [],
  "options": {
    "command": "rm -rf production && mkdir production && cp -r dist/apps/<YOUR-HOST-APP>/* production && cp -r dist/apps/{<REMOTE-APP1,REMOTE-APP2>} production && http-server -p 3000 -a localhost production"

2- Update the "project.json" in your host app with implicit dependencies.

"implicitDependencies": ["<REMOTE-APP1>", "<REMOTE-APP2>"]

3- In the "module-federation.config.js" file of your remote app, add the specified remotes:

const { withModuleFederation } = require('@nrwl/angular/module- 
federation');
const config = require('./module-federation.config');
module.exports = withModuleFederation({
...config,
remotes: [
['<REMOTE-APP1>', 'http://localhost:3000/<REMOTE-APP1>'],
['<REMOTE-APP2>', 'http://localhost:3000/<REMOTE-APP2>']
]   
});

4- Turn off caching in Chrome Developer Tools for better performance.

https://i.sstatic.net/5H1sZ.png

5- Now proceed with building and deploying your project.

nx build <HOST-APP>
nx deploy <HOST-APP>

6- Experience seamless loading of the necessary files post-build using NX for MFE workspace setup.

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

Ways to dynamically specify the boundary for cdkDrag in TypeScript

It's something I've been thinking about lately - is it possible to define a cdkDrag boundary in typescript? @Input() public container: any; constructor(public el: ElementRef, private dragDropService: DragDrop) { } ngAfterViewInit(): void { ...

angularangular-cdk

Converting javascript html object lowercase

Is there a way to dynamically adjust the height of specific letters in my label? Right now, I am overriding the text for the elements: let element = document.getElementById('xxx') element.textContent = 'Label' I attempted using <sup ...

javascripthtmlangular

Angular element fails to display properly

I'm currently working on developing a website using Angular and creating a header component. To generate the necessary files, I used the command ng g c commons/header which creates the HTML, SCSS, TS, and .spec.ts files. I then made modifications to t ...

htmlangularbootstrap-4

An issue arises with the cdk overlay in Angular when combined with the *ngIf directive

Recently, I attempted to enhance a button with a contextual menu. Following the example provided in the Angular Material documentation, I successfully implemented the feature: my-component.html <button type="button" cdkOverlayOrigin #tri ...

angularoverlayangular-directive

Testing Angular components using mock HTML Document functionality is an important step in

Looking for help on testing a method in my component.ts. Here's the method: print(i) { (document.getElementById("iframe0) as any).contentWindow.print(); } I'm unsure how to mock an HTML document with an iframe in order to test this meth ...

angulartypescriptunit-testingfrontendjasmine

TSX: Interface Definition for Nested Recursive Array of Objects

I'm having trouble making my typescript interface compatible with a react tsx component. I have an array of objects with possible sub items that I need to work with. Despite trying various interfaces, I always run into some kind of error. At the mome ...

reactjstypescriptcomponentscreate-react-appreact-tsx

Exploring Angular and Spring boot integration: A guide to displaying image files

Is there a way to display an image in an Angular app using a Spring Boot REST service, even if the image file is not located in the assets folder and could be stored anywhere on the disk? ...

angularspring-boot

Opting for Angular 4 over the alpha version of bootstrap 4 opens up a world of possibilities

Implementing Bootstrap in my recent Angular 4 Project has been a challenge. Upon installing it with npm, I realized that the Alpha version of Bootstrap was installed, which is not what my client wants. They prefer to avoid using any Alpha versions. Could ...

angulartwitter-bootstrap-3bootstrap-4

The error message "TypeError: 'undefined' is not an object ('_this.props')" indicates that the property '_this

Having trouble solving this issue. Need assistance with evaluating 'this.props.speciesSelection.modalize' <BarcodeInput speciesSelection={this.props.speciesSelection} species={species[0]} barcode={{ manufacturerValue: ...

javascripttypescriptreact-native

Strategies for incorporating Alpha into your background

Is there a way to change the background alpha rgba(0,0,0,.5) in angular material-18? I attempted to use the following code but it doesn't seem to be working: .alternate-theme-blue-navbar { .mat-toolbar-row { background: rgba(mat.get-theme-color( ...

angularangular-material

Testing the selection of dropdown values in Angular2 using unit tests

I have a dropdown menu for selecting countries. It defaults to a pre-selected value, and when the user changes it, they are redirected to the corresponding country page. However, I am facing an issue while trying to unit test the default value in the sele ...

javascriptangularunit-testingtypescriptjasmine

Angular 2 Integration for Slick Carousel

Greetings! I have recently ventured into Angular 2 and am currently attempting to get a carousel plugin called slick up and running. After some trial and error, I have successfully implemented it as a Component in the following manner: import { Component ...

javascriptangularslick.js

Error encountered with the PrimeNG Angular2 Accordion component

https://i.sstatic.net/NqDIN.png I am currently utilizing the PrimeNG accordion module. After importing all components successfully, I encountered an issue with a newly created component. Despite verifying that all modules were imported correctly, I contin ...

angularprimeng

Utility managing various asynchronous tasks through observables and signaling mechanism

Looking for a Signal-based utility to monitor the status of multiple asynchronous operations carried out with observables (such as HTTP calls). This will enable using those signals in Components that utilize the OnPush change detection strategy. Imagine h ...

angulartypescriptrxjsrxjs-observablesangular-signals

Should front-end and back-end share Typescript data modeling through classes or interfaces?

I'm currently exploring the best approach to share the same data types between the client (React) and the server (Express + Socket.IO). Within my game, there are various rooms each storing the current status, such as: class GameRoom { players: P ...

javascriptreactjstypescriptexpress

Every time an action is carried out in the app, React generates countless TypeError messages

Whenever I'm using the application (particularly when started with npm start), my console gets flooded with thousands of TypeError messages like this: https://i.sstatic.net/3YZpV.png This issue doesn't occur when I build the app... It's fr ...

reactjstypescriptredux

What are the steps to clear an Ion-Select form field in Ionic 3?

I'm looking for a way to give users the option to clear the ion-select form field in case they decide not to choose an option after already selecting one. However, I haven't been able to find any solutions so far. <ion-item class="formField ...

angularformsionic3ion-select

Tips for retrieving input data sent from the parent component in Angular 2

I am working on a playlist component that receives an input 'playlist' from its parent component. This input is an object of arrays structured as follows: playList: { headerPlaylists: Array<any>, bodyPlaylists: Array<any> ...

angulartypescript

Exploring Advanced Features of Express Routes Using Higher Order Functions

While browsing a blog post on , I came across a method for handling await/async in Typescript express routes. The concept of using Higher Order Functions to prevent code repetition caught my attention, however I'm unsure of how to implement this ...

node.jstypescriptexpress

Emphasize a word in a Typescript text by wrapping it in an HTML tag

I've been experimenting with using HTML tags within TypeScript to highlight specific words in a sentence before displaying the sentence in HTML. Despite searching on StackOverflow for various solutions, I haven't been able to find one that works. ...

angulartypescript