diff --git a/package.json b/package.json index 6f485198..bcba552f 100644 --- a/package.json +++ b/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", diff --git a/packages/mf/README.md b/packages/mf/README.md index f1567fbd..9444a29a 100644 --- a/packages/mf/README.md +++ b/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 ๐Ÿ“ฐ diff --git a/packages/mf/package.json b/packages/mf/package.json index 03d879a0..d98014b3 100644 --- a/packages/mf/package.json +++ b/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", diff --git a/packages/mf/src/create-config.ts b/packages/mf/src/create-config.ts index 6422579d..bd24f201 100644 --- a/packages/mf/src/create-config.ts +++ b/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 } + } + + }) + ], +}; `; } \ No newline at end of file diff --git a/packages/mf/tutorial/tutorial.md b/packages/mf/tutorial/tutorial.md index 2aee35c2..78f72b92 100644 --- a/packages/mf/tutorial/tutorial.md +++ b/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! diff --git a/workspace.json b/workspace.json index cac385aa..bc985478 100644 --- a/workspace.json +++ b/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",