From 38a7f4392544a1ef0a749a6c183e2bc7e825d457 Mon Sep 17 00:00:00 2001 From: Colum Ferry Date: Fri, 26 Jul 2024 16:54:09 +0100 Subject: [PATCH] fix(module-federation): handle tspath mappings with /* wildcard #26765 (#27149) ## Current Behavior Module Federation setups using `/*` wildcards in ts path mappings error out as they cannot resolve the module. ## Expected Behavior `/*` ts path mappings should still allow modules to be resolved ## Related Issue(s) Fixes #26765 --- e2e/angular/src/module-federation.test.ts | 22 +++++++++++++++++ .../src/utils/module-federation/share.ts | 24 +++++++++++++++++-- 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/e2e/angular/src/module-federation.test.ts b/e2e/angular/src/module-federation.test.ts index 7657bba1a7..fdaa958c47 100644 --- 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,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( [ { diff --git a/packages/webpack/src/utils/module-federation/share.ts b/packages/webpack/src/utils/module-federation/share.ts index b87a9a3b20..a8c92dd40a 100644 --- 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; } } }),