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

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->
Module Federation setups using `/*` wildcards in ts path mappings error
out as they cannot resolve the module.


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
`/*` ts path mappings should still allow modules to be resolved

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #26765

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,30 @@ 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}/${
+        names(secondaryEntry).fileName
+      }.module';
       import { ${
         names(sharedLib).className
       }Module } from '@${proj}/${sharedLib}';
@@ -81,6 +102,7 @@ describe('Angular Module Federation', () => {
         imports: [
           BrowserModule,
           ${names(sharedLib).className}Module,
+          ${names(wildcardLib).className}Module,
           RouterModule.forRoot(
             [
               {

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;
           }
         }
       }),