From 6d7592191e4d1eb765eff00f60f93946c71080cf Mon Sep 17 00:00:00 2001 From: Manfred Steyer Date: Fri, 17 Dec 2021 21:22:25 +0100 Subject: [PATCH] chor: making 14.0.0 release ready --- libs/mf-runtime/package.json | 2 +- libs/mf-tools/README.md | 23 +++++++++++++++++++++++ libs/mf-tools/package.json | 4 ++-- libs/mf/README.md | 20 ++++++++++---------- libs/mf/package.json | 4 ++-- migration-guide.md | 4 ++++ tsconfig.base.json | 2 +- 7 files changed, 43 insertions(+), 16 deletions(-) diff --git a/libs/mf-runtime/package.json b/libs/mf-runtime/package.json index 51f6b894..004a1c6e 100644 --- a/libs/mf-runtime/package.json +++ b/libs/mf-runtime/package.json @@ -1,7 +1,7 @@ { "name": "@angular-architects/module-federation-runtime", "license": "MIT", - "version": "14.0.0-beta.1.12", + "version": "14.0.1", "peerDependencies": { "@angular/common": ">=12.0.0", "@angular/core": ">=12.0.0" diff --git a/libs/mf-tools/README.md b/libs/mf-tools/README.md index 3cc8c2eb..3dbdbbb5 100644 --- a/libs/mf-tools/README.md +++ b/libs/mf-tools/README.md @@ -14,6 +14,8 @@ 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. + + ## Examples - [Live Example](https://red-ocean-0fe4c4610.azurestaticapps.net) @@ -110,6 +112,27 @@ export const APP_ROUTES: Routes = [ } ``` +### Important: Angular 13+ + +Beginning with Angular 13, the CLI is emitting EcmaScript modules. Hence, we need to adjust the usage of the WebComponentWrapper when loading a remote that has been created with the CLI 13 or higher. For this, set ``type`` to ``remote`` and skip the ``remoteName`` property (for Modules, we don't need a remoteName): + +```typescript +export const APP_ROUTES: Routes = [ + [...] + { + path: 'angular1', + component: WebComponentWrapper, + data: { + type: 'module', + remoteEntry: 'https://your-path/remoteEntry.js', + exposedModule: './web-components', + elementName: 'angular1-element' + } as WebComponentWrapperOptions + }, + [...] +} +``` + ## Sub-Routes If a web component has it's own router, you can use our UrlMatchers ``startsWith`` and ``endsWith`` to define, which part of the URL is intended for the shell and for the micro frontend: diff --git a/libs/mf-tools/package.json b/libs/mf-tools/package.json index 74268f37..1ed4112a 100644 --- a/libs/mf-tools/package.json +++ b/libs/mf-tools/package.json @@ -1,12 +1,12 @@ { "name": "@angular-architects/module-federation-tools", - "version": "14.0.0-rc.1", + "version": "14.0.1", "license": "MIT", "peerDependencies": { "@angular/common": ">=11.0.0", "@angular/core": ">=11.0.0", "@angular/router": ">=11.0.0", - "@angular-architects/module-federation": "^14.0.0-rc.1", + "@angular-architects/module-federation": "^14.0.1", "@angular/platform-browser": ">=11.0.0", "rxjs": ">= 6.0.0" }, diff --git a/libs/mf/README.md b/libs/mf/README.md index 74fa2aaa..55f7ba81 100644 --- a/libs/mf/README.md +++ b/libs/mf/README.md @@ -33,13 +33,14 @@ Since Version 1.2, we also provide some advanced features like: ✅ Sharing Libs of a Monorepo -## What's new in Version 12.0.0-beta.x? +## Which Version to use? -✅ Works with CLI 12.0.0-rc.1 that brings webpack 5 out of the box +- Angular 12: @angular-architects/module-federation: ^12.0.0 +- Angular 13: @angular-architects/module-federation: ^14.0.0 -✅ Issues with sharing libs in monorepos are resolved (always worked with multiple repos) +Beginning with Angular 13, we had to add some changes to adjust to the Angular CLI. Please see the next section for this. -## Upgrade from Angular 12 +## 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. @@ -127,8 +128,8 @@ const routes: Routes = [ path: 'flights', loadChildren: () => loadRemoteModule({ + type: 'module', remoteEntry: 'http://localhost:3000/remoteEntry.js', - remoteName: 'mfe1', exposedModule: './Module' }) .then(m => m.FlightsModule) @@ -146,7 +147,7 @@ For this, you could call ``loadRemoteEntry`` BEFORE bootstrapping Angular: import { loadRemoteEntry } from '@angular-architects/module-federation'; Promise.all([ - loadRemoteEntry('http://localhost:3000/remoteEntry.js', 'mfe1') + loadRemoteEntry({type: 'module', remoteEntry: 'http://localhost:3000/remoteEntry.js'}) ]) .catch(err => console.error('Error loading remote entries', err)) .then(() => import('./bootstrap')) @@ -155,7 +156,7 @@ Promise.all([ The ``bootstrap.ts`` file contains the source code normally found in ``main.ts`` and hence, it calls ``platform.bootstrapModule(AppModule)``. You really need this combination of an upfront file calling loadRemoteEntry and a dynamic import loading another file bootstrapping Angular because Angular itself is already a shared library respected during the version negotiation. -Then, when loading the remote Module, just skip the ``remoteEntry`` property: +Then, when loading the remote Module, you set to mention the ``remoteEntry`` property anyway, as it also acts as an internal identifier for the remote: ```typescript import { loadRemoteModule } from '@angular-architects/module-federation'; @@ -167,9 +168,8 @@ const routes: Routes = [ path: 'flights', loadChildren: () => loadRemoteModule({ - // Skipped - already loaded upfront: - // remoteEntry: 'http://localhost:3000/remoteEntry.js', - remoteName: 'mfe1', + type: 'module', + remoteEntry: 'http://localhost:3000/remoteEntry.js', exposedModule: './Module' }) .then(m => m.FlightsModule) diff --git a/libs/mf/package.json b/libs/mf/package.json index 69538b8a..5d80c270 100644 --- a/libs/mf/package.json +++ b/libs/mf/package.json @@ -1,6 +1,6 @@ { "name": "@angular-architects/module-federation", - "version": "14.0.0-rc.1", + "version": "14.0.1", "license": "MIT", "repository": { "type": "GitHub", @@ -17,7 +17,7 @@ "schematics": "./collection.json", "builders": "./builders.json", "dependencies": { - "@angular-architects/module-federation-runtime": "14.0.0-rc.1", + "@angular-architects/module-federation-runtime": "14.0.1", "word-wrap": "^1.2.3", "callsite": "^1.0.0", "node-fetch": "^2.6.1", diff --git a/migration-guide.md b/migration-guide.md index 7e67e7e3..bc447bc5 100644 --- a/migration-guide.md +++ b/migration-guide.md @@ -128,6 +128,10 @@ To prevent issues with live reloads, you need to add a ``publicHost`` property t [...] ``` +### Deployment: Enable CORS + +As remotes are now loaded as EcmaScript modules, the same origin policy is in place. Hence, if your micro frontends and the shell are deployed to different origins, you need to enable CORS. The same holds true if you run your application after building it with a command line web server like ``serve`` (``serve``, e. g., has a ``--cors`` options). + ### Advanced: Dynamic Federation with Script-based Remotes If you also want to load (existing) script-based remotes into your shell, e. g. remotes built with Angular 12 used for a [Multi-Version/Multi-Framework setup](https://www.npmjs.com/package/@angular-architects/module-federation-tools), you can pass ``type: 'script'`` to both, ``loadRemoteModule`` and ``loadRemoteEntry``. In this case, you also need to pass a ``remoteName``. diff --git a/tsconfig.base.json b/tsconfig.base.json index edc3c1fa..3a567c52 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -15,7 +15,7 @@ "skipDefaultLibCheck": true, "baseUrl": ".", "paths": { - "@angular-architects/mf": ["libs/mf/src/index.ts"], + "@angular-architects/module-federation": ["libs/mf/src/index.ts"], "@angular-architects/module-federation-runtime": [ "libs/mf-runtime/src/index.ts" ],