module-federation-plugin-example | This examples loads a microfrontend into a shell

by manfredsteyer TypeScript Version: Current License: No License

X-Ray Key Features Code Snippets Community Discussions(3)Vulnerabilities Install Support

kandi X-RAY | module-federation-plugin-example Summary

module-federation-plugin-example is a TypeScript library. module-federation-plugin-example has no bugs, it has no vulnerabilities and it has low support. You can download it from GitHub.

This examples loads a microfrontend into a shell:.

Support

Quality

Security

License

Reuse

Support

module-federation-plugin-example has a low active ecosystem.

It has 202 star(s) with 129 fork(s). There are 13 watchers for this library.

It had no major release in the last 6 months.

There are 17 open issues and 8 have been closed. On average issues are closed in 32 days. There are 5 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of module-federation-plugin-example is current.

Quality

module-federation-plugin-example has 0 bugs and 0 code smells.

Security

module-federation-plugin-example has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

module-federation-plugin-example code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

module-federation-plugin-example does not have a standard license declared.

Check the repository for any license declaration and review the terms closely.

Without a license, all rights are reserved, and you cannot use the library in your applications.

Reuse

module-federation-plugin-example releases are not available. You will need to build from source code and install.

Installation instructions are available. Examples and code snippets are not available.

It has 140 lines of code, 0 functions and 78 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of module-federation-plugin-example

Get all kandi verified functions for this library.

module-federation-plugin-example Key Features

No Key Features are available at this moment for module-federation-plugin-example.

module-federation-plugin-example Examples and Code Snippets

No Code Snippets are available at this moment for module-federation-plugin-example.

Community Discussions

Trending Discussions on module-federation-plugin-example

Angular MFE - WebPack5 - Module Federation - Image Path Issue

Angular module federation webpack duplication

Module Federation Shared Services

QUESTION

Angular MFE - WebPack5 - Module Federation - Image Path Issue

Asked 2021-Sep-16 at 08:37

We are creating an MFE angular app using Module Federation WebPack 5 and ended up in an issue with the image source path. When we run the MFE alone, the image is loading(localhost:5000/assets/../angular.png) but when we run the host/shell app, the image is not loading for MFE since MFE is running in a different port(5000) and Shell is running in a different port(4200) and the app is trying to access the image from Shell's asset folder(localhost:4200/assets/../angular.png) when we run the shell app.

We have two options in hand:

Move those images to a common folder, outside the MFE and refer
set the image path dynamically using the basepath from a configuration file

We have used the below sample for my testing but in the below sample the angular.png file is available in both MFE1 and Shell but if we remove it from Shell, it won't work when we load the shell app.

Source Reference Code Sample (thanks to @manfredsteyer)

Any other solution in MFE to resolve this?

...

ANSWER

Answered 2021-Sep-16 at 08:37

The problem is that the images are imported using relative paths. Because the micro frontends are always loaded inside the shell, these paths will reference the shell's assets. To fix the issue you would need to add the complete URL to the image to load it from the correct micro frontend.

If you want to load an image in the micro frontend it should look like this:

Source https://stackoverflow.com/questions/69192229

QUESTION

Angular module federation webpack duplication

Asked 2021-Sep-06 at 13:09

So I have 2 angular apps and I'm using webpack module federation to import one into the other I got it working but I'm encountering some strange behavior. I think the problem is the same or similar to this but there's no answer and it's been some time.

In my remote app I have a div below a table that is only there while I'm getting the data from the database and then it's hidden. When i go to the remote it works fine no problem but when i use the shell the div was not being hidden. I then added a button to toggle the div visibility but what happened was that the div os duplicated when the bool flag turn true and nothing when it turned false. I then used the shell from this github and changed the flight component to be exactly the same as my remote component and imported my component and it happens only on my component. This can be seen in this video.

I believe the problem is in the remote and not in the host.

Host webpack.config.ts:

...

ANSWER

Answered 2021-Sep-06 at 13:09

So it seams the problem was that i was importing 'BrowserAnimationsModule' on the remote module i was exporting. After i removed it it started working properly.

Source https://stackoverflow.com/questions/69047759

QUESTION

Module Federation Shared Services

Asked 2020-Oct-28 at 16:23

I'm working on a new project using Angular 11 and Webpack 5. I am basing my work on Manfred Steyer's Module Federation Plugin Example repo, which uses Angular CLI. I can't figure out how to share a singleton service from a shared local Angular library between my two apps.

I'll do my best to explain my setup.. Real sorry about how long this is going to be.

Simplified File Structure ...

ANSWER

Answered 2020-Oct-28 at 16:22

TL;DR

Make sure any module dependencies your shared services have are also shared.
Make sure you've structured your shared config correctly in webpack.config.ts

I'm going to note that my project is an NX Monorepo using Angular CLI. I'm using (at the moment) Angular 11.0.0-next and Webpack 5, which is only available as an opt-in with ng11 at the time of writing.

If you're using path aliases in your tsconfig, you are used to importing local libraries like "@common/my-lib", but you can't share modules by alias in your webpack config. Furthermore, if you're on NX, your linting will complain if you import from absolute or relative library paths, so there is a disconnect between what Webpack wants, and what nx/tslint wants.

In my project I have some library aliases like the following

Source https://stackoverflow.com/questions/64501315

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install module-federation-plugin-example

* Please note, you must use yarn during the beta phase of CLI 11 b/c it allows to override dependencies to force the CLI into webpack 5.
Install packages: yarn (!)*
Start Micro Frontend (remote): ng serve mfe1 -o
Start Shell (host): ng serve shell -o
Make sure mfe1 is started before shell is loaded into the browser
Use the hyperlink flights in the shell to load mfe1

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: