micro-frontend | 易学教程

How to share UI state in single-spa using RxJs?

阅读更多关于 How to share UI state in single-spa using RxJs?

问题 As per the single-spa official doc, we can share the application's UI state by using RxJs. Observables / Subjects (RxJs) - one microfrontend emits new values to a stream that can be consumed by any other microfrontend. It exports the observable to all microfrontends from its in-browser module, so that others may import it. Link: https://single-spa.js.org/docs/recommended-setup/#ui-state Link: https://single-spa.js.org/docs/faq/#how-can-i-share-application-state-between-applications I was

Micro-Frontends, Web Components, and Sharing Libraries

阅读更多关于 Micro-Frontends, Web Components, and Sharing Libraries

问题 so I'm working on migrating my company's app to a micro-frontend approach. We are following the standard described in https://micro-frontends.org/. While under the hood everything is currently using React, we are wrapping things with Web Components so that we will have the freedom and flexibility to be framework-agnostic in the future. We've got a working architecture up and running and so far it is working beautifully. We even created a fancy compatibility layer on top of the Web Component

Micro Front End / Web Components / Vue Router Error : Uncaught TypeError: Cannot redefine property: $router

阅读更多关于 Micro Front End / Web Components / Vue Router Error : Uncaught TypeError: Cannot redefine property: $router

问题 I have stucked with a issue, Below is the scenario : I have developed a vue application (my-admin micro app) which has 4 - 5 screens/components (manage user , manage notifications ,manage roles etc) and i created a router.js where i have wrote following : ...imports... Vue.use(VueRouter); // } const routes = [ { path: '/', name: 'main-layout', component: MainLayout, children:[ { path : 'manage-user', name : 'manage-user', component : ManageUserComponent }, { path : 'manage-role', name :

Micro Front End / Web Components / Vue Router Error : Uncaught TypeError: Cannot redefine property: $router

阅读更多关于 Micro Front End / Web Components / Vue Router Error : Uncaught TypeError: Cannot redefine property: $router

Passing param to ngOnInit through service

阅读更多关于 Passing param to ngOnInit through service

问题 I just started learning about angular 2 and I am having questions on if the scenario I think is possible. I have a micro service model where in I have angular apps associated to each micro service. Microservice 1 & ng app 1 - is for handling the transactions of the user service 2 and ng app 2 - is to calculate all applicable taxes for the user If I land on app 1, enter the details of my transaction and click a continue button, I should be able to pass "All" the values that are required for

How to create a Micro Frontend bundle with Webpack that shares libraries with the container application?

阅读更多关于 How to create a Micro Frontend bundle with Webpack that shares libraries with the container application?

问题 I have a task. To have Micro Frontends with single-spa framework. portal/main application (which load all other js code by url) Micro Frontend 1 (react based) Micro Frontend 2 (react based) So my problem just one: I don't want to duplicate vendor libraries like react, react-dom (any others). And I want to make them shared among other Micro Frontends (which is bundled with webpack) I know what is the bad practice to have some global stuff (it's violate the whole idea of bundeling with webpack)

View injection container for angular

阅读更多关于 View injection container for angular

问题 I'm trying to have an angular module for each backend microservice. So to keep each module independent and clean while they use each other's components when available and a default "service-is-not-available" component, when the component is not found in the container. Example Scenario: Let's say there are a sales and accounting module. The sales module needs a component with selector: 'total-price'. Sales module and Accounting module are both used by the main module, but the sales doesn't

how to embed an angular app into another app?

阅读更多关于 how to embed an angular app into another app?

My team develop an angular 5 application that has been in production for a while, but we've been tasked recently with making the app work in other 3 sites the company owns. One site is a SPA built with Angular6, other is also a SPA but uses Angular5, while the other is using some older libraries such as jQuery. Management wanted us to integrate with the Angular5 SPA right away so we just exported the whole application as a module with child routes and let the other application do the bootstrap. But I'm afraid the above approach will not work for the non-angular site. This also tight couple

Vue.JS - micro frontend approach

阅读更多关于 Vue.JS - micro frontend approach

问题 Our team is developing a large project and we want to build a big app with multiple forms and dashboards and features. One monolith SPA would get complicated. So we discuss the approach of „micro frontends architect“. The goal is to generate a parent SPA which contains several child SPAs. All SPA should be of same framework (vueJS). The idea behind this approach (https://micro-frontends.org/) a web app is a composition of features which are owned of independent teams a team has a distinct

how to embed an angular app into another app?

阅读更多关于 how to embed an angular app into another app?

问题 My team develop an angular 5 application that has been in production for a while, but we've been tasked recently with making the app work in other 3 sites the company owns. One site is a SPA built with Angular6, other is also a SPA but uses Angular5, while the other is using some older libraries such as jQuery. Management wanted us to integrate with the Angular5 SPA right away so we just exported the whole application as a module with child routes and let the other application do the