fix(module-federation): handle tspath mappings with /* wildcard #26765

nrwl · Jul 26, 2024 · 0fa11eb · 0fa11eb
1 parent 45c458e
commit 0fa11eb
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/e2e/angular/src/module-federation.test.ts b/e2e/angular/src/module-federation.test.ts
@@ -10,6 +10,7 @@ import {
   runE2ETests,
   uniq,
   updateFile,
+  updateJson,
 } from '@nx/e2e/utils';
 import { join } from 'path';
 
@@ -31,6 +32,7 @@ describe('Angular Module Federation', () => {
     const hostApp = uniq('app');
     const remoteApp1 = uniq('remote');
     const sharedLib = uniq('shared-lib');
+    const wildcardLib = uniq('wildcard-lib');
     const secondaryEntry = uniq('secondary');
     const hostPort = 4300;
     const remotePort = 4301;
@@ -61,11 +63,28 @@ describe('Angular Module Federation', () => {
     runCLI(
       `generate @nx/angular:library-secondary-entry-point --library=${sharedLib} --name=${secondaryEntry} --no-interactive`
     );
+
+    // Add a library that will be accessed via a wildcard in tspath mappings
+    runCLI(
+      `generate @nx/angular:library ${wildcardLib} --buildable --no-standalone --project-name-and-root-format=as-provided --no-interactive`
+    );
+
+    updateJson('tsconfig.base.json', (json) => {
+      delete json.compilerOptions.paths[`@${proj}/${wildcardLib}`];
+      json.compilerOptions.paths[`@${proj}/${wildcardLib}/*`] = [
+        `${wildcardLib}/src/lib/*`,
+      ];
+      return json;
+    });
+
     // update host & remote files to use shared library
     updateFile(
       `${hostApp}/src/app/app.module.ts`,
       `import { NgModule } from '@angular/core';
       import { BrowserModule } from '@angular/platform-browser';
+      import { ${
+        names(wildcardLib).className
+      }Module } from '@${proj}/${wildcardLib}';
       import { ${
         names(sharedLib).className
       }Module } from '@${proj}/${sharedLib}';
@@ -81,6 +100,7 @@ describe('Angular Module Federation', () => {
         imports: [
           BrowserModule,
           ${names(sharedLib).className}Module,
+          ${names(wildcardLib).className}Module,
           RouterModule.forRoot(
             [
               {

diff --git a/packages/webpack/src/utils/module-federation/share.ts b/packages/webpack/src/utils/module-federation/share.ts
@@ -81,7 +81,12 @@ export function shareWorkspaceLibraries(
   return {
     getAliases: () =>
       pathMappings.reduce(
-        (aliases, library) => ({ ...aliases, [library.name]: library.path }),
+        (aliases, library) => ({
+          ...aliases,
+          // If the library path ends in a wildcard, remove it as webpack can't handle this in resolve.alias
+          // e.g. path/to/my/lib/* -> path/to/my/lib
+          [library.name]: library.path.replace(/\/\*$/, ''),
+        }),
         {}
       ),
     getLibraries: (
@@ -145,7 +150,22 @@ export function shareWorkspaceLibraries(
         for (const library of pathMappings) {
           const libFolder = normalize(dirname(library.path));
           if (!from.startsWith(libFolder) && to.startsWith(libFolder)) {
-            req.request = library.name;
+            const newReq = library.name.endsWith('/*')
+              ? /**
+                 * req usually is in the form of "../../../path/to/file"
+                 * library.path is usually in the form of "/Users/username/path/to/Workspace/path/to/library"
+                 *
+                 * When a wildcard is used in the TS path mappings, we want to get everything after the import to
+                 * re-route the request correctly inline with the webpack resolve.alias
+                 */
+                join(
+                  library.name,
+                  req.request.split(
+                    library.path.replace(workspaceRoot, '').replace('/*', '')
+                  )[1]
+                )
+              : library.name;
+            req.request = newReq;
           }
         }
       }),