docs: improve tutorial and readme for mf-tools

Author: manfredsteyer

libs/mf-tools/README.md

@@ -14,7 +14,11 @@ This can help to **balance the trade-off** between bundle size and isolation of
 
 > **Disclaimer:** Multi-Framework and -Version Micro increase the overall complexity and call for some workarounds. This library tries to hide some of them.
 
+## Features
 
+- ✅ **Minimal amount** of helper functions to allow implementing multi-framework/ multi-version Micro Frontends with Module Federation
+- ✅ You don't need an additional meta-framework. Instead, you just use your framework of choice, e. g. Angular
+- ✅ Extension to [@angular-architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation)
 
 ## Examples
 
@@ -67,11 +71,11 @@ export class AppModule {
 }
 ```
 
-### Exposing Web Component with other Frameworks like Ract
+### Exposing Web Component with other Frameworks like React
 
 If you framework doesn't directly support exposing your application as a web component, you can easily write a simple Wrapper around it. Basically, a web component -- to be more precise: a custom element -- is just an EcmaScript class extending ``HtmlElement`` and registered via ``customElements.register``. Please find an [example for React here](https://github.com/manfredsteyer/react-app/blob/main/app.js).
 
-### Exposting Web Component-based Micro Frontend via Module Federation
+### Exposing Web Component-based Micro Frontend via Module Federation
 
 Add ``@angular-architects/module-federation`` to your micro frontend:
 

libs/mf-tools/tutorial/index.md

@@ -147,7 +147,8 @@ If you don't want to do the upstream tutorial first, you can use [this example](
     import { bootstrap } from '@angular-architects/module-federation-tools';
     
     bootstrap(AppModule, {
-    production: environment.production
+        production: environment.production,
+        appType: 'shell'
     })
     ```
 
@@ -157,18 +158,14 @@ If you don't want to do the upstream tutorial first, you can use [this example](
 
 In this part of the lab, we will investigate the loaded micro frontend that has been called ["MF Angular #3"](https://github.com/manfredsteyer/angular3-app) before. We want to draw your attention to the following details:
 
-1. The application is bootstrapped with the [bootstrap function](https://github.com/manfredsteyer/angular3-app/blob/main/src/bootstrap.ts) already used above.
+1. The application is bootstrapped with the [bootstrap function](https://github.com/manfredsteyer/angular3-app/blob/main/src/bootstrap.ts) already used above. Please note that here, ``appType`` is set to ``microfrontend``.
 
 2. The ``AppModule`` is wrapping some components as web components using Angular Elements in it's [ngDoBootstrap](https://github.com/manfredsteyer/angular3-app/blob/main/src/app/app.module.ts) method.
 
 3. The [webpack config](https://github.com/manfredsteyer/angular3-app/blob/main/webpack.config.js) exposes the whole ``bootstrap.ts`` file. Hence, everyone importing it can use the provided web components. 
 
 4. The [webpack config](https://github.com/manfredsteyer/angular3-app/blob/main/webpack.config.js) shares libraries like ``@angular/core``. 
 
-5. The routes set up in the [AppModule](https://github.com/manfredsteyer/angular3-app/blob/main/src/app/app.module.ts) use the url matcher ``endsWith``, because it does not know the shell's parent route.
-
-6. The ``AppComponent`` calls the helper function [connectRouter](https://github.com/manfredsteyer/angular3-app/blob/main/src/app/app.component.ts) to make this app's router work alongside the shell's router. 
-
 
 ## More Details on Module Federation **