feat(nf): migrate to angular 20

Author: manfredsteyer

.gitignore

@@ -47,3 +47,5 @@ migrations.json
 .angular
 
 .nx
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

apps/mfe1/project.json

@@ -4,6 +4,7 @@
   "projectType": "application",
   "sourceRoot": "apps/mfe1/src",
   "prefix": "angular-architects",
+  "tags": [],
   "targets": {
     "build": {
       "executor": "@angular-architects/native-federation:build",
@@ -61,7 +62,8 @@
           "buildTarget": "mfe1:build:development"
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
@@ -82,6 +84,5 @@
         "jestConfig": "apps/mfe1/jest.config.ts"
       }
     }
-  },
-  "tags": []
+  }
 }

apps/mfe2/project.json

@@ -4,6 +4,7 @@
   "projectType": "application",
   "sourceRoot": "apps/mfe2/src",
   "prefix": "angular-architects",
+  "tags": [],
   "targets": {
     "build": {
       "executor": "@angular-architects/native-federation:build",
@@ -62,7 +63,8 @@
         }
       },
       "defaultConfiguration": "development",
-      "options": {}
+      "options": {},
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
@@ -83,6 +85,5 @@
         "jestConfig": "apps/mfe2/jest.config.ts"
       }
     }
-  },
-  "tags": []
+  }
 }

apps/playground/project.json

@@ -4,6 +4,7 @@
   "projectType": "application",
   "sourceRoot": "apps/playground/src",
   "prefix": "angular-architects",
+  "tags": [],
   "targets": {
     "demo": {
       "executor": "@angular-architects/native-federation:build",
@@ -68,7 +69,8 @@
           "buildTarget": "playground:build:development"
         }
       },
-      "defaultConfiguration": "development"
+      "defaultConfiguration": "development",
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
@@ -93,6 +95,5 @@
         "jestConfig": "apps/playground/jest.config.ts"
       }
     }
-  },
-  "tags": []
+  }
 }

jest.config.ts

@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
-  projects: getJestProjects(),
-};
+export default async () => ({
+  projects: await getJestProjectsAsync(),
+});

libs/mf/README.md

@@ -56,6 +56,7 @@ We are going to provide at least one major per Angular major to keep track with
 - Angular 17: @angular-architects/module-federation: ^17.0.0
 - Angular 18: @angular-architects/module-federation: ^18.0.0
 - Angular 19: @angular-architects/module-federation: ^19.0.0
+- Angular 20: @angular-architects/module-federation: ^20.0.0
 
 Beginning with Angular 13, we had to add some changes to adjust to the Angular CLI. Please see the next section for this.
 

libs/native-federation-core/src/lib/core/bundle-shared.ts

@@ -48,7 +48,7 @@ export async function bundleShared(
   const packageInfos = [...inferedPackageInfos, ...configuredPackageInfos];
 
   const configState =
-    'BUNDLER_CHUNKS' + // TODO: Replace this with lib version 
+    'BUNDLER_CHUNKS' + // TODO: Replace this with lib version
     fs.readFileSync(path.join(__dirname, '../../../package.json')) +
     JSON.stringify(config);
 
@@ -158,7 +158,9 @@ export async function bundleShared(
 
   // TODO: Decide whether/when to add .map files
   const chunks = bundleResult.filter(
-    (br) => !br.fileName.endsWith('.map') && !result.find((r) => r.outFileName === path.basename(br.fileName))
+    (br) =>
+      !br.fileName.endsWith('.map') &&
+      !result.find((r) => r.outFileName === path.basename(br.fileName))
   );
 
   addChunksToResult(chunks, result, fedOptions.dev);
@@ -234,7 +236,7 @@ function buildResult(
       version: pi.version,
       // TODO: Decide whether/when we need debug infos
       // dev: !fedOptions.dev
-      //   ? undefined 
+      //   ? undefined
       //   : {
       //       entryPoint: normalize(pi.entryPoint),
       //     },

libs/native-federation-node/project.json

@@ -5,10 +5,9 @@
   "projectType": "library",
   "release": {
     "version": {
-      "generatorOptions": {
-        "packageRoot": "dist/{projectRoot}",
-        "currentVersionResolver": "git-tag"
-      }
+      "currentVersionResolver": "git-tag",
+      "preserveLocalDependencyProtocols": false,
+      "manifestRootsToUpdate": ["dist/{projectRoot}"]
     }
   },
   "tags": ["org:softarc", "scope:nf"],

libs/native-federation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/native-federation",
-  "version": "19.0.23",
+  "version": "20.0.0",
   "main": "src/index.js",
   "generators": "./collection.json",
   "builders": "./builders.json",

libs/native-federation/src/builders/build/builder.ts

@@ -16,6 +16,7 @@ import {
 
 import { normalizeOptions } from '@angular-devkit/build-angular/src/builders/dev-server/options';
 
+
 import { setLogLevel, logger } from '@softarc/native-federation/build';
 
 import { FederationOptions } from '@softarc/native-federation/build';
@@ -136,6 +137,10 @@ export async function* runBuilder(
 
   setLogLevel(options.verbose ? 'verbose' : 'info');
 
+  if (!options.outputPath) {
+    options.outputPath = `dist/${context.target.project}`;
+  }
+
   const outputPath = options.outputPath;
   const outputOptions: Required<
     Exclude<ApplicationBuilderOptions['outputPath'], string>
@@ -212,11 +217,11 @@ export async function* runBuilder(
         const lookup = mrmime.lookup;
         const mimeType = lookup(path.extname(fileName)) || 'text/javascript';
         const rawBody = fs.readFileSync(fileName, 'utf-8');
-        
+
         // TODO: Evaluate need for debug infos
         // const body = addDebugInformation(url, rawBody);
         const body = rawBody;
-        
+
         res.writeHead(200, {
           'Content-Type': mimeType,
           'Access-Control-Allow-Origin': '*',
@@ -299,13 +304,13 @@ export async function* runBuilder(
   for await (const output of builderRun) {
     lastResult = output;
 
-    if (!write && output.outputFiles) {
-      memResults.add(output.outputFiles.map((file) => new EsBuildResult(file)));
+    if (!write && output['outputFiles']) {
+      memResults.add(output['outputFiles'].map((file) => new EsBuildResult(file)));
     }
 
-    if (!write && output.assetFiles) {
+    if (!write && output['assetFiles']) {
       memResults.add(
-        output.assetFiles.map((file) => new NgCliAssetResult(file))
+        output['assetFiles'].map((file) => new NgCliAssetResult(file))
       );
     }