Native Federation Windows Path Compatibility

[bdps34]

Title: createTsConfigForFederation() fails on Windows due to path separator mismatch

Description

The createTsConfigForFederation() function in @angular-architects/native-federation uses forward slashes (/) in path filtering logic, which fails on Windows systems that use backslashes (\). This causes node_modules entry points to bleed into tsconfig.federation.json, leading to Angular compiler errors.

Impact

• Build failures on Windows development machines
• CI/CD failures on Windows runners
• Cannot use native federation in multi-platform teams without workarounds

Steps to Reproduce

1. Environment Setup:

   • Windows OS (Windows 10/11)
   • Angular 21+ with @angular-architects/native-federation ^21.2.5
   • Nx monorepo with multiple MFE applications

2. Steps:

   npm install
   npm run build portal
   # or
   npx nx serve portal

3. Expected Behavior:

   • Build completes successfully
   • tsconfig.federation.json generated with correct paths
   • No compiler errors

4. Actual Behavior:

   • Build fails with Angular compiler error NG2007
   • tsconfig.federation.json contains node_modules paths
   • Pre-compiled fesm2022 files incorrectly processed

---

Error Output

NG2007: Component class not found in compiled metadata

ERRR  Build failed with 117 errors:
node_modules/@angular/cdk/fesm2022/a11y.mjs:60:6: ERROR: [plugin: angular-compiler] NG2007: Class is using Angular features but is not decorated. Please add an explicit Angular decorator.
(...)

Root Cause Trace

@angular-architects/native-federation/src/utils/angular-esbuild-adapter.js:233

// CURRENT (BROKEN ON WINDOWS):
.filter((ep) => !ep.fileName.includes('/node_modules/') && !ep.fileName.startsWith('.'))

// WINDOWS PATHS LOOK LIKE:
// C:\project\node_modules\@angular\core\fesm2022\core.mjs  ← contains \ instead of /
// The filter checks for '/node_modules/' (with /) but Windows path has \node_modules\
// Result: filter doesn't match → node_modules entries aren't filtered out
// Consequence: node_modules paths end up in tsconfig.federation.json

---

Detailed Technical Analysis

Problem Location

File: node_modules/@angular-architects/native-federation/src/utils/angular-esbuild-adapter.js
Function: createTsConfigForFederation()
Line: ~233

Current Code

const federationEntryPoints = allEntryPoints
  .filter((ep) => !ep.fileName.includes('/node_modules/') && !ep.fileName.startsWith('.'))
  .map(ep => ({...}));

Why It Fails on Windows

1. Path Format Difference:

   • Unix/Linux/macOS: C:/project/node_modules/package/file.js
   • Windows: C:\project\node_modules\package\file.js

2. String Matching Issue:

   • Filter: .includes('/node_modules/') ← Looking for forward slashes
   • Windows Path: C:\project\node_modules\package ← Has backslashes
   • Result: No match → filter condition evaluates to false → entry point NOT filtered

Why Other Platforms Work

• Unix/macOS: Path separators are already forward slashes
• ESBuild on these systems: Normalizes to forward slashes
• Filter matches: Entry points correctly filtered

---

Current Workaround

File: scripts/patch-native-federation-windows.js

Projects using native federation on Windows can apply this patch during postinstall:

const fs = require('fs');
const path = require('path');

const targetFile = path.join(
  __dirname,
  '..',
  'node_modules',
  '@angular-architects',
  'native-federation',
  'src',
  'utils',
  'angular-esbuild-adapter.js'
);

const original = fs.readFileSync(targetFile, 'utf-8');
const needle = `.filter((ep) => !ep.fileName.includes('/node_modules/') && !ep.fileName.startsWith('.'))`;
const replacement = `.filter((ep) => !ep.fileName.replace(/\\\\/g, '/').includes('/node_modules/') && !ep.fileName.startsWith('.'))`;

const patched = original.replace(needle, replacement);
fs.writeFileSync(targetFile, patched, 'utf-8');

In package.json:

{
  "postinstall": "node scripts/patch-native-federation-windows.js"
}

Limitation: This is a post-install patch. The upstream library needs the fix.

Environment Details

Affected Versions

• @angular-architects/native-federation: ^21.2.5 (and likely other versions)
• Confirmed on Angular 21
• Likely affects all versions used on Windows

Test Environments

• Windows 10/11 - Build fails without patch
• macOS - Works without patch
• Linux - Works without patch

System Information

OS: Windows 11 Enterprise
Node: v20.x
npm: v10.x
@angular-architects/native-federation: 21.2.5
@angular/core: 21.2.x
typescript: 5.4.x

---

Wrap up

This issue prevents native federation from functioning on Windows development machines and CI/CD pipelines. The fix is straightforward and low-risk: normalize path separators before string matching. This is a standard practice in cross-platform Node.js tools and aligns with ESBuild's internal path handling.

Thanks in advance!