Skip to content

fix(build): match main and polyfills scripts by file name - #203

Open
JasinRefiku wants to merge 1 commit into
native-federation:mainfrom
JasinRefiku:fix/script-tag-file-name-match
Open

JasinRefiku wants to merge 1 commit into
native-federation:mainfrom
JasinRefiku:fix/script-tag-file-name-match

Conversation

@JasinRefiku

Copy link
Copy Markdown
Contributor

Problem

updateScriptTags gives type="module-shim" to the first <script> whose src contains main anywhere. When an app is served under a base href containing "main" (e.g. /maintenance/), Vite injects its client script first:

<script type="module" src="/maintenance/@vite/client"></script>
...
<script src="polyfills.js" type="module"></script>
<script src="main.js" type="module"></script>

The Vite client gets module-shim and main.js stays type="module". Federation installs only an importmap-shim, so the native import('./bootstrap') in main.js fails:

TypeError: Failed to resolve module specifier "@angular/platform-browser". Relative references must start with either "/", "./", or "../".

The polyfills lookahead has the same weakness.

Fix

Both lookaheads now match the file name only: main.js, main-HASH.js, polyfills.js, polyfills-HASH.js, with or without a leading path.

Tests

Three new cases in update-index-html.spec.ts:

  • a base href containing main (dev server shape), where only main.js becomes module-shim
  • a path containing polyfills, which is left untouched
  • absolute /app/main.js and /app/polyfills.js, which are still matched

The first two fail on main without the fix. All 12 specs in the file pass with it. I ran them with vitest 4.1 outside this repo's install, and did not run pnpm lint / pnpm typecheck locally.

Context

Reported on the old repo as part of angular-architects/module-federation-plugin#933 (comment). This PR doesn't fully fix that issue's original case: a CDN main.min.js placed before Angular's main.js still matches main[.-].

updateScriptTags gave module-shim to the first script whose src contained
"main" anywhere. With a base href such as /maintenance/, the dev server's
/maintenance/@vite/client comes first and matches, so main.js stays a native
module and cannot resolve shared packages from the importmap-shim:

  Failed to resolve module specifier "@angular/platform-browser"

Match the file name (main.js, main-HASH.js, polyfills.js, polyfills-HASH.js)
instead, for both lookaheads.
@JasinRefiku

JasinRefiku commented Nov 5, 2026 •

Copy link
Copy Markdown
Contributor Author

Note on the red verify check: Typecheck, Build, Lint, Knip and Test all pass. Only the last step, pnpm audit, fails, on a moderate minimatch advisory (GHSA-g3hv-75wg-m249, fixed in >=11.0.1). It comes in through eslint's dev dependencies, not through this change, and main would hit it on its next run too.

I've left it out of this PR to keep the scope narrow. Happy to add a minimatch override here if you'd rather fix it in this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant