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.
  • Loading branch information
clydin committed Jul 19, 2024
1 parent 64b5081 commit 37a2138
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 @@ -29,7 +29,7 @@ export function 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 37a2138

Please sign in to comment.