Skip to content

Commit

Permalink
fix(@angular/build): account for HTML base HREF for dev-server externals
Browse files Browse the repository at this point in the history
When adjusting URLs to support explicit external dependencies when using Vite,
the workaround will now account for the presence of a base HREF value within
the specifier. Vite will automatically add the base HREF as a prefix to the
path when specified. This previously resulted in invalid specifiers due to
the partial removal of the Vite specific `@id` path prefix.

(cherry picked from commit 37a2138)
  • Loading branch information
clydin committed Jul 19, 2024
1 parent d868270 commit 5b9378a
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -45,5 +45,43 @@ describeServeBuilder(executeDevServer, DEV_SERVER_BUILDER_INFO, (harness, setupT
expect(text).toContain(`import { BehaviorSubject } from "rxjs";`);
expect(text).toContain(`import { map } from "rxjs/operators";`);
});

it('respects import specifiers when using baseHref with trailing slash', async () => {
setupTarget(harness, {
externalDependencies: ['rxjs', 'rxjs/operators'],
baseHref: '/test/',
});

harness.useTarget('serve', {
...BASE_OPTIONS,
});

const { result, response } = await executeOnceAndFetch(harness, 'main.js');

expect(result?.success).toBeTrue();

const text = await response?.text();
expect(text).toContain(`import { BehaviorSubject } from "rxjs";`);
expect(text).toContain(`import { map } from "rxjs/operators";`);
});

it('respects import specifiers when using baseHref without trailing slash', async () => {
setupTarget(harness, {
externalDependencies: ['rxjs', 'rxjs/operators'],
baseHref: '/test',
});

harness.useTarget('serve', {
...BASE_OPTIONS,
});

const { result, response } = await executeOnceAndFetch(harness, 'main.js');

expect(result?.success).toBeTrue();

const text = await response?.text();
expect(text).toContain(`import { BehaviorSubject } from "rxjs";`);
expect(text).toContain(`import { map } from "rxjs/operators";`);
});
});
});
4 changes: 2 additions & 2 deletions packages/angular/build/src/tools/vite/id-prefix-plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import type { Plugin } from 'vite';
// NOTE: the implementation for this Vite plugin is roughly based on:
// https://github.com/MilanKovacic/vite-plugin-externalize-dependencies

const VITE_ID_PREFIX = '/@id/';
const VITE_ID_PREFIX = '@id/';

const escapeRegexSpecialChars = (inputString: string): string => {
return inputString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
Expand All @@ -28,7 +28,7 @@ export const createRemoveIdPrefixPlugin = (externals: string[]): Plugin => ({

const escapedExternals = externals.map(escapeRegexSpecialChars);
const prefixedExternalRegex = new RegExp(
`${VITE_ID_PREFIX}(${escapedExternals.join('|')})`,
`${resolvedConfig.base}${VITE_ID_PREFIX}(${escapedExternals.join('|')})`,
'g',
);

Expand Down

0 comments on commit 5b9378a

Please sign in to comment.