feat: rc for v14

manfredsteyer · manfredsteyer · commit 8baf3526b1e1 · 2021-12-13T21:56:21.000+01:00
diff --git a/angular.json b/angular.json
@@ -90,6 +90,11 @@
                 "glob": "collection.json",
                 "output": "."
               },
+              {
+                "input": ".",
+                "glob": "migrations.json",
+                "output": "."
+              },              
               {
                 "input": "./libs/mf",
                 "glob": "builders.json",
diff --git 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",
+  "version": "14.0.0-beta.1.12",
   "peerDependencies": {
     "@angular/common": ">=12.0.0",
     "@angular/core": ">=12.0.0"
diff --git 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-beta.1",
+  "version": "14.0.0-rc.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-beta.0",
+    "@angular-architects/module-federation": "^14.0.0-rc.1",
     "@angular/platform-browser": ">=11.0.0",
     "rxjs": ">= 6.0.0"
   },
diff --git a/libs/mf/README.md b/libs/mf/README.md
@@ -39,6 +39,16 @@ Since Version 1.2, we also provide some advanced features like:
 
 ✅ Issues with sharing libs in monorepos are resolved (always worked with multiple repos)
 
+## Upgrade from Angular 12
+
+Beginning with Angular 13, the CLI generates EcmaScript modules instead of script files. This affects how we work with Module Federation a bit.
+
+Please find information on migrating here:
+
+[Migration Guide for Angular 13+](https://github.com/angular-architects/module-federation-plugin/blob/main/migration-guide.md)
+
+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:
@@ -64,10 +74,19 @@ module.exports = {
 
 ## Usage 🛠️
 
-1. ``ng add @angular-architects/module-federation@next``
+### Angular CLI
+
+1. ``ng add @angular-architects/module-federation``
 2. Adjust the generated ``webpack.config.js`` file
 3. Repeat this for further projects in your workspace (if needed)
 
+## 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)
+
 ## 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.
diff --git a/libs/mf/package.json b/libs/mf/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/module-federation",
-  "version": "14.0.0-beta.1",
+  "version": "14.0.0-rc.1",
   "license": "MIT",
   "repository": {
     "type": "GitHub",
@@ -17,10 +17,20 @@
   "schematics": "./collection.json",
   "builders": "./builders.json",
   "dependencies": {
-    "@angular-architects/module-federation-runtime": "14.0.0-beta.1",
+    "@angular-architects/module-federation-runtime": "14.0.0-rc.1",
     "word-wrap": "^1.2.3",
     "callsite": "^1.0.0",
     "node-fetch": "^2.6.1",
-    "semver": "^7.3.5"
+    "semver": "^7.3.5",
+    "ngx-build-plus":"^13.0.0"
+  },
+  "peerDependencies": {
+  },
+  "ng-update": {
+    "migrations": "./migrations.json",
+    "package-group": [
+      "@angular-architects/module-federation-tools",
+      "ngx-build-plus"
+    ]
   }
 }
diff --git a/libs/mf/src/schematics/mf/schematic.ts b/libs/mf/src/schematics/mf/schematic.ts
@@ -6,7 +6,7 @@ import {
 
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
 import { strings } from '@angular-devkit/core';
-
+import * as json5 from 'json5';
 import * as semver from 'semver' 
 
 // import { spawn } from 'cross-spawn';
@@ -17,6 +17,7 @@ import { prodConfig } from './prod-config';
 import { MfSchematicSchema } from './schema';
 
 import { addPackageJsonDependency, NodeDependencyType } from '@schematics/angular/utility/dependencies';
+import { hostname } from 'os';
 
 // export async function npmInstall(packageName: string) {
 //   await new Promise<boolean>((resolve) => {
@@ -248,6 +249,7 @@ export default function config (options: MfSchematicSchema): Rule {
     
     projectConfig.architect.serve.builder = serveBuilder;
     projectConfig.architect.serve.options.port = port;
+    projectConfig.architect.serve.options.publicHost = `http://localhost:${port}`;
 
     // Only needed for ngx-build-plus
     if (!options.nxBuilders) {
@@ -269,20 +271,25 @@ export default function config (options: MfSchematicSchema): Rule {
       projectConfig.architect['extract-i18n'].options.extraWebpackConfig = configPath;
     }
 
+
+    updateTsConfig(tree, tsConfigName);
+
+
+    
     const ssrMappings = generateSsrMappings(workspace, projectName);
 
     tree.overwrite(workspaceFileName, JSON.stringify(workspace, null, '\t'));
 
     updatePackageJson(tree);
 
-    addPackageJsonDependency(tree, { 
-      name: 'ngx-build-plus', 
-      type: NodeDependencyType.Dev,
-      version: '^13.0.1',
-      overwrite: true 
-    });
+    // addPackageJsonDependency(tree, { 
+    //   name: 'ngx-build-plus', 
+    //   type: NodeDependencyType.Dev,
+    //   version: '^13.0.1',
+    //   overwrite: true 
+    // });
 
-    context.addTask(new NodePackageInstallTask());
+    // context.addTask(new NodePackageInstallTask());
 
     return chain([
       makeMainAsync(main),
@@ -293,6 +300,23 @@ export default function config (options: MfSchematicSchema): Rule {
   }
 }
 
+function updateTsConfig(tree, tsConfigName: string) {
+  const tsConfig = json5.parse(tree.read(tsConfigName).toString('utf-8'));
+  const target = tsConfig.compilerOptions.target as string;
+  let targetVersion = 0;
+
+  if (target
+    && target.toLocaleLowerCase().startsWith("es")
+    && target.length > 2) {
+    targetVersion = parseInt(target.substring(2));
+  }
+
+  if (targetVersion < 2020) {
+    tsConfig.compilerOptions.target = 'es2020';
+  }
+
+  tree.overwrite(tsConfigName, JSON.stringify(tsConfig, null, 2));
+}
 
 function generateRemoteConfig(workspace: any, projectName: string) {
   let remotes = '';
diff --git a/libs/mf/src/schematics/migrate-to-13/schema.d.ts b/libs/mf/src/schematics/migrate-to-13/schema.d.ts
@@ -0,0 +1,4 @@
+export interface BootAsyncSchema {
+  project: string;
+  async: boolean;
+}
diff --git a/libs/mf/src/schematics/migrate-to-13/schema.json b/libs/mf/src/schematics/migrate-to-13/schema.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "mf",
+  "title": "",
+  "type": "object",
+  "properties": {  
+  } 
+}
diff --git a/libs/mf/src/schematics/migrate-to-13/schematic.ts b/libs/mf/src/schematics/migrate-to-13/schematic.ts
@@ -0,0 +1,15 @@
+import { Rule } from '@angular-devkit/schematics';
+
+export function index(): Rule {
+
+    return async function (tree, context) {
+
+        console.info(`!!!
+Angular 13 compiles bundles as EcmaScript modules. 
+Hence, we need to adjust how we use Module Federation. 
+We've got you covered. Please find all information here:
+https://github.com/angular-architects/module-federation-plugin/blob/main/migration-guide.md
+!!!
+`);
+    }
+}
diff --git a/migration-guide.md b/migration-guide.md
@@ -1,6 +1,6 @@
 # Migration Guide for Angular 13
 
-Beginning with version 13, the Angular CLI compiles bundles as EcmaScript modules. This also effects how entry points for Module Federation are generated. This guide shows how you can adjust to this.
+Beginning with version 13, the Angular CLI compiles emits EcmaScript modules. This also effects how entry points for Module Federation are generated. This guide shows how you can adjust to this.
 
 ## Big Thanks
 
@@ -10,41 +10,35 @@ Big thanks to all the people, that helped with this migration:
 - [Colum Ferry](https://twitter.com/ferrycolum), Senior Software Engineer 
 at NRWL
 - [Thomas Sandeep](https://github.com/SandeepThomas)
+- [Michael Zikes](https://twitter.com/MikeZks)
 
+## Upgrade to the Newest Version of @angular-architects/module-federation
 
-## Force the CLI into the Newest Version of Webpack
+```
+yarn add @angular-architects/module-federation@14.0.0-rc.1
+```
 
-As long as the CLI doesn't support webpack 5.64.4 or higher, we need to force it into this version. It seems like that this is necessary for CLI 13.0.x, while 13.1.x and above will ship with a fitting webpack version. In the latter case, you can skip this section. Otherwise, add this section to your ``package.json``:
+## Upgrade to Angular and Angular CLI 13.1 (!) or higher
 
-```diff
-+ "resolutions": {
-+     "webpack": "5.64.4"
-+ },
-```
+As we need a newer webpack version, don't go with Angular 13.0 but with 13.1 or higher.
 
-Then, nuke your ``node_modules`` folder and install the dependencies with ``yarn`` (!). Please note, that yarn is needed for respecting the ``resolutions`` section. Once, the CLI ships with a fitting webpack version you can git rid of this section and use other package manager.
+## Update your Compilation Target 
 
-If you haven't created your project with yarn, also add the following section to your ``angular.json``:
+In your ``tsconfig.json`` or ``tsconfig.base.json``, make sure, your compilation ``target`` is ``es2020`` or higher:
 
-```diff
+
+```json
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-+  "cli": {
-+    "packageManager": "yarn"
-+  },
+  "compileOnSave": false,
+  "compilerOptions": {
+    [...]
+    "target": "es2020",
+    [...]
+  },
   [...]
 }
 ```
 
-This makes sure that calls to commands like ``ng add`` use yarn too.
-
-## Upgrade to the Newest Version of @angular-architects/module-federation
-
-```
-yarn add @angular-architects/module-federation@beta.0
-```
-
 ## Adjust your webpack Configs
 
 Add the following setting to all your webpack configs:
@@ -134,9 +128,25 @@ To prevent issues with live reloads, you need to add a ``publicHost`` property t
 [...]
 ```
 
-### Advanced: Loading Script-based Remotes
+### 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``.
 
-If you also want to load script-based remotes into your shell, e. g. remotes build 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``.
+### Advanced: Static Federation with Script-based Remotes
+
+If you want to load (existing) script-based remote into your shell, e. g. such built with Angular 12, you can use the following syntax in the shell's ``webpack.config.js``.
+
+In the following example, ``mfe1`` is loaded as a module while ``mfe2`` is loaded as a script:
+
+```javascript
+remotes: {
+  // Load as module:
+  mfe1": "mfe2@http://localhost:3000/remoteEntry.js",
+  
+  // Load as script:
+  mfe2": "script mfe2@http://localhost:3000/remoteEntry.js",
+}
+```
 
 ### Advanced: Opting-out of Using EcmaScript Modules
 
diff --git a/migrations.json b/migrations.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@angular-architects/module-federation-runtime",`
`3`	`3`	`"license": "MIT",`
`4`		`- "version": "14.0.0-beta.1",`
	`4`	`+ "version": "14.0.0-beta.1.12",`
`5`	`5`	`"peerDependencies": {`
`6`	`6`	`"@angular/common": ">=12.0.0",`
`7`	`7`	`"@angular/core": ">=12.0.0"`