| 1 | "use strict";
|
|---|
| 2 | /**
|
|---|
| 3 | * @license
|
|---|
| 4 | * Copyright Google LLC All Rights Reserved.
|
|---|
| 5 | *
|
|---|
| 6 | * Use of this source code is governed by an MIT-style license that can be
|
|---|
| 7 | * found in the LICENSE file at https://angular.io/license
|
|---|
| 8 | */
|
|---|
| 9 | var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|---|
| 10 | if (k2 === undefined) k2 = k;
|
|---|
| 11 | Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|---|
| 12 | }) : (function(o, m, k, k2) {
|
|---|
| 13 | if (k2 === undefined) k2 = k;
|
|---|
| 14 | o[k2] = m[k];
|
|---|
| 15 | }));
|
|---|
| 16 | var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|---|
| 17 | Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|---|
| 18 | }) : function(o, v) {
|
|---|
| 19 | o["default"] = v;
|
|---|
| 20 | });
|
|---|
| 21 | var __importStar = (this && this.__importStar) || function (mod) {
|
|---|
| 22 | if (mod && mod.__esModule) return mod;
|
|---|
| 23 | var result = {};
|
|---|
| 24 | if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|---|
| 25 | __setModuleDefault(result, mod);
|
|---|
| 26 | return result;
|
|---|
| 27 | };
|
|---|
| 28 | var __importDefault = (this && this.__importDefault) || function (mod) {
|
|---|
| 29 | return (mod && mod.__esModule) ? mod : { "default": mod };
|
|---|
| 30 | };
|
|---|
| 31 | Object.defineProperty(exports, "__esModule", { value: true });
|
|---|
| 32 | exports.serveWebpackBrowser = void 0;
|
|---|
| 33 | const architect_1 = require("@angular-devkit/architect");
|
|---|
| 34 | const build_webpack_1 = require("@angular-devkit/build-webpack");
|
|---|
| 35 | const core_1 = require("@angular-devkit/core");
|
|---|
| 36 | const path = __importStar(require("path"));
|
|---|
| 37 | const rxjs_1 = require("rxjs");
|
|---|
| 38 | const operators_1 = require("rxjs/operators");
|
|---|
| 39 | const ts = __importStar(require("typescript"));
|
|---|
| 40 | const url = __importStar(require("url"));
|
|---|
| 41 | const webpack_dev_server_1 = __importDefault(require("webpack-dev-server"));
|
|---|
| 42 | const schema_1 = require("../browser/schema");
|
|---|
| 43 | const utils_1 = require("../utils");
|
|---|
| 44 | const cache_path_1 = require("../utils/cache-path");
|
|---|
| 45 | const check_port_1 = require("../utils/check-port");
|
|---|
| 46 | const color_1 = require("../utils/color");
|
|---|
| 47 | const package_chunk_sort_1 = require("../utils/package-chunk-sort");
|
|---|
| 48 | const read_tsconfig_1 = require("../utils/read-tsconfig");
|
|---|
| 49 | const version_1 = require("../utils/version");
|
|---|
| 50 | const webpack_browser_config_1 = require("../utils/webpack-browser-config");
|
|---|
| 51 | const configs_1 = require("../webpack/configs");
|
|---|
| 52 | const index_html_webpack_plugin_1 = require("../webpack/plugins/index-html-webpack-plugin");
|
|---|
| 53 | const stats_1 = require("../webpack/utils/stats");
|
|---|
| 54 | const devServerBuildOverriddenKeys = [
|
|---|
| 55 | 'watch',
|
|---|
| 56 | 'optimization',
|
|---|
| 57 | 'aot',
|
|---|
| 58 | 'sourceMap',
|
|---|
| 59 | 'vendorChunk',
|
|---|
| 60 | 'commonChunk',
|
|---|
| 61 | 'baseHref',
|
|---|
| 62 | 'progress',
|
|---|
| 63 | 'poll',
|
|---|
| 64 | 'verbose',
|
|---|
| 65 | 'deployUrl',
|
|---|
| 66 | ];
|
|---|
| 67 | /**
|
|---|
| 68 | * Reusable implementation of the Angular Webpack development server builder.
|
|---|
| 69 | * @param options Dev Server options.
|
|---|
| 70 | * @param context The build context.
|
|---|
| 71 | * @param transforms A map of transforms that can be used to hook into some logic (such as
|
|---|
| 72 | * transforming webpack configuration before passing it to webpack).
|
|---|
| 73 | *
|
|---|
| 74 | * @experimental Direct usage of this function is considered experimental.
|
|---|
| 75 | */
|
|---|
| 76 | // eslint-disable-next-line max-lines-per-function
|
|---|
| 77 | function serveWebpackBrowser(options, context, transforms = {}) {
|
|---|
| 78 | // Check Angular version.
|
|---|
| 79 | const { logger, workspaceRoot } = context;
|
|---|
| 80 | version_1.assertCompatibleAngularVersion(workspaceRoot);
|
|---|
| 81 | const browserTarget = architect_1.targetFromTargetString(options.browserTarget);
|
|---|
| 82 | async function setup() {
|
|---|
| 83 | var _a, _b;
|
|---|
| 84 | // Get the browser configuration from the target name.
|
|---|
| 85 | const rawBrowserOptions = (await context.getTargetOptions(browserTarget));
|
|---|
| 86 | options.port = await check_port_1.checkPort((_a = options.port) !== null && _a !== void 0 ? _a : 4200, options.host || 'localhost');
|
|---|
| 87 | // Override options we need to override, if defined.
|
|---|
| 88 | const overrides = Object.keys(options)
|
|---|
| 89 | .filter((key) => options[key] !== undefined && devServerBuildOverriddenKeys.includes(key))
|
|---|
| 90 | .reduce((previous, key) => ({
|
|---|
| 91 | ...previous,
|
|---|
| 92 | [key]: options[key],
|
|---|
| 93 | }), {});
|
|---|
| 94 | const devServerOptions = Object.keys(options)
|
|---|
| 95 | .filter((key) => !devServerBuildOverriddenKeys.includes(key) && key !== 'browserTarget')
|
|---|
| 96 | .reduce((previous, key) => ({
|
|---|
| 97 | ...previous,
|
|---|
| 98 | [key]: options[key],
|
|---|
| 99 | }), {});
|
|---|
| 100 | // In dev server we should not have budgets because of extra libs such as socks-js
|
|---|
| 101 | overrides.budgets = undefined;
|
|---|
| 102 | if (rawBrowserOptions.outputHashing && rawBrowserOptions.outputHashing !== schema_1.OutputHashing.None) {
|
|---|
| 103 | // Disable output hashing for dev build as this can cause memory leaks
|
|---|
| 104 | // See: https://github.com/webpack/webpack-dev-server/issues/377#issuecomment-241258405
|
|---|
| 105 | overrides.outputHashing = schema_1.OutputHashing.None;
|
|---|
| 106 | logger.warn(`Warning: 'outputHashing' option is disabled when using the dev-server.`);
|
|---|
| 107 | }
|
|---|
| 108 | if (options.hmr) {
|
|---|
| 109 | logger.warn(core_1.tags.stripIndents `NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
|
|---|
| 110 | See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.`);
|
|---|
| 111 | }
|
|---|
| 112 | if (!options.disableHostCheck &&
|
|---|
| 113 | options.host &&
|
|---|
| 114 | !/^127\.\d+\.\d+\.\d+/g.test(options.host) &&
|
|---|
| 115 | options.host !== 'localhost') {
|
|---|
| 116 | logger.warn(core_1.tags.stripIndent `
|
|---|
| 117 | Warning: This is a simple server for use in testing or debugging Angular applications
|
|---|
| 118 | locally. It hasn't been reviewed for security issues.
|
|---|
| 119 |
|
|---|
| 120 | Binding this server to an open connection can result in compromising your application or
|
|---|
| 121 | computer. Using a different host than the one passed to the "--host" flag might result in
|
|---|
| 122 | websocket connection issues. You might need to use "--disable-host-check" if that's the
|
|---|
| 123 | case.
|
|---|
| 124 | `);
|
|---|
| 125 | }
|
|---|
| 126 | if (options.disableHostCheck) {
|
|---|
| 127 | logger.warn(core_1.tags.oneLine `
|
|---|
| 128 | Warning: Running a server with --disable-host-check is a security risk.
|
|---|
| 129 | See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
|
|---|
| 130 | for more information.
|
|---|
| 131 | `);
|
|---|
| 132 | }
|
|---|
| 133 | // Webpack's live reload functionality adds the `strip-ansi` package which is commonJS
|
|---|
| 134 | (_b = rawBrowserOptions.allowedCommonJsDependencies) !== null && _b !== void 0 ? _b : (rawBrowserOptions.allowedCommonJsDependencies = []);
|
|---|
| 135 | rawBrowserOptions.allowedCommonJsDependencies.push('strip-ansi');
|
|---|
| 136 | const browserName = await context.getBuilderNameForTarget(browserTarget);
|
|---|
| 137 | const browserOptions = (await context.validateOptions({ ...rawBrowserOptions, ...overrides }, browserName));
|
|---|
| 138 | const { styles, scripts } = utils_1.normalizeOptimization(browserOptions.optimization);
|
|---|
| 139 | if (scripts || styles.minify) {
|
|---|
| 140 | logger.error(core_1.tags.stripIndents `
|
|---|
| 141 | ****************************************************************************************
|
|---|
| 142 | This is a simple server for use in testing or debugging Angular applications locally.
|
|---|
| 143 | It hasn't been reviewed for security issues.
|
|---|
| 144 |
|
|---|
| 145 | DON'T USE IT FOR PRODUCTION!
|
|---|
| 146 | ****************************************************************************************
|
|---|
| 147 | `);
|
|---|
| 148 | }
|
|---|
| 149 | const { config, projectRoot, i18n } = await webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext(browserOptions, context, (wco) => [
|
|---|
| 150 | configs_1.getDevServerConfig(wco),
|
|---|
| 151 | configs_1.getCommonConfig(wco),
|
|---|
| 152 | configs_1.getBrowserConfig(wco),
|
|---|
| 153 | configs_1.getStylesConfig(wco),
|
|---|
| 154 | configs_1.getStatsConfig(wco),
|
|---|
| 155 | configs_1.getAnalyticsConfig(wco, context),
|
|---|
| 156 | configs_1.getTypeScriptConfig(wco),
|
|---|
| 157 | browserOptions.webWorkerTsConfig ? configs_1.getWorkerConfig(wco) : {},
|
|---|
| 158 | ], devServerOptions);
|
|---|
| 159 | if (!config.devServer) {
|
|---|
| 160 | throw new Error('Webpack Dev Server configuration was not set.');
|
|---|
| 161 | }
|
|---|
| 162 | if (options.liveReload && !options.hmr) {
|
|---|
| 163 | // This is needed because we cannot use the inline option directly in the config
|
|---|
| 164 | // because of the SuppressExtractedTextChunksWebpackPlugin
|
|---|
| 165 | // Consider not using SuppressExtractedTextChunksWebpackPlugin when liveReload is enable.
|
|---|
| 166 | webpack_dev_server_1.default.addDevServerEntrypoints(config, {
|
|---|
| 167 | ...config.devServer,
|
|---|
| 168 | inline: true,
|
|---|
| 169 | });
|
|---|
| 170 | // Remove live-reload code from all entrypoints but not main.
|
|---|
| 171 | // Otherwise this will break SuppressExtractedTextChunksWebpackPlugin because
|
|---|
| 172 | // 'addDevServerEntrypoints' adds addional entry-points to all entries.
|
|---|
| 173 | if (config.entry &&
|
|---|
| 174 | typeof config.entry === 'object' &&
|
|---|
| 175 | !Array.isArray(config.entry) &&
|
|---|
| 176 | config.entry.main) {
|
|---|
| 177 | for (const [key, value] of Object.entries(config.entry)) {
|
|---|
| 178 | if (key === 'main' || !Array.isArray(value)) {
|
|---|
| 179 | continue;
|
|---|
| 180 | }
|
|---|
| 181 | const webpackClientScriptIndex = value.findIndex((x) => x.includes('webpack-dev-server/client/index.js'));
|
|---|
| 182 | if (webpackClientScriptIndex >= 0) {
|
|---|
| 183 | // Remove the webpack-dev-server/client script from array.
|
|---|
| 184 | value.splice(webpackClientScriptIndex, 1);
|
|---|
| 185 | }
|
|---|
| 186 | }
|
|---|
| 187 | }
|
|---|
| 188 | }
|
|---|
| 189 | let locale;
|
|---|
| 190 | if (i18n.shouldInline) {
|
|---|
| 191 | // Dev-server only supports one locale
|
|---|
| 192 | locale = [...i18n.inlineLocales][0];
|
|---|
| 193 | }
|
|---|
| 194 | else if (i18n.hasDefinedSourceLocale) {
|
|---|
| 195 | // use source locale if not localizing
|
|---|
| 196 | locale = i18n.sourceLocale;
|
|---|
| 197 | }
|
|---|
| 198 | let webpackConfig = config;
|
|---|
| 199 | // If a locale is defined, setup localization
|
|---|
| 200 | if (locale) {
|
|---|
| 201 | // Only supported with Ivy
|
|---|
| 202 | const tsConfig = read_tsconfig_1.readTsconfig(browserOptions.tsConfig, workspaceRoot);
|
|---|
| 203 | if (tsConfig.options.enableIvy !== false) {
|
|---|
| 204 | if (i18n.inlineLocales.size > 1) {
|
|---|
| 205 | throw new Error('The development server only supports localizing a single locale per build.');
|
|---|
| 206 | }
|
|---|
| 207 | await setupLocalize(locale, i18n, browserOptions, webpackConfig);
|
|---|
| 208 | }
|
|---|
| 209 | }
|
|---|
| 210 | if (transforms.webpackConfiguration) {
|
|---|
| 211 | webpackConfig = await transforms.webpackConfiguration(webpackConfig);
|
|---|
| 212 | }
|
|---|
| 213 | return {
|
|---|
| 214 | browserOptions,
|
|---|
| 215 | webpackConfig,
|
|---|
| 216 | projectRoot,
|
|---|
| 217 | locale,
|
|---|
| 218 | };
|
|---|
| 219 | }
|
|---|
| 220 | return rxjs_1.from(setup()).pipe(operators_1.switchMap(({ browserOptions, webpackConfig, projectRoot, locale }) => {
|
|---|
| 221 | if (browserOptions.index) {
|
|---|
| 222 | const { scripts = [], styles = [], baseHref, tsConfig } = browserOptions;
|
|---|
| 223 | const { options: compilerOptions } = read_tsconfig_1.readTsconfig(tsConfig, workspaceRoot);
|
|---|
| 224 | const target = compilerOptions.target || ts.ScriptTarget.ES5;
|
|---|
| 225 | const buildBrowserFeatures = new utils_1.BuildBrowserFeatures(projectRoot);
|
|---|
| 226 | const entrypoints = package_chunk_sort_1.generateEntryPoints({ scripts, styles });
|
|---|
| 227 | const moduleEntrypoints = buildBrowserFeatures.isDifferentialLoadingNeeded(target)
|
|---|
| 228 | ? package_chunk_sort_1.generateEntryPoints({ scripts: [], styles })
|
|---|
| 229 | : [];
|
|---|
| 230 | webpackConfig.plugins = [...(webpackConfig.plugins || [])];
|
|---|
| 231 | webpackConfig.plugins.push(new index_html_webpack_plugin_1.IndexHtmlWebpackPlugin({
|
|---|
| 232 | indexPath: path.resolve(workspaceRoot, webpack_browser_config_1.getIndexInputFile(browserOptions.index)),
|
|---|
| 233 | outputPath: webpack_browser_config_1.getIndexOutputFile(browserOptions.index),
|
|---|
| 234 | baseHref,
|
|---|
| 235 | entrypoints,
|
|---|
| 236 | moduleEntrypoints,
|
|---|
| 237 | noModuleEntrypoints: ['polyfills-es5'],
|
|---|
| 238 | deployUrl: browserOptions.deployUrl,
|
|---|
| 239 | sri: browserOptions.subresourceIntegrity,
|
|---|
| 240 | postTransform: transforms.indexHtml,
|
|---|
| 241 | optimization: utils_1.normalizeOptimization(browserOptions.optimization),
|
|---|
| 242 | WOFFSupportNeeded: !buildBrowserFeatures.isFeatureSupported('woff2'),
|
|---|
| 243 | crossOrigin: browserOptions.crossOrigin,
|
|---|
| 244 | lang: locale,
|
|---|
| 245 | }));
|
|---|
| 246 | }
|
|---|
| 247 | return build_webpack_1.runWebpackDevServer(webpackConfig, context, {
|
|---|
| 248 | logging: transforms.logging || stats_1.createWebpackLoggingCallback(browserOptions, logger),
|
|---|
| 249 | webpackFactory: require('webpack'),
|
|---|
| 250 | webpackDevServerFactory: require('webpack-dev-server'),
|
|---|
| 251 | }).pipe(operators_1.concatMap(async (buildEvent, index) => {
|
|---|
| 252 | var _a;
|
|---|
| 253 | // Resolve serve address.
|
|---|
| 254 | const serverAddress = url.format({
|
|---|
| 255 | protocol: options.ssl ? 'https' : 'http',
|
|---|
| 256 | hostname: options.host === '0.0.0.0' ? 'localhost' : options.host,
|
|---|
| 257 | pathname: (_a = webpackConfig.devServer) === null || _a === void 0 ? void 0 : _a.publicPath,
|
|---|
| 258 | port: buildEvent.port,
|
|---|
| 259 | });
|
|---|
| 260 | if (index === 0) {
|
|---|
| 261 | logger.info('\n' +
|
|---|
| 262 | core_1.tags.oneLine `
|
|---|
| 263 | **
|
|---|
| 264 | Angular Live Development Server is listening on ${options.host}:${buildEvent.port},
|
|---|
| 265 | open your browser on ${serverAddress}
|
|---|
| 266 | **
|
|---|
| 267 | ` +
|
|---|
| 268 | '\n');
|
|---|
| 269 | if (options.open) {
|
|---|
| 270 | const open = (await Promise.resolve().then(() => __importStar(require('open')))).default;
|
|---|
| 271 | await open(serverAddress);
|
|---|
| 272 | }
|
|---|
| 273 | }
|
|---|
| 274 | if (buildEvent.success) {
|
|---|
| 275 | logger.info(`\n${color_1.colors.greenBright(color_1.colors.symbols.check)} Compiled successfully.`);
|
|---|
| 276 | }
|
|---|
| 277 | else {
|
|---|
| 278 | logger.info(`\n${color_1.colors.redBright(color_1.colors.symbols.cross)} Failed to compile.`);
|
|---|
| 279 | }
|
|---|
| 280 | return { ...buildEvent, baseUrl: serverAddress };
|
|---|
| 281 | }));
|
|---|
| 282 | }));
|
|---|
| 283 | }
|
|---|
| 284 | exports.serveWebpackBrowser = serveWebpackBrowser;
|
|---|
| 285 | async function setupLocalize(locale, i18n, browserOptions, webpackConfig) {
|
|---|
| 286 | var _a;
|
|---|
| 287 | const localeDescription = i18n.locales[locale];
|
|---|
| 288 | // Modify main entrypoint to include locale data
|
|---|
| 289 | if ((localeDescription === null || localeDescription === void 0 ? void 0 : localeDescription.dataPath) &&
|
|---|
| 290 | typeof webpackConfig.entry === 'object' &&
|
|---|
| 291 | !Array.isArray(webpackConfig.entry) &&
|
|---|
| 292 | webpackConfig.entry['main']) {
|
|---|
| 293 | if (Array.isArray(webpackConfig.entry['main'])) {
|
|---|
| 294 | webpackConfig.entry['main'].unshift(localeDescription.dataPath);
|
|---|
| 295 | }
|
|---|
| 296 | else {
|
|---|
| 297 | webpackConfig.entry['main'] = [
|
|---|
| 298 | localeDescription.dataPath,
|
|---|
| 299 | webpackConfig.entry['main'],
|
|---|
| 300 | ];
|
|---|
| 301 | }
|
|---|
| 302 | }
|
|---|
| 303 | let missingTranslationBehavior = browserOptions.i18nMissingTranslation || 'ignore';
|
|---|
| 304 | let translation = (localeDescription === null || localeDescription === void 0 ? void 0 : localeDescription.translation) || {};
|
|---|
| 305 | if (locale === i18n.sourceLocale) {
|
|---|
| 306 | missingTranslationBehavior = 'ignore';
|
|---|
| 307 | translation = {};
|
|---|
| 308 | }
|
|---|
| 309 | const i18nLoaderOptions = {
|
|---|
| 310 | locale,
|
|---|
| 311 | missingTranslationBehavior,
|
|---|
| 312 | translation: i18n.shouldInline ? translation : undefined,
|
|---|
| 313 | };
|
|---|
| 314 | const i18nRule = {
|
|---|
| 315 | test: /\.(?:[cm]?js|ts)$/,
|
|---|
| 316 | enforce: 'post',
|
|---|
| 317 | use: [
|
|---|
| 318 | {
|
|---|
| 319 | loader: require.resolve('../babel/webpack-loader'),
|
|---|
| 320 | options: {
|
|---|
| 321 | cacheDirectory: cache_path_1.findCachePath('babel-dev-server-i18n'),
|
|---|
| 322 | cacheIdentifier: JSON.stringify({
|
|---|
| 323 | locale,
|
|---|
| 324 | translationIntegrity: localeDescription === null || localeDescription === void 0 ? void 0 : localeDescription.files.map((file) => file.integrity),
|
|---|
| 325 | }),
|
|---|
| 326 | i18n: i18nLoaderOptions,
|
|---|
| 327 | },
|
|---|
| 328 | },
|
|---|
| 329 | ],
|
|---|
| 330 | };
|
|---|
| 331 | // Get the rules and ensure the Webpack configuration is setup properly
|
|---|
| 332 | const rules = ((_a = webpackConfig.module) === null || _a === void 0 ? void 0 : _a.rules) || [];
|
|---|
| 333 | if (!webpackConfig.module) {
|
|---|
| 334 | webpackConfig.module = { rules };
|
|---|
| 335 | }
|
|---|
| 336 | else if (!webpackConfig.module.rules) {
|
|---|
| 337 | webpackConfig.module.rules = rules;
|
|---|
| 338 | }
|
|---|
| 339 | rules.push(i18nRule);
|
|---|
| 340 | }
|
|---|
| 341 | exports.default = architect_1.createBuilder(serveWebpackBrowser);
|
|---|
