diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index cac49a0bc37ef..e68b5864c1c3e 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -6553,9 +6553,9 @@ "disableCollapsible": false }, { - "id": "webpack-dev-server", - "path": "/nx-api/angular/executors/webpack-dev-server", - "name": "webpack-dev-server", + "id": "dev-server", + "path": "/nx-api/angular/executors/dev-server", + "name": "dev-server", "children": [], "isExternal": false, "disableCollapsible": false diff --git a/docs/generated/manifests/nx-api.json b/docs/generated/manifests/nx-api.json index 8e9ee162ecc0c..77d6ed4786775 100644 --- a/docs/generated/manifests/nx-api.json +++ b/docs/generated/manifests/nx-api.json @@ -76,13 +76,13 @@ "path": "/nx-api/angular/executors/webpack-browser", "type": "executor" }, - "/nx-api/angular/executors/webpack-dev-server": { - "description": "The `webpack-dev-server` executor is very similar to the standard `dev-server` builder provided by the Angular Devkit. It is usually used in tandem with `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration.", - "file": "generated/packages/angular/executors/webpack-dev-server.json", + "/nx-api/angular/executors/dev-server": { + "description": "The `dev-server` executor is very similar to the standard `dev-server` builder provided by the Angular Devkit. It is usually used in tandem with `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration.", + "file": "generated/packages/angular/executors/dev-server.json", "hidden": false, - "name": "webpack-dev-server", - "originalFilePath": "/packages/angular/src/builders/webpack-dev-server/schema.json", - "path": "/nx-api/angular/executors/webpack-dev-server", + "name": "dev-server", + "originalFilePath": "/packages/angular/src/builders/dev-server/schema.json", + "path": "/nx-api/angular/executors/dev-server", "type": "executor" }, "/nx-api/angular/executors/webpack-server": { diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json index c25f789beaae9..43a57fd00c1b7 100644 --- a/docs/generated/packages-metadata.json +++ b/docs/generated/packages-metadata.json @@ -72,12 +72,12 @@ "type": "executor" }, { - "description": "The `webpack-dev-server` executor is very similar to the standard `dev-server` builder provided by the Angular Devkit. It is usually used in tandem with `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration.", - "file": "generated/packages/angular/executors/webpack-dev-server.json", + "description": "The `dev-server` executor is very similar to the standard `dev-server` builder provided by the Angular Devkit. It is usually used in tandem with `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration.", + "file": "generated/packages/angular/executors/dev-server.json", "hidden": false, - "name": "webpack-dev-server", - "originalFilePath": "/packages/angular/src/builders/webpack-dev-server/schema.json", - "path": "angular/executors/webpack-dev-server", + "name": "dev-server", + "originalFilePath": "/packages/angular/src/builders/dev-server/schema.json", + "path": "angular/executors/dev-server", "type": "executor" }, { diff --git a/docs/generated/packages/angular/executors/webpack-dev-server.json b/docs/generated/packages/angular/executors/dev-server.json similarity index 81% rename from docs/generated/packages/angular/executors/webpack-dev-server.json rename to docs/generated/packages/angular/executors/dev-server.json index 4dff6e90b9d62..8583a356e756f 100644 --- a/docs/generated/packages/angular/executors/webpack-dev-server.json +++ b/docs/generated/packages/angular/executors/dev-server.json @@ -1,13 +1,13 @@ { - "name": "webpack-dev-server", - "implementation": "/packages/angular/src/builders/webpack-dev-server/webpack-dev-server.impl.ts", + "name": "dev-server", + "implementation": "/packages/angular/src/builders/dev-server/dev-server.impl.ts", "schema": { "version": 2, "outputCapture": "direct-nodejs", "$schema": "http://json-schema.org/draft-07/schema", "title": "Schema for Webpack Dev Server", - "description": "The webpack-dev-server executor is very similar to the standard dev server builder provided by the Angular Devkit. It is usually used in tandem with `@nx/angular:webpack-browser` when your Angular application uses a custom webpack configuration.", - "examplesFile": "##### Seving an application with a custom webpack configuration\n\nThis executor should be used along with `@nx/angular:webpack-browser` to serve an application using a custom webpack configuration.\n\nYour `project.json` file should contain a `build` and `serve` target that matches the following:\n\n```json\n\"build\": {\n \"executor\": \"@nx/angular:webpack-browser\",\n \"options\": {\n ...\n \"customWebpackConfig\": {\n \"path\": \"apps/appName/webpack.config.js\"\n }\n }\n},\n\"serve\": {\n \"executor\": \"@nx/angular:webpack-dev-server\",\n \"configurations\": {\n \"production\": {\n \"buildTarget\": \"appName:build:production\"\n },\n \"development\": {\n \"buildTarget\": \"appName:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\",\n}\n```\n", + "description": "The dev-server executor is very similar to the standard dev server builder provided by the Angular Devkit. It is usually used in tandem with `@nx/angular:webpack-browser` when your Angular application uses a custom webpack configuration.", + "examplesFile": "##### Seving an application with a custom webpack configuration\n\nThis executor should be used along with `@nx/angular:webpack-browser` to serve an application using a custom webpack configuration.\n\nYour `project.json` file should contain a `build` and `serve` target that matches the following:\n\n```json\n\"build\": {\n \"executor\": \"@nx/angular:webpack-browser\",\n \"options\": {\n ...\n \"customWebpackConfig\": {\n \"path\": \"apps/appName/webpack.config.js\"\n }\n }\n},\n\"serve\": {\n \"executor\": \"@nx/angular:dev-server\",\n \"configurations\": {\n \"production\": {\n \"buildTarget\": \"appName:build:production\"\n },\n \"development\": {\n \"buildTarget\": \"appName:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\",\n}\n```\n", "type": "object", "presets": [ { "name": "Using a Different Port", "keys": ["buildTarget", "port"] } @@ -117,9 +117,9 @@ { "required": ["browserTarget"] } ] }, - "description": "The `webpack-dev-server` executor is very similar to the standard `dev-server` builder provided by the Angular Devkit. It is usually used in tandem with `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration.", + "description": "The `dev-server` executor is very similar to the standard `dev-server` builder provided by the Angular Devkit. It is usually used in tandem with `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration.", "aliases": [], "hidden": false, - "path": "/packages/angular/src/builders/webpack-dev-server/schema.json", + "path": "/packages/angular/src/builders/dev-server/schema.json", "type": "executor" } diff --git a/docs/generated/packages/angular/executors/webpack-server.json b/docs/generated/packages/angular/executors/webpack-server.json index 9dc0d2f70ba63..6456956baaef1 100644 --- a/docs/generated/packages/angular/executors/webpack-server.json +++ b/docs/generated/packages/angular/executors/webpack-server.json @@ -6,7 +6,7 @@ "outputCapture": "direct-nodejs", "$schema": "http://json-schema.org/draft-07/schema", "title": "Schema for Webpack Server", - "description": "The webpack-dev-server executor is very similar to the standard server builder provided by the Angular Devkit. It is usually used in tandem with `@nx/angular:webpack-browser` when your Angular application uses a custom webpack configuration and NgUniversal for SSR.", + "description": "The webpack-server executor is very similar to the standard server builder provided by the Angular Devkit. It is usually used in tandem with `@nx/angular:webpack-browser` when your Angular application uses a custom webpack configuration and NgUniversal for SSR.", "type": "object", "properties": { "assets": { diff --git a/docs/packages.json b/docs/packages.json index 9dcff92fd4ebe..46ad788fe4361 100644 --- a/docs/packages.json +++ b/docs/packages.json @@ -10,7 +10,7 @@ "ng-packagr-lite", "package", "webpack-browser", - "webpack-dev-server", + "dev-server", "webpack-server", "module-federation-dev-server", "module-federation-dev-ssr" diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index 43bafc12032f9..6e3e2f3afd395 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -324,7 +324,7 @@ - [package](/nx-api/angular/executors/package) - [browser-esbuild](/nx-api/angular/executors/browser-esbuild) - [webpack-browser](/nx-api/angular/executors/webpack-browser) - - [webpack-dev-server](/nx-api/angular/executors/webpack-dev-server) + - [dev-server](/nx-api/angular/executors/dev-server) - [webpack-server](/nx-api/angular/executors/webpack-server) - [module-federation-dev-server](/nx-api/angular/executors/module-federation-dev-server) - [module-federation-dev-ssr](/nx-api/angular/executors/module-federation-dev-ssr) diff --git a/nx-dev/nx-dev/redirect-rules.js b/nx-dev/nx-dev/redirect-rules.js index c6e881d1d9650..59bf29faa804c 100644 --- a/nx-dev/nx-dev/redirect-rules.js +++ b/nx-dev/nx-dev/redirect-rules.js @@ -58,9 +58,12 @@ const schemaUrls = { '/angular/ng-packagr-lite': '/packages/angular/executors/ng-packagr-lite', '/angular/package': '/packages/angular/executors/package', '/angular/webpack-browser': '/packages/angular/executors/webpack-browser', - '/angular/webpack-server': '/packages/angular/executors/webpack-dev-server', + '/angular/webpack-server': '/packages/angular/executors/dev-server', '/packages/angular/executors/webpack-server': - '/packages/angular/executors/webpack-dev-server', + '/packages/angular/executors/dev-server', + '/angular/webpack-dev-server': '/packages/angular/executors/dev-server', + '/packages/angular/executors/webpack-dev-server': + '/packages/angular/executors/dev-server', '/react/application': '/packages/react/generators/application', '/react/component': '/packages/react/generators/component', '/react/component-cypress-spec': diff --git a/packages-legacy/angular/executors.json b/packages-legacy/angular/executors.json index bfaad74b17582..20e5fede3bf11 100644 --- a/packages-legacy/angular/executors.json +++ b/packages-legacy/angular/executors.json @@ -37,10 +37,10 @@ "schema": "@nx/angular/src/builders/webpack-browser/schema.json", "description": "The `webpack-browser` executor is very similar to the standard `browser` builder provided by the Angular Devkit. It allows you to build your Angular application to a build artifact that can be hosted online. There are some key differences: \n- Supports Custom Webpack Configurations \n- Supports Incremental Building" }, - "webpack-dev-server": { - "implementation": "@nx/angular/src/builders/webpack-dev-server/webpack-dev-server.impl", - "schema": "@nx/angular/src/builders/webpack-dev-server/schema.json", - "description": "The `webpack-dev-server` executor is very similar to the standard `dev-server` builder provided by the Angular Devkit. It is usually used in tandem with `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration." + "dev-server": { + "implementation": "@nx/angular/src/builders/dev-server/dev-server.impl", + "schema": "@nx/angular/src/builders/dev-server/schema.json", + "description": "The `dev-server` executor is very similar to the standard `dev-server` builder provided by the Angular Devkit. It is usually used in tandem with `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration." }, "webpack-server": { "implementation": "@nx/angular/src/builders/webpack-server/webpack-server.impl", diff --git a/packages/angular/docs/webpack-dev-server-examples.md b/packages/angular/docs/dev-server-examples.md similarity index 93% rename from packages/angular/docs/webpack-dev-server-examples.md rename to packages/angular/docs/dev-server-examples.md index b5d599edf446d..494478c3f35fe 100644 --- a/packages/angular/docs/webpack-dev-server-examples.md +++ b/packages/angular/docs/dev-server-examples.md @@ -15,7 +15,7 @@ Your `project.json` file should contain a `build` and `serve` target that matche } }, "serve": { - "executor": "@nx/angular:webpack-dev-server", + "executor": "@nx/angular:dev-server", "configurations": { "production": { "buildTarget": "appName:build:production" diff --git a/packages/angular/executors.json b/packages/angular/executors.json index 154989ca4ec9a..0f9e9e834e365 100644 --- a/packages/angular/executors.json +++ b/packages/angular/executors.json @@ -27,10 +27,10 @@ "schema": "./src/builders/webpack-browser/schema.json", "description": "The `webpack-browser` executor is very similar to the standard `browser` builder provided by the Angular Devkit. It allows you to build your Angular application to a build artifact that can be hosted online. There are some key differences: \n- Supports Custom Webpack Configurations \n- Supports Incremental Building" }, - "webpack-dev-server": { - "implementation": "./src/builders/webpack-dev-server/webpack-dev-server.impl", - "schema": "./src/builders/webpack-dev-server/schema.json", - "description": "The `webpack-dev-server` executor is very similar to the standard `dev-server` builder provided by the Angular Devkit. It is usually used in tandem with `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration." + "dev-server": { + "implementation": "./src/builders/dev-server/dev-server.impl", + "schema": "./src/builders/dev-server/schema.json", + "description": "The `dev-server` executor is very similar to the standard `dev-server` builder provided by the Angular Devkit. It is usually used in tandem with `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration." }, "webpack-server": { "implementation": "./src/builders/webpack-server/webpack-server.impl", diff --git a/packages/angular/executors.ts b/packages/angular/executors.ts index 78a7b53f55dec..f36e6eb116ab6 100644 --- a/packages/angular/executors.ts +++ b/packages/angular/executors.ts @@ -1,9 +1,19 @@ export * from './src/builders/module-federation-dev-server/module-federation-dev-server.impl'; export * from './src/builders/module-federation-dev-ssr/module-federation-dev-ssr.impl'; export * from './src/builders/webpack-browser/webpack-browser.impl'; -export * from './src/builders/webpack-dev-server/webpack-dev-server.impl'; export * from './src/builders/webpack-server/webpack-server.impl'; export * from './src/executors/delegate-build/delegate-build.impl'; export * from './src/executors/ng-packagr-lite/ng-packagr-lite.impl'; export * from './src/executors/package/package.impl'; export * from './src/executors/browser-esbuild/browser-esbuild.impl'; + +import { executeDevServerBuilder } from './src/builders/dev-server/dev-server.impl'; + +export { + // TODO(v18): remove this alias + /** + * @deprecated Use executeDevServerBuilder instead. It will be removed in Nx v18. + */ + executeDevServerBuilder as executeWebpackDevServerBuilder, + executeDevServerBuilder, +}; diff --git a/packages/angular/migrations.json b/packages/angular/migrations.json index b2608867c9fad..4a74a094942b8 100644 --- a/packages/angular/migrations.json +++ b/packages/angular/migrations.json @@ -323,6 +323,12 @@ }, "description": "Replace the deep imports from 'zone.js/dist/zone' and 'zone.js/dist/zone-testing' with 'zone.js' and 'zone.js/testing'.", "factory": "./src/migrations/update-17-1-0/update-zone-js-deep-import" + }, + "rename-webpack-dev-server-executor": { + "cli": "nx", + "version": "17.2.0-beta.2", + "description": "Rename '@nx/angular:webpack-dev-server' executor to '@nx/angular:dev-server'", + "factory": "./src/migrations/update-17-2-0/rename-webpack-dev-server" } }, "packageJsonUpdates": { diff --git a/packages/angular/src/builders/webpack-dev-server/webpack-dev-server.impl.ts b/packages/angular/src/builders/dev-server/dev-server.impl.ts similarity index 63% rename from packages/angular/src/builders/webpack-dev-server/webpack-dev-server.impl.ts rename to packages/angular/src/builders/dev-server/dev-server.impl.ts index e981bacf7f61d..a2cf0fb59ad7c 100644 --- a/packages/angular/src/builders/webpack-dev-server/webpack-dev-server.impl.ts +++ b/packages/angular/src/builders/dev-server/dev-server.impl.ts @@ -1,7 +1,10 @@ +import type { BuilderContext } from '@angular-devkit/architect'; +import type { DevServerBuilderOptions } from '@angular-devkit/build-angular'; import { joinPathFragments, parseTargetString, readCachedProjectGraph, + type TargetConfiguration, } from '@nx/devkit'; import { getRootTsConfigPath } from '@nx/js'; import type { DependentBuildableProjectNode } from '@nx/js/src/utils/buildable-libs-utils'; @@ -11,6 +14,7 @@ import { isNpmProject } from 'nx/src/project-graph/operators'; import { readCachedProjectConfiguration } from 'nx/src/project-graph/project-graph'; import { from } from 'rxjs'; import { switchMap } from 'rxjs/operators'; +import { gte } from 'semver'; import { getInstalledAngularVersionInfo } from '../../executors/utilities/angular-version-utils'; import { createTmpTsConfigForBuildableLibs } from '../utilities/buildable-libs'; import { @@ -31,7 +35,7 @@ type BuildTargetOptions = { indexFileTransformer?: string; }; -export function executeWebpackDevServerBuilder( +export function executeDevServerBuilder( rawOptions: Schema, context: import('@angular-devkit/architect').BuilderContext ) { @@ -123,43 +127,54 @@ export function executeWebpackDevServerBuilder( buildTargetOptions.tsConfig = tsConfigPath; } - const delegateBuilderOptions = getDelegateBuilderOptions(options); + const delegateBuilderOptions = getDelegateBuilderOptions( + options, + buildTarget, + context + ); + const isUsingWebpackBuilder = ![ + '@angular-devkit/build-angular:application', + '@angular-devkit/build-angular:browser-esbuild', + '@nx/angular:browser-esbuild', + ].includes(buildTarget.executor); return from(import('@angular-devkit/build-angular')).pipe( switchMap(({ executeDevServerBuilder }) => executeDevServerBuilder(delegateBuilderOptions, context, { - webpackConfiguration: 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(',')}` - ) + 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; + } + + return mergeCustomWebpackConfig( + baseWebpackConfig, + pathToWebpackConfig, + buildTargetOptions, + context.target ); } - } - - if (!pathToWebpackConfig) { - return baseWebpackConfig; - } - - return mergeCustomWebpackConfig( - baseWebpackConfig, - pathToWebpackConfig, - buildTargetOptions, - context.target - ); - }, + : undefined, ...(pathToIndexFileTransformer ? { @@ -176,13 +191,42 @@ export function executeWebpackDevServerBuilder( } export default require('@angular-devkit/architect').createBuilder( - executeWebpackDevServerBuilder + executeDevServerBuilder ) as any; -function getDelegateBuilderOptions(options: NormalizedSchema) { - const delegatedBuilderOptions = { ...options }; - const { major } = getInstalledAngularVersionInfo(); - if (major <= 17) { +function getDelegateBuilderOptions( + options: NormalizedSchema, + buildTarget: TargetConfiguration, + context: BuilderContext +) { + const delegatedBuilderOptions: DevServerBuilderOptions = { ...options }; + const { major: angularMajorVersion, version: angularVersion } = + getInstalledAngularVersionInfo(); + + // this option was introduced in angular 16.1.0 + // https://github.com/angular/angular-cli/commit/3ede1a2cac5005f4dfbd2a62ef528a34c3793b78 + if ( + gte(angularVersion, '16.1.0') && + buildTarget.executor === '@nx/angular:browser-esbuild' + ) { + delegatedBuilderOptions.forceEsbuild = true; + + const originalLoggerWarn = context.logger.warn.bind(context.logger); + context.logger.warn = (...args) => { + // we silence the warning about forcing esbuild from third-party builders + if ( + args[0].includes( + 'Warning: Forcing the use of the esbuild-based build system with third-party builders may cause unexpected behavior and/or build failures.' + ) + ) { + return; + } + + originalLoggerWarn(...args); + }; + } + + if (angularMajorVersion <= 17) { ( delegatedBuilderOptions as unknown as SchemaWithBrowserTarget ).browserTarget = delegatedBuilderOptions.buildTarget; diff --git a/packages/angular/src/builders/webpack-dev-server/lib/index.ts b/packages/angular/src/builders/dev-server/lib/index.ts similarity index 100% rename from packages/angular/src/builders/webpack-dev-server/lib/index.ts rename to packages/angular/src/builders/dev-server/lib/index.ts diff --git a/packages/angular/src/builders/webpack-dev-server/lib/normalize-options.ts b/packages/angular/src/builders/dev-server/lib/normalize-options.ts similarity index 100% rename from packages/angular/src/builders/webpack-dev-server/lib/normalize-options.ts rename to packages/angular/src/builders/dev-server/lib/normalize-options.ts diff --git a/packages/angular/src/builders/webpack-dev-server/schema.d.ts b/packages/angular/src/builders/dev-server/schema.d.ts similarity index 100% rename from packages/angular/src/builders/webpack-dev-server/schema.d.ts rename to packages/angular/src/builders/dev-server/schema.d.ts diff --git a/packages/angular/src/builders/webpack-dev-server/schema.json b/packages/angular/src/builders/dev-server/schema.json similarity index 92% rename from packages/angular/src/builders/webpack-dev-server/schema.json rename to packages/angular/src/builders/dev-server/schema.json index 2060a6d2dfb4e..f4281250a2279 100644 --- a/packages/angular/src/builders/webpack-dev-server/schema.json +++ b/packages/angular/src/builders/dev-server/schema.json @@ -3,8 +3,8 @@ "outputCapture": "direct-nodejs", "$schema": "http://json-schema.org/draft-07/schema", "title": "Schema for Webpack Dev Server", - "description": "The webpack-dev-server executor is very similar to the standard dev server builder provided by the Angular Devkit. It is usually used in tandem with `@nx/angular:webpack-browser` when your Angular application uses a custom webpack configuration.", - "examplesFile": "../../../docs/webpack-dev-server-examples.md", + "description": "The dev-server executor is very similar to the standard dev server builder provided by the Angular Devkit. It is usually used in tandem with `@nx/angular:webpack-browser` when your Angular application uses a custom webpack configuration.", + "examplesFile": "../../../docs/dev-server-examples.md", "type": "object", "presets": [ { diff --git a/packages/angular/src/builders/module-federation-dev-server/module-federation-dev-server.impl.ts b/packages/angular/src/builders/module-federation-dev-server/module-federation-dev-server.impl.ts index bf772f6992fe7..c0e322383f13e 100644 --- a/packages/angular/src/builders/module-federation-dev-server/module-federation-dev-server.impl.ts +++ b/packages/angular/src/builders/module-federation-dev-server/module-federation-dev-server.impl.ts @@ -13,7 +13,7 @@ import { workspaceRoot, } from '@nx/devkit'; import { scheduleTarget } from 'nx/src/adapter/ngcli-adapter'; -import { executeWebpackDevServerBuilder } from '../webpack-dev-server/webpack-dev-server.impl'; +import { executeDevServerBuilder } from '../dev-server/dev-server.impl'; import { readProjectsConfigurationFromProjectGraph } from 'nx/src/project-graph/project-graph'; import { getExecutorInformation } from 'nx/src/command-line/run/executor-utils'; import { validateDevRemotes } from '../utilities/module-federation'; @@ -241,7 +241,7 @@ function startDevRemotes( export function executeModuleFederationDevServerBuilder( schema: Schema, context: import('@angular-devkit/architect').BuilderContext -): ReturnType { +): ReturnType { // Force Node to resolve to look for the nx binary that is inside node_modules const nxBin = require.resolve('nx/bin/nx'); const options = normalizeOptions(schema); @@ -285,7 +285,7 @@ export function executeModuleFederationDevServerBuilder( ) ) ); - const webpackDevServer = executeWebpackDevServerBuilder(options, context); + const webpackDevServer = executeDevServerBuilder(options, context); const currExecutor = options.static ? staticFileServer : webpackDevServer; diff --git a/packages/angular/src/builders/webpack-server/schema.json b/packages/angular/src/builders/webpack-server/schema.json index df9cfe7a1b181..f76ac4856b13e 100644 --- a/packages/angular/src/builders/webpack-server/schema.json +++ b/packages/angular/src/builders/webpack-server/schema.json @@ -3,7 +3,7 @@ "outputCapture": "direct-nodejs", "$schema": "http://json-schema.org/draft-07/schema", "title": "Schema for Webpack Server", - "description": "The webpack-dev-server executor is very similar to the standard server builder provided by the Angular Devkit. It is usually used in tandem with `@nx/angular:webpack-browser` when your Angular application uses a custom webpack configuration and NgUniversal for SSR.", + "description": "The webpack-server executor is very similar to the standard server builder provided by the Angular Devkit. It is usually used in tandem with `@nx/angular:webpack-browser` when your Angular application uses a custom webpack configuration and NgUniversal for SSR.", "type": "object", "properties": { "assets": { diff --git a/packages/angular/src/generators/setup-mf/lib/setup-serve-target.ts b/packages/angular/src/generators/setup-mf/lib/setup-serve-target.ts index 52278f4df58a2..2308567865844 100644 --- a/packages/angular/src/generators/setup-mf/lib/setup-serve-target.ts +++ b/packages/angular/src/generators/setup-mf/lib/setup-serve-target.ts @@ -13,7 +13,7 @@ export function setupServeTarget(host: Tree, options: Schema) { executor: options.mfType === 'host' ? '@nx/angular:module-federation-dev-server' - : '@nx/angular:webpack-dev-server', + : '@nx/angular:dev-server', options: { ...appConfig.targets['serve'].options, port: options.port ?? undefined, diff --git a/packages/angular/src/generators/setup-mf/setup-mf.spec.ts b/packages/angular/src/generators/setup-mf/setup-mf.spec.ts index 20c4779eb3e20..db9fb67ee9363 100644 --- a/packages/angular/src/generators/setup-mf/setup-mf.spec.ts +++ b/packages/angular/src/generators/setup-mf/setup-mf.spec.ts @@ -151,7 +151,7 @@ describe('Init MF', () => { expect(serve.executor).toEqual( type === 'host' ? '@nx/angular:module-federation-dev-server' - : '@nx/angular:webpack-dev-server' + : '@nx/angular:dev-server' ); expect(build.executor).toEqual('@nx/angular:webpack-browser'); expect(build.options.customWebpackConfig.path).toEqual( @@ -180,7 +180,7 @@ describe('Init MF', () => { expect(serve.executor).toEqual( type === 'host' ? '@nx/angular:module-federation-dev-server' - : '@nx/angular:webpack-dev-server' + : '@nx/angular:dev-server' ); expect(build.executor).toEqual('@nx/angular:webpack-browser'); expect(build.options.customWebpackConfig.path).toEqual( diff --git a/packages/angular/src/migrations/update-17-2-0/rename-webpack-dev-server.spec.ts b/packages/angular/src/migrations/update-17-2-0/rename-webpack-dev-server.spec.ts new file mode 100644 index 0000000000000..238c20c63cfc0 --- /dev/null +++ b/packages/angular/src/migrations/update-17-2-0/rename-webpack-dev-server.spec.ts @@ -0,0 +1,128 @@ +import { + addProjectConfiguration, + readJson, + readProjectConfiguration, + updateJson, + type NxJsonConfiguration, + type Tree, +} from '@nx/devkit'; +import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; +import migration from './rename-webpack-dev-server'; + +describe('rename-webpack-dev-server migration', () => { + let tree: Tree; + + beforeEach(() => { + tree = createTreeWithEmptyWorkspace(); + }); + + it('should replace @nx/angular:webpack-dev-server with @nx/angular:dev-server', async () => { + addProjectConfiguration(tree, 'app1', { + root: 'apps/app1', + projectType: 'application', + targets: { + serve: { + executor: '@nx/angular:webpack-dev-server', + options: {}, + configurations: {}, + }, + }, + }); + + await migration(tree); + + const project = readProjectConfiguration(tree, 'app1'); + expect(project.targets.serve.executor).toBe('@nx/angular:dev-server'); + }); + + it('should replace @nrwl/angular:webpack-dev-server with @nx/angular:dev-server', async () => { + addProjectConfiguration(tree, 'app1', { + root: 'apps/app1', + projectType: 'application', + targets: { + serve: { + executor: '@nrwl/angular:webpack-dev-server', + options: {}, + configurations: {}, + }, + }, + }); + + await migration(tree); + + const project = readProjectConfiguration(tree, 'app1'); + expect(project.targets.serve.executor).toBe('@nx/angular:dev-server'); + }); + + it('should replace @nx/angular:webpack-dev-server with @nx/angular:dev-server from nx.json targetDefaults keys', async () => { + updateJson(tree, 'nx.json', (json) => { + json.targetDefaults ??= {}; + json.targetDefaults['@nx/angular:webpack-dev-server'] = { + options: {}, + configurations: {}, + }; + return json; + }); + + await migration(tree); + + const nxJson = readJson(tree, 'nx.json'); + expect( + nxJson.targetDefaults['@nx/angular:webpack-dev-server'] + ).toBeUndefined(); + expect(nxJson.targetDefaults['@nx/angular:dev-server']).toBeDefined(); + }); + + it('should replace @nrwl/angular:webpack-dev-server with @nx/angular:dev-server from nx.json targetDefaults keys', async () => { + updateJson(tree, 'nx.json', (json) => { + json.targetDefaults ??= {}; + json.targetDefaults['@nrwl/angular:webpack-dev-server'] = { + options: {}, + configurations: {}, + }; + return json; + }); + + await migration(tree); + + const nxJson = readJson(tree, 'nx.json'); + expect( + nxJson.targetDefaults['@nrwl/angular:webpack-dev-server'] + ).toBeUndefined(); + expect(nxJson.targetDefaults['@nx/angular:dev-server']).toBeDefined(); + }); + + it('should replace @nx/angular:webpack-dev-server with @nx/angular:dev-server from nx.json targetDefaults value executors', async () => { + updateJson(tree, 'nx.json', (json) => { + json.targetDefaults ??= {}; + json.targetDefaults.serve = { + executor: '@nx/angular:webpack-dev-server', + options: {}, + configurations: {}, + }; + return json; + }); + + await migration(tree); + + const nxJson = readJson(tree, 'nx.json'); + expect(nxJson.targetDefaults.serve.executor).toBe('@nx/angular:dev-server'); + }); + + it('should replace @nrwl/angular:webpack-dev-server with @nx/angular:dev-server from nx.json targetDefaults value executors', async () => { + updateJson(tree, 'nx.json', (json) => { + json.targetDefaults ??= {}; + json.targetDefaults.serve = { + executor: '@nrwl/angular:webpack-dev-server', + options: {}, + configurations: {}, + }; + return json; + }); + + await migration(tree); + + const nxJson = readJson(tree, 'nx.json'); + expect(nxJson.targetDefaults.serve.executor).toBe('@nx/angular:dev-server'); + }); +}); diff --git a/packages/angular/src/migrations/update-17-2-0/rename-webpack-dev-server.ts b/packages/angular/src/migrations/update-17-2-0/rename-webpack-dev-server.ts new file mode 100644 index 0000000000000..0c3e313683fa9 --- /dev/null +++ b/packages/angular/src/migrations/update-17-2-0/rename-webpack-dev-server.ts @@ -0,0 +1,55 @@ +import { + formatFiles, + getProjects, + readNxJson, + updateNxJson, + updateProjectConfiguration, + type Tree, +} from '@nx/devkit'; + +export default async function (tree: Tree) { + const projects = getProjects(tree); + for (const [, project] of projects) { + if (project.projectType !== 'application') { + continue; + } + + for (const target of Object.values(project.targets ?? {})) { + if ( + target.executor === '@nx/angular:webpack-dev-server' || + target.executor === '@nrwl/angular:webpack-dev-server' + ) { + target.executor = '@nx/angular:dev-server'; + } + } + + updateProjectConfiguration(tree, project.name, project); + } + + // update options from nx.json target defaults + const nxJson = readNxJson(tree); + if (!nxJson.targetDefaults) { + return; + } + + for (const [targetOrExecutor, targetConfig] of Object.entries( + nxJson.targetDefaults + )) { + if (targetOrExecutor === '@nx/angular:webpack-dev-server') { + nxJson.targetDefaults['@nx/angular:dev-server'] = targetConfig; + delete nxJson.targetDefaults['@nx/angular:webpack-dev-server']; + } else if (targetOrExecutor === '@nrwl/angular:webpack-dev-server') { + nxJson.targetDefaults['@nx/angular:dev-server'] = targetConfig; + delete nxJson.targetDefaults['@nrwl/angular:webpack-dev-server']; + } else if ( + targetConfig.executor === '@nx/angular:webpack-dev-server' || + targetConfig.executor === '@nrwl/angular:webpack-dev-server' + ) { + targetConfig.executor = '@nx/angular:dev-server'; + } + } + + updateNxJson(tree, nxJson); + + await formatFiles(tree); +}