Skip to content

fix(@angular/build): resolve HMR-prefixed files in SSR with Vite #29365

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 16, 2025
Merged

fix(@angular/build): resolve HMR-prefixed files in SSR with Vite #29365

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions packages/angular/build/src/tools/vite/plugins/angular-memory-plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@

import assert from 'node:assert';
import { readFile } from 'node:fs/promises';
import { basename, dirname, join, relative } from 'node:path';
import { basename, dirname, join, parse, relative } from 'node:path';
import { fileURLToPath } from 'node:url';
import type { Plugin } from 'vite';
import { loadEsmModule } from '../../../utils/load-esm';
import { AngularMemoryOutputFiles } from '../utils';
Expand All @@ -23,6 +24,7 @@ interface AngularMemoryPluginOptions {

const ANGULAR_PREFIX = '/@ng/';
const VITE_FS_PREFIX = '/@fs/';
const FILE_PROTOCOL = 'file:';

export async function createAngularMemoryPlugin(
options: AngularMemoryPluginOptions,
Expand All @@ -40,8 +42,18 @@ export async function createAngularMemoryPlugin(
}

// For SSR with component HMR, pass through as a virtual module
if (ssr && source.startsWith(ANGULAR_PREFIX)) {
return '\0' + source;
if (ssr && source.startsWith(FILE_PROTOCOL) && source.includes(ANGULAR_PREFIX)) {
// Vite will resolve these these files example:
// `file:///@ng/component?c=src%2Fapp%2Fapp.component.ts%40AppComponent&t=1737017253850`
const sourcePath = fileURLToPath(source);
const { root } = parse(sourcePath);
const sourceWithoutRoot = normalizePath('/' + sourcePath.slice(root.length));

if (sourceWithoutRoot.startsWith(ANGULAR_PREFIX)) {
const [, query] = source.split('?', 2);

return `\0${sourceWithoutRoot}?${query}`;
}
}

// Prevent vite from resolving an explicit external dependency (`externalDependencies` option)
Expand Down
Loading