in packages/angular_devkit/build_angular/src/builders/dev-server/index.ts [84:242]
async function setup(): Promise<{
browserOptions: json.JsonObject & BrowserBuilderSchema;
webpackConfig: webpack.Configuration;
projectRoot: string;
}> {
const projectName = context.target?.project;
if (!projectName) {
throw new Error('The builder requires a target.');
}
// Purge old build disk cache.
await purgeStaleBuildCache(context);
options.port = await checkPort(options.port ?? 4200, options.host || 'localhost');
if (options.hmr) {
logger.warn(tags.stripIndents`NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.`);
}
if (
!options.disableHostCheck &&
options.host &&
!/^127\.\d+\.\d+\.\d+/g.test(options.host) &&
options.host !== 'localhost'
) {
logger.warn(tags.stripIndent`
Warning: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.
Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disable-host-check" if that's the
case.
`);
}
if (options.disableHostCheck) {
logger.warn(tags.oneLine`
Warning: Running a server with --disable-host-check is a security risk.
See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
for more information.
`);
}
// Get the browser configuration from the target name.
const rawBrowserOptions = (await context.getTargetOptions(browserTarget)) as json.JsonObject &
BrowserBuilderSchema;
if (rawBrowserOptions.outputHashing && rawBrowserOptions.outputHashing !== OutputHashing.None) {
// Disable output hashing for dev build as this can cause memory leaks
// See: https://github.com/webpack/webpack-dev-server/issues/377#issuecomment-241258405
rawBrowserOptions.outputHashing = OutputHashing.None;
logger.warn(`Warning: 'outputHashing' option is disabled when using the dev-server.`);
}
const metadata = await context.getProjectMetadata(projectName);
const cacheOptions = normalizeCacheOptions(metadata, context.workspaceRoot);
const browserName = await context.getBuilderNameForTarget(browserTarget);
const browserOptions = (await context.validateOptions(
{
...rawBrowserOptions,
watch: options.watch,
verbose: options.verbose,
// In dev server we should not have budgets because of extra libs such as socks-js
budgets: undefined,
} as json.JsonObject & BrowserBuilderSchema,
browserName,
)) as json.JsonObject & BrowserBuilderSchema;
const { styles, scripts } = normalizeOptimization(browserOptions.optimization);
if (scripts || styles.minify) {
logger.error(tags.stripIndents`
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.
DON'T USE IT FOR PRODUCTION!
****************************************************************************************
`);
}
const { config, projectRoot, i18n } = await generateI18nBrowserWebpackConfigFromContext(
browserOptions,
context,
(wco) => [
getDevServerConfig(wco),
getCommonConfig(wco),
getStylesConfig(wco),
getAnalyticsConfig(wco, context),
],
options,
);
if (!config.devServer) {
throw new Error('Webpack Dev Server configuration was not set.');
}
let locale: string | undefined;
if (i18n.shouldInline) {
// Dev-server only supports one locale
locale = [...i18n.inlineLocales][0];
} else if (i18n.hasDefinedSourceLocale) {
// use source locale if not localizing
locale = i18n.sourceLocale;
}
let webpackConfig = config;
// If a locale is defined, setup localization
if (locale) {
if (i18n.inlineLocales.size > 1) {
throw new Error(
'The development server only supports localizing a single locale per build.',
);
}
await setupLocalize(locale, i18n, browserOptions, webpackConfig, cacheOptions, context);
}
if (transforms.webpackConfiguration) {
webpackConfig = await transforms.webpackConfiguration(webpackConfig);
}
if (browserOptions.index) {
const { scripts = [], styles = [], baseHref } = browserOptions;
const entrypoints = generateEntryPoints({
scripts,
styles,
// The below is needed as otherwise HMR for CSS will break.
// styles.js and runtime.js needs to be loaded as a non-module scripts as otherwise `document.currentScript` will be null.
// https://github.com/webpack-contrib/mini-css-extract-plugin/blob/90445dd1d81da0c10b9b0e8a17b417d0651816b8/src/hmr/hotModuleReplacement.js#L39
isHMREnabled: !!webpackConfig.devServer?.hot,
});
webpackConfig.plugins ??= [];
webpackConfig.plugins.push(
new IndexHtmlWebpackPlugin({
indexPath: path.resolve(workspaceRoot, getIndexInputFile(browserOptions.index)),
outputPath: getIndexOutputFile(browserOptions.index),
baseHref,
entrypoints,
deployUrl: browserOptions.deployUrl,
sri: browserOptions.subresourceIntegrity,
cache: cacheOptions,
postTransform: transforms.indexHtml,
optimization: normalizeOptimization(browserOptions.optimization),
crossOrigin: browserOptions.crossOrigin,
lang: locale,
}),
);
}
return {
browserOptions,
webpackConfig,
projectRoot,
};
}