Skip to content
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.

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

fix(angular): resolve the index html transformer correctly for esbuild based build targets in dev-server #21679

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
132 changes: 81 additions & 51 deletions packages/angular/src/builders/dev-server/dev-server.impl.ts
Expand Up @@ -24,6 +24,7 @@ import { combineLatest, from } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { getInstalledAngularVersionInfo } from '../../executors/utilities/angular-version-utils';
import {
loadIndexHtmlTransformer,
loadMiddleware,
loadPlugins,
type PluginSpec,
Expand Down Expand Up @@ -182,62 +183,72 @@ export function executeDevServerBuilder(
from(
loadMiddleware(options.esbuildMiddleware, buildTargetOptions.tsConfig)
),
]).pipe(
switchMap(([{ executeDevServerBuilder }, plugins, middleware]) =>
executeDevServerBuilder(
delegateBuilderOptions,
from(
loadIndexHtmlFileTransformer(
pathToIndexFileTransformer,
buildTargetOptions.tsConfig,
context,
{
webpackConfiguration: isUsingWebpackBuilder
? async (baseWebpackConfig) => {
if (!buildLibsFromSource) {
const workspaceDependencies = dependencies
.filter((dep) => !isNpmProject(dep.node))
.map((dep) => dep.node.name);
// default for `nx run-many` is --all projects
// by passing an empty string for --projects, run-many will default to
// run the target for all projects.
// This will occur when workspaceDependencies = []
if (workspaceDependencies.length > 0) {
baseWebpackConfig.plugins.push(
// @ts-expect-error - difference between angular and webpack plugin definitions bc of webpack versions
new WebpackNxBuildCoordinationPlugin(
`nx run-many --target=${
parsedBuildTarget.target
} --projects=${workspaceDependencies.join(',')}`
)
);
isUsingWebpackBuilder
)
),
]).pipe(
switchMap(
([
{ executeDevServerBuilder },
plugins,
middleware,
indexHtmlTransformer,
]) =>
executeDevServerBuilder(
delegateBuilderOptions,
context,
{
webpackConfiguration: isUsingWebpackBuilder
? async (baseWebpackConfig) => {
if (!buildLibsFromSource) {
const workspaceDependencies = dependencies
.filter((dep) => !isNpmProject(dep.node))
.map((dep) => dep.node.name);
// default for `nx run-many` is --all projects
// by passing an empty string for --projects, run-many will default to
// run the target for all projects.
// This will occur when workspaceDependencies = []
if (workspaceDependencies.length > 0) {
baseWebpackConfig.plugins.push(
// @ts-expect-error - difference between angular and webpack plugin definitions bc of webpack versions
new WebpackNxBuildCoordinationPlugin(
`nx run-many --target=${
parsedBuildTarget.target
} --projects=${workspaceDependencies.join(',')}`
)
);
}
}

if (!pathToWebpackConfig) {
return baseWebpackConfig;
}
}

if (!pathToWebpackConfig) {
return baseWebpackConfig;
return mergeCustomWebpackConfig(
baseWebpackConfig,
pathToWebpackConfig,
buildTargetOptions,
context.target
);
}
: undefined,

return mergeCustomWebpackConfig(
baseWebpackConfig,
pathToWebpackConfig,
buildTargetOptions,
context.target
);
}
: undefined,

...(pathToIndexFileTransformer
? {
indexHtml: resolveIndexHtmlTransformer(
pathToIndexFileTransformer,
buildTargetOptions.tsConfig,
context.target
),
}
: {}),
},
{
buildPlugins: plugins,
middleware,
}
)
...(indexHtmlTransformer
? {
indexHtml: indexHtmlTransformer,
}
: {}),
},
{
buildPlugins: plugins,
middleware,
}
)
)
);
}
Expand Down Expand Up @@ -267,6 +278,25 @@ function getDelegateBuilderOptions(
return delegateBuilderOptions;
}

async function loadIndexHtmlFileTransformer(
pathToIndexFileTransformer: string | undefined,
tsConfig: string,
context: BuilderContext,
isUsingWebpackBuilder: boolean
) {
if (!pathToIndexFileTransformer) {
return undefined;
}

return isUsingWebpackBuilder
? resolveIndexHtmlTransformer(
pathToIndexFileTransformer,
tsConfig,
context.target
)
: await loadIndexHtmlTransformer(pathToIndexFileTransformer, tsConfig);
}

const executorToBuilderMap = new Map<string, string>([
[
'@nx/angular:browser-esbuild',
Expand Down