Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
23 changes: 19 additions & 4 deletions packages/angular/build/src/builders/dev-server/vite/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import type * as Vite from 'vite' with {
};
import type { ComponentStyleRecord } from '../../../tools/vite/middlewares';
import { ServerSsrMode } from '../../../tools/vite/plugins';
import { EsbuildLoaderOption, updateExternalMetadata } from '../../../tools/vite/utils';
import { updateExternalMetadata } from '../../../tools/vite/utils';
import { normalizeSourceMaps } from '../../../utils';
import { useComponentStyleHmr, useComponentTemplateHmr } from '../../../utils/environment-options';
import { Result, ResultKind } from '../../application/results';
Expand Down Expand Up @@ -384,12 +384,17 @@ export async function* serveWithVite(
const projectRoot = join(context.workspaceRoot, root as string);
const browsers = getSupportedBrowsers(projectRoot, context.logger);

const target = transformSupportedBrowsersToTargets(browsers);
// Needed for browser-esbuild as polyfills can be a string.
const polyfills = Array.isArray((browserOptions.polyfills ??= []))
? browserOptions.polyfills
: [browserOptions.polyfills];

const target = transformSupportedBrowsersToTargets(browsers);
if (!isZonelessApp(polyfills)) {
// Rolldown doesn't have an option to support Zone.js/async-await, so we need to support es2016.
target.push('es2016');
}

let ssrMode: ServerSsrMode = ServerSsrMode.NoSsr;
if (
browserOptions.outputMode &&
Expand All @@ -408,6 +413,16 @@ export async function* serveWithVite(
});
}

// Copy the loader and modify the file extension to be asset
const loader = browserOptions.loader ? { ...browserOptions.loader } : undefined;
if (loader) {
for (const [key, value] of Object.entries(loader)) {
if (value === 'file') {
loader[key] = 'asset';
}
}
}

// Setup server and start listening
const serverConfiguration = await setupServer(
serverOptions,
Expand All @@ -418,12 +433,12 @@ export async function* serveWithVite(
ssrMode,
prebundleTransformer,
target,
isZonelessApp(polyfills),
componentStyles,
templateUpdates,
browserOptions.loader as EsbuildLoaderOption | undefined,
loader,
{
...browserOptions.define,
'ngServerMode': 'false',
'ngJitMode': browserOptions.aot ? 'false' : 'true',
'ngHmrMode': browserOptions.templateUpdates ? 'true' : 'false',
},
Expand Down
44 changes: 21 additions & 23 deletions packages/angular/build/src/builders/dev-server/vite/server.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
createAngularSsrTransformPlugin,
createRemoveIdPrefixPlugin,
} from '../../../tools/vite/plugins';
import { EsbuildLoaderOption, getDepOptimizationConfig } from '../../../tools/vite/utils';
import { RolldownLoaderOption, getDepOptimizationConfig } from '../../../tools/vite/utils';
import { loadProxyConfiguration } from '../../../utils';
import { type ApplicationBuilderInternalOptions, JavaScriptTransformer } from '../internal';
import type { NormalizedDevServerOptions } from '../options';
Expand Down Expand Up @@ -82,13 +82,16 @@ async function createServerConfig(
},
};

if (serverOptions.ssl) {
if (serverOptions.sslCert && serverOptions.sslKey) {
server.https = {
cert: await readFile(serverOptions.sslCert),
key: await readFile(serverOptions.sslKey),
};
}
if (serverOptions.ssl && serverOptions.sslCert && serverOptions.sslKey) {
const [cert, key] = await Promise.all([
readFile(serverOptions.sslCert),
readFile(serverOptions.sslKey),
]);

server.https = {
cert,
key,
};
}

return server;
Expand All @@ -98,9 +101,7 @@ function createSsrConfig(
externalMetadata: DevServerExternalResultMetadata,
serverOptions: NormalizedDevServerOptions,
prebundleTransformer: JavaScriptTransformer,
zoneless: boolean,
target: string[],
prebundleLoaderExtensions: EsbuildLoaderOption | undefined,
prebundleLoaderExtensions: RolldownLoaderOption | undefined,
thirdPartySourcemaps: boolean,
define: ApplicationBuilderInternalOptions['define'],
): Vite.SSROptions {
Expand All @@ -116,13 +117,13 @@ function createSsrConfig(
exclude: externalMetadata.explicitServer,
// Include all implict dependencies from the external packages internal option
include: externalMetadata.implicitServer,
ssr: true,
prebundleTransformer,
zoneless,
target,
loader: prebundleLoaderExtensions,
thirdPartySourcemaps,
define,
define: {
...define,
'ngServerMode': 'true',
},
}),
};
}
Expand All @@ -136,10 +137,9 @@ export async function setupServer(
ssrMode: ServerSsrMode,
prebundleTransformer: JavaScriptTransformer,
target: string[],
zoneless: boolean,
componentStyles: Map<string, ComponentStyleRecord>,
templateUpdates: Map<string, string>,
prebundleLoaderExtensions: EsbuildLoaderOption | undefined,
prebundleLoaderExtensions: RolldownLoaderOption | undefined,
define: ApplicationBuilderInternalOptions['define'],
extensionMiddleware?: Vite.Connect.NextHandleFunction[],
indexHtmlTransformer?: (content: string) => Promise<string>,
Expand Down Expand Up @@ -182,7 +182,7 @@ export async function setupServer(
assetsInclude:
prebundleLoaderExtensions &&
Object.entries(prebundleLoaderExtensions)
.filter(([, value]) => value === 'file')
.filter(([, value]) => value === 'asset')
// Create a file extension glob for each key
.map(([key]) => '*' + key),
// Vite will normalize the `base` option by adding a leading slash.
Expand All @@ -201,15 +201,16 @@ export async function setupServer(
preTransformRequests,
cacheDir,
),
build: {
target,
},
ssr:
ssrMode === ServerSsrMode.NoSsr
? undefined
: createSsrConfig(
externalMetadata,
serverOptions,
prebundleTransformer,
zoneless,
target,
prebundleLoaderExtensions,
thirdPartySourcemaps,
define,
Expand Down Expand Up @@ -244,10 +245,7 @@ export async function setupServer(
exclude: externalMetadata.explicitBrowser,
// Include all implict dependencies from the external packages internal option
include: externalMetadata.implicitBrowser,
ssr: false,
prebundleTransformer,
target,
zoneless,
loader: prebundleLoaderExtensions,
thirdPartySourcemaps,
define,
Expand Down
1 change: 0 additions & 1 deletion packages/angular/build/src/tools/esbuild/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
import { BuilderContext } from '@angular-devkit/architect';
import { BuildOptions, Metafile, OutputFile, formatMessages } from 'esbuild';
import { Listr } from 'listr2';
import { createHash } from 'node:crypto';
import { basename, join } from 'node:path';
import { pathToFileURL } from 'node:url';
import { brotliCompress } from 'node:zlib';
Expand Down
71 changes: 27 additions & 44 deletions packages/angular/build/src/tools/vite/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
* found in the LICENSE file at https://angular.dev/license
*/

import type { OnLoadArgs, PluginBuild } from 'esbuild';
import { lookup as lookupMimeType } from 'mrmime';
import { builtinModules, isBuiltin } from 'node:module';
import { extname } from 'node:path';
Expand All @@ -15,7 +14,6 @@ import type { DepOptimizationConfig } from 'vite' with {
};
import type { ExternalResultMetadata } from '../esbuild/bundler-execution-result';
import { JavaScriptTransformer } from '../esbuild/javascript-transformer';
import { getFeatureSupport } from '../esbuild/utils';

export type AngularMemoryOutputFiles = Map<
string,
Expand Down Expand Up @@ -44,75 +42,60 @@ export function lookupMimeTypeFromRequest(url: string): string | undefined {
return extension && lookupMimeType(extension);
}

type ViteEsBuildPlugin = NonNullable<
NonNullable<DepOptimizationConfig['esbuildOptions']>['plugins']
>[0];

export type EsbuildLoaderOption = Exclude<
DepOptimizationConfig['esbuildOptions'],
export type RolldownLoaderOption = Exclude<
DepOptimizationConfig['rolldownOptions'],
undefined
>['loader'];
>['moduleTypes'];

export function getDepOptimizationConfig({
disabled,
exclude,
include,
target,
zoneless,
prebundleTransformer,
ssr,
loader,
thirdPartySourcemaps,
define = {},
}: {
disabled: boolean;
exclude: string[];
include: string[];
target: string[];
prebundleTransformer: JavaScriptTransformer;
ssr: boolean;
zoneless: boolean;
loader?: EsbuildLoaderOption;
loader?: RolldownLoaderOption;
thirdPartySourcemaps: boolean;
define: Record<string, string> | undefined;
}): DepOptimizationConfig {
const plugins: ViteEsBuildPlugin[] = [
{
name: `angular-vite-optimize-deps${ssr ? '-ssr' : ''}${
thirdPartySourcemaps ? '-vendor-sourcemap' : ''
}`,
setup(build: PluginBuild) {
build.onLoad({ filter: /\.[cm]?js$/ }, async (args: OnLoadArgs) => {
return {
contents: await prebundleTransformer.transformFile(args.path),
loader: 'js',
};
});
},
},
];

return {
const config: DepOptimizationConfig = {
// Exclude any explicitly defined dependencies (currently build defined externals)
exclude,
// NB: to disable the deps optimizer, set optimizeDeps.noDiscovery to true and optimizeDeps.include as undefined.
// Include all implict dependencies from the external packages internal option
include: disabled ? undefined : include,
noDiscovery: disabled,
// Add an esbuild plugin to run the Angular linker on dependencies
esbuildOptions: {
// Set esbuild supported targets.
target,
supported: getFeatureSupport(zoneless),
plugins,
loader,
define: {
...define,
'ngServerMode': `${ssr}`,
rolldownOptions: {
transform: {
define,
},
moduleTypes: loader,
resolve: {
extensions: ['.mjs', '.js', '.cjs'],
},
resolveExtensions: ['.mjs', '.js', '.cjs'],
plugins: [
{
name: `angular-vite-optimize-deps${thirdPartySourcemaps ? '-vendor-sourcemap' : ''}`,
load: {
filter: { id: /\.[cm]?js$/ },
async handler(id: string) {
const code = await prebundleTransformer.transformFile(id);

return { code: Buffer.from(code).toString('utf-8') };
},
},
},
],
},
};

return config;
}

export interface DevServerExternalResultMetadata {
Expand Down
Loading