update for [email protected]

Author: manfredsteyer

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "nx": "nx",
     "start": "nx serve",
-    "build": "nx build",
+    "build": "nx build mf --prod",
     "test": "nx test",
     "lint": "nx workspace-lint && nx lint",
     "e2e": "nx e2e",

packages/mf/README.md

@@ -33,7 +33,7 @@ The module federation config is a **partial** webpack configuration. It only con
 2. Adjust the generated ``webpack.config.js`` file
 3. Repeat this for further projects in your workspace (if needed)
 
-## Notes for CLI 11 BETA (next.XY) 🧐
+## Opting in into webpack 5 with CLI 11 🧐
 
 - You need to use **yarn** b/c it allows to override dependencies
     - Existing Projects: ``ng config -g cli.packageManager yarn``
@@ -43,31 +43,31 @@ The module federation config is a **partial** webpack configuration. It only con
 
     ```json
     "resolutions": {
-        "webpack": "5.0.0"
+        "webpack": "^5.0.0"
     },
     ```
 
 - Run **yarn** to install all packages
 
-Please note that the current CLI **beta** lacks some features when using it with webpack 5, e. g. **reloading an application in debug mode** (when using ng serve). Hence, you have to restart ng serve after a change. This is just a temporal limitation and will be solved with one of the upcoming versions.
+Please that the CLI's webpack 5 support is current experimental. 
 
 ## Example 📽️
 
 This [example](https://github.com/manfredsteyer/module-federation-plugin-example)
  loads a microfrontend into a shell:
 
-![Microfrontend Loaded into Shell](./tutorial/result.png)
+![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.
 
 
 ## Tutorial 🧪
 
-Please find here a [tutorial](./tutorial/tutorial.md) that shows step by step how to introduce Module Federation into the above mentioned example.
+Please find here a [tutorial](https://github.com/angular-architects/module-federation-plugin/blob/main/packages/mf/tutorial/tutorial.md) that shows step by step how to introduce Module Federation into the above mentioned example.
 
-![Microfrontend Loaded into Shell](./tutorial/result.png)
+![Microfrontend Loaded into Shell](https://github.com/angular-architects/module-federation-plugin/raw/main/packages/mf/tutorial/result.png)
 
-[>> Start Tutorial](./tutorial/tutorial.md)
+[>> Start Tutorial](https://github.com/angular-architects/module-federation-plugin/blob/main/packages/mf/tutorial/tutorial.md)
 
 
 ## More Details on Module Federation 📰

packages/mf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/module-federation",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "license": "MIT",
   "repository": {
     "type": "GitHub",

packages/mf/src/create-config.ts

@@ -2,39 +2,38 @@ export function createConfig(projectName: string, root: string, port: number): s
 
     return `const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 
-    module.exports = {
-      output: {
-        publicPath: "http://localhost:${port}/",
-        uniqueName: "${projectName}"
-      },
-      optimization: {
-        // Only needed to bypass a temporary bug
-        runtimeChunk: false
-      },
-      plugins: [
-        new ModuleFederationPlugin({
-          
-            // For remotes (please adjust)
-            /*
-            name: "${projectName}",
-            library: { type: "var", name: "${projectName}" },
-            filename: "remoteEntry.js",
-            exposes: {
-                './Component': './${root}/src/app/app.component.ts',
-            },        
-            */
-           
-            // For hosts (please adjust)
-            /*
-            remotes: {
-                'mfe1': "mfe1@http://localhost:3000/remoteEntry.js" 
-            },
-            */
+module.exports = {
+  output: {
+    uniqueName: "${projectName}"
+  },
+  optimization: {
+    // Only needed to bypass a temporary bug
+    runtimeChunk: false
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      
+        // For remotes (please adjust)
+        // name: "${projectName}",
+        // filename: "remoteEntry.js",
+        // exposes: {
+        //     './Component': './${root}/src/app/app.component.ts',
+        // },        
+        
+        // For hosts (please adjust)
+        // remotes: {
+        //     'mfe1': "mfe1@http://localhost:3000/remoteEntry.js" 
+        // },
 
-            shared: ["@angular/core", "@angular/common", "@angular/router"]
-        })
-      ],
-    };
+        shared: {
+          "@angular/core": { singleton: true, strictVersion: true }, 
+          "@angular/common": { singleton: true, strictVersion: true }, 
+          "@angular/router": { singleton: true, strictVersion: true }
+        }
+        
+    })
+  ],
+};
 `;
 
 }

packages/mf/tutorial/tutorial.md

@@ -2,7 +2,7 @@
 
 This tutorial shows how to use Webpack Module Federation together with the Angular CLI and the ``@angular-architects/module-federation`` plugin. The goal is to make a shell capable of **loading a separately compiled and deployed microfrontend**:
 
-![Microfrontend Loaded into Shell](./result.png)
+![Microfrontend Loaded into Shell](https://github.com/angular-architects/module-federation-plugin/raw/main/packages/mf/tutorial/result.png)
 
 
 ## Part 1: Clone and Inspect the Starterkit
@@ -68,7 +68,6 @@ Now, let's activate and configure module federation:
 
     module.exports = {
         output: {
-            publicPath: "http://localhost:3000/",
             uniqueName: "mfe1"
         },
         optimization: {
@@ -80,14 +79,16 @@ Now, let's activate and configure module federation:
 
                 // For remotes (please adjust)
                 name: "mfe1",
-                library: { type: "var", name: "mfe1" },
                 filename: "remoteEntry.js",
                 
                 exposes: {
                     './Module': './projects/mfe1/src/app/flights/flights.module.ts',
                 },        
-
-                shared: ["@angular/core", "@angular/common", "@angular/router"]
+                shared: {
+                    "@angular/core": { singleton: true, strictVersion: true }, 
+                    "@angular/common": { singleton: true, strictVersion: true }, 
+                    "@angular/router": { singleton: true, strictVersion: true }
+                }
             })
         ],
     };
@@ -102,7 +103,6 @@ Now, let's activate and configure module federation:
 
     module.exports = {
         output: {
-            publicPath: "http://localhost:5000/",
             uniqueName: "shell"
         },
         optimization: {
@@ -114,7 +114,11 @@ Now, let's activate and configure module federation:
                 remotes: {
                     'mfe1': "mfe1@http://localhost:3000/remoteEntry.js" 
                 },
-                shared: ["@angular/core", "@angular/common", "@angular/router"]
+                shared: {
+                    "@angular/core": { singleton: true, strictVersion: true }, 
+                    "@angular/common": { singleton: true, strictVersion: true }, 
+                    "@angular/router": { singleton: true, strictVersion: true }
+                }
             })
         ],
     };
@@ -154,11 +158,11 @@ Now, let's try it out!
 
 2. After a browser window with the shell opened (``http://localhost:5000``), click on ``Flights``. This should load the microfrontend into the shell:
 
-    ![Shell](shell.png)
+    ![Shell](https://github.com/angular-architects/module-federation-plugin/raw/main/packages/mf/tutorial/shell.png)
 
 3. Also, ensure yourself that the microfrontend also runs in standalone mode at http://localhost:3000:
 
-    ![Microfrontend](mfe1.png)
+    ![Microfrontend](https://github.com/angular-architects/module-federation-plugin/raw/main/packages/mf/tutorial/mfe1.png)
    
 
 Congratulations! You've implemented your first Module Federation project with Angular!

workspace.json

@@ -28,6 +28,11 @@
             "packageJson": "packages/mf/package.json",
             "main": "packages/mf/src/index.ts",
             "assets": [
+              {
+                "input": "./packages/mf/tutorial",
+                "glob": "**/*",
+                "output": "tutorial"
+              },
               "packages/mf/*.md",
               {
                 "input": "./packages/mf/src",