[TBD] feat(nf): Use es-module-shims during initFederation and loadRemoteModule to ensure having latest importMap

.eslintrc.json

@@ -6,6 +6,7 @@
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
+        "@typescript-eslint/no-explicit-any": "warn",
         "@nx/enforce-module-boundaries": [
           "error",
           {
@@ -24,7 +25,7 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nx/typescript"],
-      "rules": {}
+      "rules": { "@typescript-eslint/no-explicit-any": "warn" }
     },
     {
       "files": ["*.js", "*.jsx"],

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+permissions:
+  actions: read
+  contents: read
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+      - run: npm ci
+      - uses: nrwl/nx-set-shas@v3
+      # This line is needed for nx affected to work when CI is running on a PR
+      - run: git branch --track main origin/main
+
+      - run: npx nx format:check
+      - run: npx nx affected -t lint,test,build

apps/mfe1/src/app/demo/demo.component.spec.ts

@@ -7,9 +7,7 @@ describe('DemoComponent', () => {
   let fixture: ComponentFixture<DemoComponent>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [DemoComponent],
-    }).compileComponents();
+    await TestBed.configureTestingModule({}).compileComponents();
 
     fixture = TestBed.createComponent(DemoComponent);
     component = fixture.componentInstance;

apps/mfe1/src/app/demo/demo.component.ts

@@ -3,7 +3,7 @@ import {
   PlaygroundLibModule,
 } from '@angular-architects/playground-lib';
 import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   standalone: true,

apps/mfe2/src/main.ts

@@ -2,5 +2,5 @@ import { initFederation } from '@angular-architects/native-federation';
 
 initFederation('/assets/federation.manifest.json')
   .catch((err) => console.error(err))
-  .then((_) => import('./bootstrap'))
+  .then(() => import('./bootstrap'))
   .catch((err) => console.error(err));

apps/playground-e2e/src/integration/app.spec.ts

@@ -8,6 +8,6 @@ describe('playground', () => {
     cy.login('[email protected]', 'myPassword');
 
     // Function helper example, see `../support/app.po.ts` file
-    getGreeting().contains('Welcome to playground!');
+    getGreeting().contains('Hello Native Federation!');
   });
 });

apps/playground/src/app/app.component.spec.ts

@@ -25,7 +25,7 @@ describe('AppComponent', () => {
     fixture.detectChanges();
     const compiled = fixture.nativeElement;
     expect(compiled.querySelector('h1').textContent).toContain(
-      'Welcome to playground!'
+      'Hello Native Federation!'
     );
   });
 });

jest.preset.js

@@ -12,4 +12,8 @@ module.exports = {
    * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
    */
   snapshotFormat: { escapeString: true, printBasicPrototype: true },
+  // because of https://github.com/jestjs/jest/issues/4422
+  globals: {
+    Uint8Array: Uint8Array,
+  },
 };

libs/mf/src/schematics/mf/schematic.ts

@@ -32,7 +32,7 @@ export function add(options: MfSchematicSchema): Rule {
 }
 
 export function adjustSSR(sourceRoot: string, ssrMappings: string): Rule {
-  return async function (tree, context) {
+  return async function (tree) {
     const server = path.join(sourceRoot, 'server.ts');
 
     if (!tree.exists(server)) {
@@ -70,7 +70,7 @@ const ssrEngine = new Engine();
 }
 
 function makeMainAsync(main: string, options: MfSchematicSchema): Rule {
-  return async function (tree, context) {
+  return async function (tree) {
     const mainPath = path.dirname(main);
     const bootstrapName = path.join(mainPath, 'bootstrap.ts');
 
@@ -149,7 +149,10 @@ function nxBuildersAvailable(tree: Tree): boolean {
 function infereNxBuilderNames(tree: Tree): { dev: string; prod: string } {
   const dep = getPackageJsonDependency(tree, '@nx/angular');
 
-  const useDevServer = dep && dep.version && semver.satisfies(semver.minVersion(dep.version), '>=17.2.0');
+  const useDevServer =
+    dep &&
+    dep.version &&
+    semver.satisfies(semver.minVersion(dep.version), '>=17.2.0');
 
   const defaultResult = {
     dev: useDevServer
@@ -264,8 +267,7 @@ export default function config(options: MfSchematicSchema): Rule {
         projectName,
         remotes,
         relTsConfigPath,
-        projectRoot,
-        port
+        projectRoot
       );
       tree.create(configPath, webpackConfig);
     } else {

libs/mf/src/schematics/migrate-to-13/schematic.ts

@@ -1,10 +1,10 @@
 import { Rule } from '@angular-devkit/schematics';
 
 export function index(): Rule {
-  return async function (tree, context) {
+  return async function () {
     console.info(`!!!
-Angular 13 compiles bundles as EcmaScript modules. 
-Hence, we need to adjust how we use Module Federation. 
+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
 !!!

libs/mf/src/schematics/migrate-to-14-3/schema.d.ts

@@ -1 +1 @@
-type BootAsyncSchema = {};
+type BootAsyncSchema = object;

libs/mf/src/utils/create-config.ts

@@ -4,8 +4,7 @@ export function createConfig(
   projectName: string,
   remotes: string,
   tsConfigName: string,
-  root: string,
-  port: number
+  root: string
 ): string {
   return `const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 const mf = require("@angular-architects/module-federation/webpack");
@@ -24,7 +23,7 @@ module.exports = {
   },
   optimization: {
     runtimeChunk: false
-  },   
+  },
   resolve: {
     alias: {
       ...sharedMappings.getAliases(),
@@ -42,22 +41,22 @@ module.exports = {
         // filename: "remoteEntry.js",
         // exposes: {
         //     './Component': './${root}/src/app/app.component.ts',
-        // },        
-        
+        // },
+
         // For hosts (please adjust)
         // remotes: {
 ${remotes}
         // },
 
         shared: share({
-          "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
-          "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
-          "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
+          "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
+          "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
+          "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
           "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
 
           ...sharedMappings.getDescriptors()
         })
-        
+
     }),
     sharedMappings.getPlugin()
   ],

libs/mf/src/utils/share-utils.ts

@@ -296,7 +296,10 @@ export function share(
   return result;
 }
 
-function addSecondaries(secondaries: Record<string, SharedConfig>, result: {}) {
+function addSecondaries(
+  secondaries: Record<string, SharedConfig>,
+  result: object
+) {
   for (const key in secondaries) {
     result[key] = secondaries[key];
   }

libs/native-federation-core/src/lib/config/share-utils.ts

@@ -65,14 +65,15 @@ function findPackageJson(folder: string): string {
   );
 }
 
-function readVersionMap(packagePath: string): VersionMap {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const json = require(packagePath);
-  const versions = {
-    ...json['dependencies'],
-  };
-  return versions;
-}
+// TODO: Unused, to delete?
+// function readVersionMap(packagePath: string): VersionMap {
+//   // eslint-disable-next-line @typescript-eslint/no-var-requires
+//   const json = require(packagePath);
+//   const versions = {
+//     ...json['dependencies'],
+//   };
+//   return versions;
+// }
 
 function lookupVersion(key: string, workspaceRoot: string): string {
   const versionMaps = getVersionMaps(workspaceRoot, workspaceRoot);

libs/native-federation-core/src/lib/config/with-native-federation.ts

@@ -1,5 +1,5 @@
 import { getMappedPaths, MappedPath } from '../utils/mapped-paths';
-import { shareAll, share, findRootTsConfigJson } from './share-utils';
+import { shareAll, findRootTsConfigJson } from './share-utils';
 import {
   FederationConfig,
   NormalizedFederationConfig,

libs/native-federation-core/src/lib/core/build-for-federation.ts

@@ -53,7 +53,7 @@ export async function buildForFederation(
   };
 
   writeFederationInfo(federationInfo, fedOptions);
-  writeImportMap(sharedInfo, fedOptions);
+  writeImportMap(federationInfo, fedOptions);
 
   return federationInfo;
 }

libs/native-federation-core/src/lib/core/write-import-map.ts

@@ -1,20 +1,27 @@
 import * as path from 'path';
 import * as fs from 'fs';
-import { SharedInfo } from '@softarc/native-federation-runtime';
+import { FederationInfo } from '@softarc/native-federation-runtime';
 import { FederationOptions } from './federation-options';
 
 export function writeImportMap(
-  sharedInfo: SharedInfo[],
+  { name, shared, exposes }: FederationInfo,
   fedOption: FederationOptions
 ) {
-  const imports = sharedInfo.reduce((acc, cur) => {
+  const sharedImports = shared.reduce((acc, cur) => {
     return {
       ...acc,
-      [cur.packageName]: cur.outFileName,
+      [cur.packageName]: `./${cur.outFileName}`,
     };
   }, {});
 
-  const importMap = { imports };
+  const exposesImports = exposes.reduce((acc, cur) => {
+    return {
+      ...acc,
+      [`${name}/${cur.key}`]: `./${cur.outFileName}`,
+    };
+  }, {});
+
+  const importMap = { imports: { ...sharedImports, ...exposesImports } };
   const importMapPath = path.join(
     fedOption.workspaceRoot,
     fedOption.outputPath,

libs/native-federation-esbuild/src/lib/adapter.ts

@@ -7,7 +7,6 @@ import * as esbuild from 'esbuild';
 import { rollup } from 'rollup';
 import resolve from '@rollup/plugin-node-resolve';
 import { externals } from 'rollup-plugin-node-externals';
-import { collectExports } from './collect-exports';
 import * as fs from 'fs';
 import path from 'path';
 
@@ -104,31 +103,32 @@ function writeResult(
   for (const outFile of outputFiles) {
     const fileName = path.basename(outFile.path);
     const filePath = path.join(outdir, fileName);
-    fs.writeFileSync(filePath, outFile.text);
+    fs.writeFileSync(filePath, outFile.contents);
     writtenFiles.push(filePath);
   }
 
   return writtenFiles;
 }
 
-function compensateExports(entryPoint: string, outfile?: string): void {
-  const inExports = collectExports(entryPoint);
-  const outExports = outfile ? collectExports(outfile) : inExports;
-
-  if (!outExports.hasDefaultExport || outExports.hasFurtherExports) {
-    return;
-  }
-  const defaultName = outExports.defaultExportName;
-
-  let exports = '/*Try to compensate missing exports*/\n\n';
-  for (const exp of inExports.exports) {
-    exports += `let ${exp}$softarc = ${defaultName}.${exp};\n`;
-    exports += `export { ${exp}$softarc as ${exp} };\n`;
-  }
-
-  const target = outfile ?? entryPoint;
-  fs.appendFileSync(target, exports, 'utf-8');
-}
+// TODO: Unused, to delete?
+// function compensateExports(entryPoint: string, outfile?: string): void {
+//   const inExports = collectExports(entryPoint);
+//   const outExports = outfile ? collectExports(outfile) : inExports;
+//
+//   if (!outExports.hasDefaultExport || outExports.hasFurtherExports) {
+//     return;
+//   }
+//   const defaultName = outExports.defaultExportName;
+//
+//   let exports = '/*Try to compensate missing exports*/\n\n';
+//   for (const exp of inExports.exports) {
+//     exports += `let ${exp}$softarc = ${defaultName}.${exp};\n`;
+//     exports += `export { ${exp}$softarc as ${exp} };\n`;
+//   }
+//
+//   const target = outfile ?? entryPoint;
+//   fs.appendFileSync(target, exports, 'utf-8');
+// }
 
 async function prepareNodePackage(
   entryPoint: string,