The module-federation from valorkin

Create a demo of injecting Angular Component in SAP UI5 application

Add a demo where we inject Angular Component from Angular application built with MF into SAP UI5 application with Custom Elements version of Container Injector

Upgrade/rewrite framebus and worker-rpc as TS modules

why: In current implementation this modules aren't compatible with ng-elements compile because are in commonjs format and has circular dependencies
if possible make a PRs to original repositories
to avoid waiting for open source we could temporary publish our versions

Acceptance

TBD: add injector for Angular v4

TBD: add injector for SAP UI5

Update Readme.md with what is inside this repo

@fkolar commented on Fri Oct 02 2020

Describe what can be seen here in this repo and what to find where so our application developers can better navigate thru this.

Concept: Generated Client Libraries

We are planning to add generator of client libraries based on data provided in remote container definition and components metadata

We are planning to generate libraries for:

angular
custom elemets
TBD: react

Acceptance

Remove iframeuri\iframeAttr inputs from plugin launcher

Remove iframeuri\iframeAttr inputs from plugin launcher
why: we should work only with manageable resources and not hardcoded URIs in html

Acceptance:

Part 2 - Plugin Bindings

@ZhmenZH commented on Mon Oct 05 2020

Module federation way is more to use components bindings just like you would use it in Angular or any other framework and less using message-bus. This applies regardless if we are dealing with Angular based plugin, Web Component or any other framework.

We should enable PluginLauncher with Bindings support so application can pass and read data in order to communicate more natively with the target application
Ideally we want something like:

<fds-plugin-launcher name="Basket" [bindings]="MapKeyValue" events="MapWithEvents"> </fds-plugin-launcher>

<fds-plugin-launcher name="Basket" sectionTitle="This is basket details" (click)="OnAddToCard($evemt)"></fds-plugin-launcher>

We should enable it to read inputs & outputs from the instantiated component or from created web component element and connect this with attributes on the host <fds-plugin-launcher> component

@valorkin commented on Mon Oct 05 2020

mostly research and documentation to start with
via ngAst or via angular language service
element schema can be generated via custom angular builder, or meta-ui

@fkolar commented on Wed Oct 14 2020

The same like the other tasks M3

Rename LookupService to Container Configuration Manager

why: service term used outside of angular context leads to a confusion

ng-elements containers injector

Convert Angular Containers Injector to Angular elements (this part already done)

Acceptance

Part 2 - Remote module loading error

@ZhmenZH commented on Mon Oct 05 2020

If a host can’t import a module when it tries we return a blank module or not allowed callback and registration

@valorkin commented on Tue Oct 06 2020

each launcher will have it's own onerror handler, if downloading of module\iframe\webcomponent downloading fails
3 retries by default, and globally configurable
and generic error handler on top of it - maybe

bubble up such events to developers to the top shell

each launcher should have @output() load and @output() error

describe lifecycle

@fkolar commented on Wed Oct 14 2020

@skocharian Let's move this one to M3

Upgrade to the latest ng 11

and remove all unneeded artifaces from repository

TBD: Distribution model

npm:

angular module + component
ng-elements as application
custom elements
host:
ng-elements built with Module Federation

ng plugin launcher: managed iframes

https://github.com/SAP/fundamental-ngx/blob/appshell/libs/app-shell/src/lib/components/plugin-launcher/plugin-launcher.component.ts#L126

whem iframe uri provided via plugins.json

leads to

Maintain mf urls in single location

@devikiran commented on Wed Nov 04 2020

The current structure has mutiple config file which have mf urls in different locations,
for example:-

1.webpack.extra.js (publicpath)
2.app.routes.ts
3.plugins.json
4. protactor.conf.js

the url changes for diff environments like dev,qa,stage,prod....
as a developer its difficult to maintain the urls in different location and change the urls manually for every environment
,we should start having these in a central location and read it from there.

ref:-
https://github.com/valorkin/ng-mf-submodules/blob/master/packages/one-bx-shell-app/src/app/app.routes.ts
https://github.com/valorkin/ng-mf-submodules/blob/master/packages/nx-app/webpack.extra.js
https://github.com/valorkin/ng-mf-submodules/blob/master/packages/one-bx-shell-app/src/assets/config/plugins.json
https://github.com/valorkin/ng-mf-submodules/blob/master/packages/ngrx-app/e2e/protractor.conf.js

Make Container Definitions Manager universal

why: consumers should be able to provide and update Containers Configuration in runtime

remove Angular specific configuration from AppShellModule
add support for multi: true @optional @InjectableToken to provide Remote Containers Configuration
add a way to provide configuration via global object like google analytics
add support for Remote Container Configurations via URIs

Acceptance

Schematics to structure project

@skocharian commented on Wed Sep 30 2020

Create generate schematics that will preconfigure webpack config. But this should have a dependency on current mf-builder work, if we get more closer to the ng commands - so this one probably has a lower priority than the other tasks. Low priority

Once MF: Resources & scss is done we need to automate this with set of schematics.

Create schematics that can generate Webpack configuration based on the angular JSON
-- New project: @fundamental-ngx/app-shell:ng-add
-- Existing project: @fundamental-ngx/app-shell:generate schematics
Reorg- existing angular structure to match our ng-mf-submodules

@fkolar commented on Wed Oct 14 2020

@skocharian let;s move this to M3, as this will have dependency to a task where we integrate CLI build with ngx-build-plus

Gitbook, Guidelines

@skocharian commented on Wed Sep 30 2020

update Gitbook with clear guidelines how to get:

How to install our environment to new and existing projects
Describe Project structure and where to find what
Create new page Tutorial By Example, where we almost each sample we will have and describe how to :
- Expose Angular|WebComponnet|iFrame service to be consumed by remote host
- How to use Plugin Launcher and how we work with Plugin Configuration
- MessageBus and list existing topcis
- Describe Error Managements
- How to comunicate with iFrames using RPC
- Routing
- State Management.
How to setup development environment and how to test MF apps inside emulated appshell

@fkolar commented on Thu Oct 29 2020

Should we get technical writter for this? Now we have 2 of you full time and me working on this from like 30%.

ng plugin launcher: iframeAttr should be optional

providing iframeUri without iframeAttr leads to

Split Injector from a God Class to a set of plugable injectors

Split God class injector into a set of injectors
why: this should be a plugable architecture, on order to be able to easily add support for ui5\react\etc.

iframe
custom-elements
angular module and component

Acceptance:

Documentation

Cover all moving parts with documentation
gitbook + some website deployed as gh-pages

Plugin Permissions

@skocharian commented on Wed Sep 30 2020

Create or extends configuration to keep it apart from the way we have (as part of the plugin), so plugin permission can be loaded by one-bx-application. It will list different permission defined by one-bx-developer or microservice, such as:

• Permission to listen to theme change
• Can talk to AppShell
• Can talk to other apps (app:event)
• Can propagate errors to app:shell (for the application - plugins)
• Can create custom Topics

Depending on what permission is enabled we need to update existing code inside PluginManager to add or remove certain topics from the list or enable or disable creating certain topics. or Drop communication (Publishers, Subscribers)

We can maybe just extend our plugins.json for new property permissions: [xxx, aaa, ccc] and this can be quick.

MF:Schematics to configure webpack

@skocharian commented on Wed Sep 30 2020

Once MF: Resources & scss is done we need to automate this with set of schematics.

Create schematics that can generate Webpack configuration based on the angular JSON
-- New project: @fundamental-ngx/app-shell:ng-add
-- Existing project: @fundamental-ngx/app-shell:generate schematics
Reorg- existing angular structure to match our ng-mf-submodules

Remove iframeuri\iframeAttr inputs from plugin launcher

Remove iframeuri\iframeAttr inputs from plugin launcher
why: we should work only with manageable resources and not hardcoded URIs in html

Acceptance:

Federation utils add exports on a module level

Export loadRemoteEntry and lookupExposedModule from root exports so it could be consumed without deep linking

Web Components Container Injector Wrapper

Develop Web Components Container Injector
why: ng-elements is an angular application in a nutshell and in this case we should benefit from building it with webpack 5 Module Federation and distributing with shared angular dependencies

Before start:

compare and evaluate tools for developing for developing web components and choose one (stencil, svelte, lit-elements)

Acceptance:

LoadChildren with lazy imports is not working.

@fkolar commented on Fri Oct 23 2020

Currently we use helper method loadRemoteModule to load remote module and all this works well but when you try to turn this into lazy imported module, where you also add declaration into decl.d.ts its is still does not work.

 loadChildren:
    // todo_valorkin this should work when we switch to cli builder
    // () => import('contentItemApp/ItemPageModule').then(m => m.ItemPageModule)
      () => loadRemoteModule({
        uri: 'http://localhost:4202/remoteEntry.js',
        name: 'contentItemApp'
      }, {exposedModule: './ItemDetails'} as any)
        .then(m => {
          console.log(m);
          return m.ItemDetailsModule;
        })
  },