docs(mf): update readme and tutorial for v14.3

Author: manfredsteyer

libs/mf-runtime/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@angular-architects/module-federation-runtime",
   "license": "MIT",
-  "version": "14.3.0-beta.4",
+  "version": "14.3.0",
   "peerDependencies": {
-    "@angular/common": ">=14.0.0-next.15",
-    "@angular/core": ">=14.0.0-next.15"
+    "@angular/common": ">=14.0.0",
+    "@angular/core": ">=14.0.0"
   },
   "dependencies": {
     "tslib": "^2.0.0"

libs/mf-tools/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@angular-architects/module-federation-tools",
-  "version": "14.3.0-beta.4",
+  "version": "14.3.0",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": ">=14.0.0-next.15",
-    "@angular/core": ">=14.0.0-next.15",
-    "@angular/router": ">=14.0.0-next.15",
-    "@angular-architects/module-federation": "^14.3.0-beta.4",
-    "@angular/platform-browser": ">=14.0.0-next.15",
+    "@angular/common": ">=14.0.0",
+    "@angular/core": ">=14.0.0",
+    "@angular/router": ">=14.0.0",
+    "@angular-architects/module-federation": "^14.3.0",
+    "@angular/platform-browser": ">=14.0.0",
     "rxjs": ">= 6.0.0"
   },
   "dependencies": {

libs/mf/README.md

@@ -8,10 +8,11 @@ Big thanks to the following people who helped to make this possible:
 
 - [Tobias Koppers](https://twitter.com/wSokra), Founder of Webpack
 - [Dmitriy Shekhovtsov](https://twitter.com/valorkin), Angular GDE 
+- [Michael Egger-Zikes](https://twitter.com/MikeZks), Angular Architects
 
 ## Prequisites
 
-- Angular CLI 12 
+- Angular CLI 12 or higher (13, 14)
 
 ## Motivation 💥
 
@@ -36,10 +37,21 @@ Since Version 1.2, we also provide some advanced features like:
 ## Which Version to use?
 
 - Angular 12: @angular-architects/module-federation: ^12.0.0
-- Angular 13: @angular-architects/module-federation: ^14.0.0
+- Angular 13: @angular-architects/module-federation: ~14.2.0
+- Angular 14: @angular-architects/module-federation: ^14.3.0
 
 Beginning with Angular 13, we had to add some changes to adjust to the Angular CLI. Please see the next section for this.
 
+## Update
+
+This library supports ``ng update``:
+
+```
+ng update @angular-architects/module-federation
+```
+
+If you update by hand (e. g. via ``npm install``), make sure you also install a respective version of ngx-build-plus (version 14 for Angular 14, version 13 for Angular 13, etc.)
+
 ## Upgrade from Angular 12 or lower
 
 Beginning with Angular 13, the CLI generates EcmaScript modules instead of script files. This affects how we work with Module Federation a bit.
@@ -50,28 +62,6 @@ Please find information on migrating here:
 
 If you start from the scratch, ``ng add`` will take care of these settings.
 
-## Upgrade from Version 1.x
-
-After updating the libs, you need to adjust the ``webpack.conf.js`` a bit:
-
-
-```diff
-module.exports = {
-  output: {
-    uniqueName: "delme3",
-+    publicPath: "auto"
-  },
-  optimization: {
-    runtimeChunk: false
-  },   
-+  resolve: {
-+    alias: {
-+      ...sharedMappings.getAliases(),
-+    }
-+  },
-  [...]
-}
-```
 
 ## Usage 🛠️
 
@@ -81,13 +71,23 @@ module.exports = {
 2. Adjust the generated ``webpack.config.js`` file
 3. Repeat this for further projects in your workspace (if needed)
 
-## Nx
+### Nx
 
 1. ``npm install @angular-architects/module-federation``
 2. ``ng g @angular-architects/module-federation:init``
 3. Adjust the generated ``webpack.config.js`` file
 4. Repeat this for further projects in your workspace (if needed)
 
+### 🆕🔥 Version 14+: Use the --type switch to get the new streamlined configuration
+
+With version 14, we've introduced a --type switch for ``ng add`` and the ``init`` schematic. Set it to one of the following values to get a more streamlined configuration file:
+
+- ``host``
+- ``dynamic-host``
+- ``remote``
+
+A dynamic host reads the micro frontend's URLs from a configuration file at runtime.
+
 ## Getting Started 🧪
 
 Please find here a [tutorial](https://github.com/angular-architects/module-federation-plugin/blob/12.0.0/libs/mf/tutorial/tutorial.md) that shows how to use this plugin.
@@ -105,11 +105,8 @@ Please have a look at this [article series about Module Federation](https://www.
 This [example](https://github.com/manfredsteyer/module-federation-plugin-example)
  loads a microfrontend into a shell:
 
-![Microfrontend Loaded into Shell](https://github.com/angular-architects/module-federation-plugin/raw/main/packages/mf/tutorial/result.png)
-
 Please have a look into the example's **readme**. It points you to the important aspects of using Module Federation.
 
-
 ## Advanced Features
 
 While the above-mentioned tutorial and blog articles guide you through using Module Federation, this section draws your attention to some advanced aspects of this plugin and Module Federation in general. 
@@ -190,7 +187,30 @@ Let's assume, you have an Angular CLI Monorepo or an Nx Monorepo using path mapp
 
 You can now share such a library across all your micro frontends (apps) in your mono repo. This means, this library will be only loaded once.
 
-To accomplish this, just register this lib name with the ``SharedMappings`` instance in your webpack config:
+#### New streamlined configuration in version 14+
+
+Beginning with version 14, we use a more steamlined configuration, when using the above mentioned --type switch with one of the following options: ``remote``, ``host``, ``dynamic-host``. 
+
+This new configuration automatically shares all local libararies. Hence, you don't need to do a thing.
+
+However, if you want to control, which local libraries to share, you can use the the ``sharedMappings`` array:
+
+```javascript
+module.exports = withModuleFederationPlugin({
+
+  shared: {
+    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
+  },
+
+  sharedMappings: ['shared-lib'],
+});
+```
+
+Please don't forget that sharing in Module Federation is always an opt-in: You need to add this setting to each micro frontend that should share it.
+
+#### Legacy-Syntax and version 12-13
+
+In previous versions, you registered the lib name with the ``SharedMappings`` instance in your webpack config:
 
 ```javascript
 const mf = require("@angular-architects/module-federation/webpack");
@@ -207,7 +227,7 @@ sharedMappings.register(
 
 Beginning with version 1.2, the boilerplate for using ``SharedMappings`` is generated for you. You only need to add your lib's name here.
 
-This generated code includes providing the metadata for these libraries for the ``ModuleFederationPlugin`` and adding a plugin making sure that even source code generated by the Angular Compiler uses the shared version of the library. 
+This generated code includes providing metadata for these libraries for the ``ModuleFederationPlugin`` and adding a plugin making sure that even source code generated by the Angular Compiler uses the shared version of the library. 
 
 ```javascript
 plugins: [
@@ -297,6 +317,28 @@ The options passed to shareAll are applied to all dependencies found in your ``p
 
 This might come in handy in an mono repo scenario and when doing some experiments/ trouble shooting.
 
+#### Eager and Pinned
+
+> Big thanks to [Michael Egger-Zickes](https://twitter.com/MikeZks), who came up with these solutions.
+
+Module Federation allows to directly bundle shared dependencies into your app's bundles. Hence, you don't need to load an additional bundle per shared dependency. This can be interesting to improve an application's startup performance, when there are lots of shared dependencies. 
+
+One possible usage for improving the startup times is to set ``eager`` to ``true`` **just** for the host. The remotes loaded later can reuse these eager dependencies alothough they've been shipped via the host's bundle (e. g. its ``main.js``). This works best, if the host always has the highest compatible versions of the shared dependencies. Also, in this case, you don't need to load the remote entry points upfront.
+
+While the ``eager`` flag is an out of the box feature provided by module federation since its very first days, we need to adjust the webpack configuration used by the Angular CLI a bit to avoid code duplication in the generated bundles. The new ``withModuleFederationPlugin`` helper that has been introduces with this plugin's version 14 and is the basis for the new streamlined configuration, does this by default. The config just needs to set eager to ``true``.
+
+```javascript
+module.exports = withModuleFederationPlugin({
+
+  shared: {
+    ...shareAll({ singleton: true, eager: true, pinned: true, strictVersion: true, requiredVersion: 'auto' }),
+  },
+
+});
+```
+
+As shown in the last example, we also added another property: pinned. This makes sure, the shared dependency in put into the application's (e. g. the host's) bundle, even though it's not used there. This allows to preload dependencies that are needed later but subsequently loaded micro frontends via one bundle.
+
 ### Nx Integration
 
 If the plugin detects that you are using Nx (it basically looks for a ``nx.json``), it uses the builders provided by Nx.
@@ -425,8 +467,6 @@ shared: share({
 })
 ```
 
-
-
 #### Not exported Components
 
 If you use a shared component without exporting it via your library's barrel (``index.ts`` or ``public-api.ts``), you get the following error at runtime:

libs/mf/collection.json

@@ -7,7 +7,11 @@
       "factory": "./src/schematics/mf/schematic#add",
       "schema": "./src/schematics/mf/schema.json",
       "description": "Initialize an angular project for webpack module federation",
-      "aliases": ["init"]
+    },
+    "init": {
+      "factory": "./src/schematics/mf/schematic#add",
+      "schema": "./src/schematics/mf/schema.json",
+      "description": "Initialize an angular project for webpack module federation",
     },
     "config": {
       "factory": "./src/schematics/mf/schematic",

libs/mf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/module-federation",
-  "version": "14.3.0-beta.4",
+  "version": "14.3.0",
   "license": "MIT",
   "repository": {
     "type": "GitHub",
@@ -17,7 +17,7 @@
   "schematics": "./collection.json",
   "builders": "./builders.json",
   "dependencies": {
-    "@angular-architects/module-federation-runtime": "14.3.0-beta.4",
+    "@angular-architects/module-federation-runtime": "14.3.0",
     "word-wrap": "^1.2.3",
     "callsite": "^1.0.0",
     "node-fetch": "^2.6.7",

libs/mf/src/schematics/mf/files/webpack.config.js

@@ -16,5 +16,4 @@ module.exports = withModuleFederationPlugin({
     ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
   },
 
-  sharedMappings: [],
 });

libs/mf/src/schematics/mf/schematic.ts

@@ -301,11 +301,11 @@ export default function config(options: MfSchematicSchema): Rule {
 
     const dep = getPackageJsonDependency(tree, "ngx-build-plus");
 
-    if (!dep || !semver.satisfies(dep.version, '>=14.0.0-beta.0')) {
+    if (!dep || !semver.satisfies(dep.version, '>=14.0.0')) {
       addPackageJsonDependency(tree, { 
         name: 'ngx-build-plus', 
         type: NodeDependencyType.Dev,
-        version: '>=14.0.0-beta.0',
+        version: '^14.0.0',
         overwrite: true 
       });
 

libs/mf/src/schematics/migrate-to-14-3/schematic.ts

@@ -9,7 +9,7 @@ export function index(): Rule {
         addPackageJsonDependency(tree, { 
             name: 'ngx-build-plus', 
             type: NodeDependencyType.Dev,
-            version: '>=14.0.0-beta.0',
+            version: '^14.0.0',
             overwrite: true 
           });