feat(mf): update for angular 20

Author: manfredsteyer

libs/mf-runtime/enhanced/src/lib/init-federation.ts

@@ -46,7 +46,7 @@ export async function initFederation(
   }
 
   const runtimeConfig = toRuntimeConfig(config, options);
-  return init(runtimeConfig);
+  return init(runtimeConfig as any) as any;
 }
 
 export function toRuntimeConfig(

libs/mf-runtime/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@angular-architects/module-federation-runtime",
   "license": "MIT",
-  "version": "19.0.3",
+  "version": "20.0.0",
   "peerDependencies": {
-    "@angular/common": ">=18.0.0",
-    "@angular/core": ">=18.0.0",
+    "@angular/common": ">=20.0.0",
+    "@angular/core": ">=20.0.0",
     "@module-federation/enhanced": "^0.9.0",
     "@module-federation/runtime-core": "^0.6.21"
   },

libs/mf-tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/module-federation-tools",
-  "version": "19.0.3",
+  "version": "20.0.0",
   "license": "MIT",
   "peerDependencies": {},
   "dependencies": {

libs/mf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/module-federation",
-  "version": "19.0.3",
+  "version": "20.0.0",
   "license": "MIT",
   "repository": {
     "type": "GitHub",
@@ -17,7 +17,7 @@
   "schematics": "./collection.json",
   "builders": "./builders.json",
   "dependencies": {
-    "@angular-architects/module-federation-runtime": "19.0.3",
+    "@angular-architects/module-federation-runtime": "20.0.0",
     "word-wrap": "^1.2.3",
     "callsite": "^1.0.0",
     "node-fetch": "^2.6.7",

libs/mf/src/schematics/init-rspack/files/federation.config.ts__tmpl__

@@ -6,7 +6,7 @@ export default withFederation({
     name: '<%=project%>',
 
     exposes: {
-      './Component': './src/app/app.component.ts',
+      './Component': './<%=appComponent%>',
     },
 <% } else if (type === 'host') { %>
     remotes: {<% for (key in remoteMap) { %>

libs/mf/src/schematics/init-rspack/files/rsbuild.config.ts__tmpl__

@@ -1,7 +1,7 @@
 import { createConfig } from '@ng-rsbuild/plugin-angular';
 import applyFederation from './federation.config';
 
-const rsbuildConfig = createConfig(
+export default createConfig(
   {
     browser: './src/main.ts',
   },
@@ -11,5 +11,3 @@ const rsbuildConfig = createConfig(
     },
   }
 );
-
-export default applyFederation(rsbuildConfig);

libs/mf/src/schematics/init-rspack/schematic.ts

@@ -45,11 +45,11 @@ type PackageJson = {
 };
 
 const RSPACK_DEPS = {
-  '@module-federation/enhanced': '0.8.7',
+  '@module-federation/enhanced': '0.14.3',
 };
 
 const RSPACK_DEV_DEPS = {
-  '@ng-rsbuild/plugin-angular': '19.0.0-alpha.14',
+  '@ng-rsbuild/plugin-angular': '^21.0.0',
 };
 
 export function init(options: MfSchematicSchema): Rule {
@@ -68,10 +68,20 @@ export function init(options: MfSchematicSchema): Rule {
 
     const remoteMap = await generateRemoteMap(workspace, projectName);
 
+    const cand1 = path.join(projectSourceRoot, 'app', 'app.component.ts');
+    const cand2 = path.join(projectSourceRoot, 'app', 'app.ts');
+
+    const appComponent = tree.exists(cand1)
+      ? cand1
+      : tree.exists(cand2)
+      ? cand2
+      : 'update-this.ts';
+
     const generateRule = await generateRsBuildConfig(
       remoteMap,
       projectRoot,
       projectSourceRoot,
+      appComponent,
       options
     );
 
@@ -305,6 +315,7 @@ async function generateRsBuildConfig(
   remoteMap: Record<string, string>,
   projectRoot: string,
   projectSourceRoot: string,
+  appComponent: string,
   options: MfSchematicSchema
 ) {
   const tmpl = url('./files');
@@ -316,6 +327,7 @@ async function generateRsBuildConfig(
       remoteMap,
       ...options,
       tmpl: '',
+      appComponent,
     }),
     move(projectRoot),
   ]);

libs/mf/src/schematics/init-webpack/files/webpack.config.js__tmpl__

@@ -5,7 +5,7 @@ module.exports = withModuleFederationPlugin({
   name: '<%=project%>',
 
   exposes: {
-    './Component': './<%=projectSourceRoot%>/app/app.component.ts',
+    './Component': './<%=appComponent%>',
   },
 <% } else if (type === 'host') { %>
   remotes: {<% for (key in remoteMap) { %>

libs/mf/src/schematics/init-webpack/schematic.ts

@@ -168,6 +168,7 @@ async function generateWebpackConfig(
   remoteMap: Record<string, string>,
   projectRoot: string,
   projectSourceRoot: string,
+  appComponent: string,
   options: MfSchematicSchema
 ) {
   const tmpl = url('./files');
@@ -178,6 +179,7 @@ async function generateWebpackConfig(
       projectSourceRoot,
       remoteMap,
       ...options,
+      appComponent,
       tmpl: '',
     }),
     move(projectRoot),
@@ -286,6 +288,15 @@ export default function config(options: MfSchematicSchema): Rule {
 
     const remoteMap = await generateRemoteMap(workspace, projectName);
 
+    const cand1 = path.join(projectSourceRoot, 'app', 'app.component.ts');
+    const cand2 = path.join(projectSourceRoot, 'app', 'app.ts');
+
+    const appComponent = tree.exists(cand1)
+      ? cand1
+      : tree.exists(cand2)
+      ? cand2
+      : 'update-this.ts';
+
     let generateRule = null;
 
     if (options.type === 'legacy') {
@@ -302,6 +313,7 @@ export default function config(options: MfSchematicSchema): Rule {
         remoteMap,
         projectRoot,
         projectSourceRoot,
+        appComponent,
         options
       );
     }
@@ -353,6 +365,14 @@ export default function config(options: MfSchematicSchema): Rule {
       projectConfig.architect.serve.options = {};
     }
 
+    const indexPath = path.join(projectSourceRoot, 'index.html');
+
+    projectConfig.architect.build.options.outputPath =
+      projectConfig.architect.build.options.outputPath ?? `dist/${projectName}`;
+
+    projectConfig.architect.build.options.index =
+      projectConfig.architect.build.options.index ?? indexPath;
+
     projectConfig.architect.build.builder = buildBuilder;
     projectConfig.architect.build.options[webpackProperty] =
       getWebpackConfigValue(options.nxBuilders, configPath);
@@ -403,14 +423,31 @@ export default function config(options: MfSchematicSchema): Rule {
 
     const dep = getPackageJsonDependency(tree, 'ngx-build-plus');
 
-    if (!dep || !semver.satisfies(dep.version, '>=19.0.0')) {
+    let installDeps = false;
+    if (!dep || !semver.satisfies(dep.version, '>=20.0.0')) {
       addPackageJsonDependency(tree, {
         name: 'ngx-build-plus',
         type: NodeDependencyType.Dev,
-        version: '^19.0.0',
+        version: '^20.0.0',
         overwrite: true,
       });
 
+      installDeps = true;
+    }
+
+    if (!getPackageJsonDependency(tree, '@angular-devkit/build-angular')) {
+      addPackageJsonDependency(tree, {
+        name: '@angular-devkit/build-angular',
+        type: NodeDependencyType.Dev,
+        version:
+          getPackageJsonDependency(tree, '@angular/cli')?.version || 'latest',
+        overwrite: false,
+      });
+
+      installDeps = true;
+    }
+
+    if (installDeps) {
       context.addTask(new NodePackageInstallTask());
     }
 

libs/mf/src/schematics/init/schema.json

@@ -49,7 +49,7 @@
           },
           {
             "value": "module-federation-rsbuild-experimental",
-            "label": "Module Federation with rsbuild (experimental nextgen)"
+            "label": "Module Federation with rsbuild (experimental nextgen); no Angular 20 support yet!"
           },
           {
             "value": "native-federation-esbuild",