diff --git a/docs/generated/packages/angular.json b/docs/generated/packages/angular.json index 589927eab5..80996b41c7 100644 --- a/docs/generated/packages/angular.json +++ b/docs/generated/packages/angular.json @@ -3165,13 +3165,13 @@ "path": "/packages/angular/src/builders/webpack-browser/schema.json" }, { - "name": "webpack-server", - "implementation": "/packages/angular/src/builders/webpack-server/webpack-server.impl.ts", + "name": "webpack-dev-server", + "implementation": "/packages/angular/src/builders/webpack-dev-server/webpack-dev-server.impl.ts", "schema": { "$schema": "http://json-schema.org/draft-07/schema", - "title": "Schema for Webpack Server", - "description": "The webpack-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.", - "examplesFile": "##### Seving an application with a custom webpack configuration\n\nThis executor should be used along with `@nrwl/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\": \"@nrwl/angular:webpack-browser\",\n \"options\": {\n ...\n \"customWebpackConfig\": {\n \"path\": \"apps/appName/webpack.config.js\"\n }\n }\n},\n\"serve\": {\n \"executor\": \"@nrwl/angular:webpack-server\",\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"appName:build:production\"\n },\n \"development\": {\n \"browserTarget\": \"appName:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\",\n}\n```\n", + "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 `@nrwl/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 `@nrwl/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\": \"@nrwl/angular:webpack-browser\",\n \"options\": {\n ...\n \"customWebpackConfig\": {\n \"path\": \"apps/appName/webpack.config.js\"\n }\n }\n},\n\"serve\": {\n \"executor\": \"@nrwl/angular:webpack-dev-server\",\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"appName:build:production\"\n },\n \"development\": {\n \"browserTarget\": \"appName:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\",\n}\n```\n", "type": "object", "presets": [ { @@ -3274,10 +3274,10 @@ "additionalProperties": false, "required": ["browserTarget"] }, - "description": "The `webpack-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 `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.", "aliases": [], "hidden": false, - "path": "/packages/angular/src/builders/webpack-server/schema.json" + "path": "/packages/angular/src/builders/webpack-dev-server/schema.json" }, { "name": "module-federation-dev-server", diff --git a/docs/packages.json b/docs/packages.json index 0c4bfa189a..05953b238e 100644 --- a/docs/packages.json +++ b/docs/packages.json @@ -17,7 +17,7 @@ "ng-packagr-lite", "package", "webpack-browser", - "webpack-server", + "webpack-dev-server", "module-federation-dev-server", "file-server" ], diff --git a/docs/shared/guides/module-federation/dynamic-mfe-angular.md b/docs/shared/guides/module-federation/dynamic-mfe-angular.md index f44e35371f..5b7082489e 100644 --- a/docs/shared/guides/module-federation/dynamic-mfe-angular.md +++ b/docs/shared/guides/module-federation/dynamic-mfe-angular.md @@ -117,7 +117,7 @@ For both applications, the generator did the following: - Moved the code that is normally in `main.ts` to `bootstrap.ts` - Changed `main.ts` to dynamically import `bootstrap.ts` _(this is required for the Module Federation to correct load versions of shared libraries)_ - Updated the `build` target in the `project.json` to use the `@nrwl/angular:webpack-browser` executor _(this is required as it supports passing a custom Webpack configuration to the Angular compiler)_ -- Updated the `serve` target to use `@nrwl/angular:webpack-server` _(this is required as we first need Webpack to build the application with our custom Webpack configuration)_ +- Updated the `serve` target to use `@nrwl/angular:webpack-dev-server` _(this is required as we first need Webpack to build the application with our custom Webpack configuration)_ The key differences reside within the configuration of the Module Federation Plugin within each application's `module-federation.config.js`. diff --git a/docs/shared/guides/use-environment-variables-in-angular.md b/docs/shared/guides/use-environment-variables-in-angular.md index 4711f90de9..23c55e0d0d 100644 --- a/docs/shared/guides/use-environment-variables-in-angular.md +++ b/docs/shared/guides/use-environment-variables-in-angular.md @@ -33,7 +33,7 @@ Next, update the `build` and `serve` targets (in `project.json` or `angular.json }, "serve": { // NOTE: use dev-server that supports custom webpack config. - "executor": "@nrwl/angular:webpack-server" + "executor": "@nrwl/angular:webpack-dev-server" // snip } } diff --git a/nx-dev/nx-dev-e2e/src/integration/packages.spec.ts b/nx-dev/nx-dev-e2e/src/integration/packages.spec.ts index 4ea8bddcdd..d5b86bcef3 100644 --- a/nx-dev/nx-dev-e2e/src/integration/packages.spec.ts +++ b/nx-dev/nx-dev-e2e/src/integration/packages.spec.ts @@ -117,8 +117,8 @@ describe('nx-dev: Packages Section', () => { path: '/packages/angular/executors/webpack-browser', }, { - title: '@nrwl/angular:webpack-server', - path: '/packages/angular/executors/webpack-server', + title: '@nrwl/angular:webpack-dev-server', + path: '/packages/angular/executors/webpack-dev-server', }, { title: '@nrwl/angular:module-federation-dev-server', diff --git a/nx-dev/nx-dev/redirect-rules.config.js b/nx-dev/nx-dev/redirect-rules.config.js index ab709657cf..7bd4234c5b 100644 --- a/nx-dev/nx-dev/redirect-rules.config.js +++ b/nx-dev/nx-dev/redirect-rules.config.js @@ -57,7 +57,9 @@ 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-server', + '/angular/webpack-server': '/packages/angular/executors/webpack-dev-server', + '/packages/angular/executors/webpack-server': + '/packages/angular/executors/webpack-dev-server', '/react/application': '/packages/react/generators/application', '/react/component': '/packages/react/generators/component', '/react/component-cypress-spec': diff --git a/packages/angular/docs/webpack-server-examples.md b/packages/angular/docs/webpack-dev-server-examples.md similarity index 93% rename from packages/angular/docs/webpack-server-examples.md rename to packages/angular/docs/webpack-dev-server-examples.md index 156893f754..d7b762150c 100644 --- a/packages/angular/docs/webpack-server-examples.md +++ b/packages/angular/docs/webpack-dev-server-examples.md @@ -15,7 +15,7 @@ Your `project.json` file should contain a `build` and `serve` target that matche } }, "serve": { - "executor": "@nrwl/angular:webpack-server", + "executor": "@nrwl/angular:webpack-dev-server", "configurations": { "production": { "browserTarget": "appName:build:production" diff --git a/packages/angular/executors.json b/packages/angular/executors.json index 844b65f3d0..584473d7ba 100644 --- a/packages/angular/executors.json +++ b/packages/angular/executors.json @@ -20,10 +20,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-server": { - "implementation": "./src/builders/webpack-server/webpack-server.impl", - "schema": "./src/builders/webpack-server/schema.json", - "description": "The `webpack-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-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." }, "module-federation-dev-server": { "implementation": "./src/builders/module-federation-dev-server/module-federation-dev-server.impl", @@ -57,10 +57,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-server": { - "implementation": "./src/builders/webpack-server/webpack-server.impl", - "schema": "./src/builders/webpack-server/schema.json", - "description": "The `webpack-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-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." }, "module-federation-dev-server": { "implementation": "./src/builders/module-federation-dev-server/module-federation-dev-server.impl", diff --git a/packages/angular/executors.ts b/packages/angular/executors.ts index 5f6b4e0667..1838c04267 100644 --- a/packages/angular/executors.ts +++ b/packages/angular/executors.ts @@ -1,6 +1,6 @@ export * from './src/builders/module-federation-dev-server/module-federation-dev-server.impl'; export * from './src/builders/webpack-browser/webpack-browser.impl'; -export * from './src/builders/webpack-server/webpack-server.impl'; +export * from './src/builders/webpack-dev-server/webpack-dev-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'; diff --git a/packages/angular/migrations.json b/packages/angular/migrations.json index 9fb8cb7ba9..31127ade85 100644 --- a/packages/angular/migrations.json +++ b/packages/angular/migrations.json @@ -173,6 +173,12 @@ "description": "Update the @angular/cli package version to ~14.2.0.", "factory": "./src/migrations/update-14-6-0/update-angular-cli" }, + "rename-webpack-server-executor": { + "cli": "nx", + "version": "15.0.0-beta.0", + "description": "Rename @nrwl/angular:webpack-server executor to @nrwl/angular:webpack-dev-server", + "factory": "./src/migrations/update-14-8-0/rename-webpack-server" + }, "switch-to-jasmine-marbles": { "cli": "nx", "version": "15.0.0-beta.0", 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 2b1b8266a1..61d4dd2eb5 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 @@ -9,7 +9,7 @@ import { scheduleTarget } from 'nx/src/adapter/ngcli-adapter'; import { BuilderContext, createBuilder } from '@angular-devkit/architect'; import { JsonObject } from '@angular-devkit/core'; import { join } from 'path'; -import { executeWebpackServerBuilder } from '../webpack-server/webpack-server.impl'; +import { executeWebpackDevServerBuilder } from '../webpack-dev-server/webpack-dev-server.impl'; import { existsSync, readFileSync } from 'fs'; import { readProjectsConfigurationFromProjectGraph } from 'nx/src/project-graph/project-graph'; @@ -193,7 +193,7 @@ export function executeModuleFederationDevServerBuilder( }); } - return executeWebpackServerBuilder(options, context); + return executeWebpackDevServerBuilder(options, context); } export default createBuilder( diff --git a/packages/angular/src/builders/webpack-server/lib/index.ts b/packages/angular/src/builders/webpack-dev-server/lib/index.ts similarity index 100% rename from packages/angular/src/builders/webpack-server/lib/index.ts rename to packages/angular/src/builders/webpack-dev-server/lib/index.ts diff --git a/packages/angular/src/builders/webpack-server/lib/normalize-options.ts b/packages/angular/src/builders/webpack-dev-server/lib/normalize-options.ts similarity index 100% rename from packages/angular/src/builders/webpack-server/lib/normalize-options.ts rename to packages/angular/src/builders/webpack-dev-server/lib/normalize-options.ts diff --git a/packages/angular/src/builders/webpack-server/schema.d.ts b/packages/angular/src/builders/webpack-dev-server/schema.d.ts similarity index 100% rename from packages/angular/src/builders/webpack-server/schema.d.ts rename to packages/angular/src/builders/webpack-dev-server/schema.d.ts diff --git a/packages/angular/src/builders/webpack-server/schema.json b/packages/angular/src/builders/webpack-dev-server/schema.json similarity index 90% rename from packages/angular/src/builders/webpack-server/schema.json rename to packages/angular/src/builders/webpack-dev-server/schema.json index 232044420a..27ed5f9f3a 100644 --- a/packages/angular/src/builders/webpack-server/schema.json +++ b/packages/angular/src/builders/webpack-dev-server/schema.json @@ -1,8 +1,8 @@ { "$schema": "http://json-schema.org/draft-07/schema", - "title": "Schema for Webpack Server", - "description": "The webpack-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.", - "examplesFile": "../../../docs/webpack-server-examples.md", + "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 `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration.", + "examplesFile": "../../../docs/webpack-dev-server-examples.md", "type": "object", "presets": [ { diff --git a/packages/angular/src/builders/webpack-server/webpack-server.impl.ts b/packages/angular/src/builders/webpack-dev-server/webpack-dev-server.impl.ts similarity index 98% rename from packages/angular/src/builders/webpack-server/webpack-server.impl.ts rename to packages/angular/src/builders/webpack-dev-server/webpack-dev-server.impl.ts index 3e03cfe529..fc8e1dd6d2 100644 --- a/packages/angular/src/builders/webpack-server/webpack-server.impl.ts +++ b/packages/angular/src/builders/webpack-dev-server/webpack-dev-server.impl.ts @@ -23,7 +23,7 @@ import { resolveCustomWebpackConfig } from '../utilities/webpack'; import { normalizeOptions } from './lib'; import type { Schema } from './schema'; -export function executeWebpackServerBuilder( +export function executeWebpackDevServerBuilder( rawOptions: Schema, context: BuilderContext ) { @@ -156,5 +156,5 @@ export function executeWebpackServerBuilder( } export default createBuilder( - executeWebpackServerBuilder + executeWebpackDevServerBuilder ) as any; 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 1d472ef966..f60a5dcdd2 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' ? '@nrwl/angular:module-federation-dev-server' - : '@nrwl/angular:webpack-server', + : '@nrwl/angular:webpack-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 8650ae872a..0c10379ccc 100644 --- a/packages/angular/src/generators/setup-mf/setup-mf.spec.ts +++ b/packages/angular/src/generators/setup-mf/setup-mf.spec.ts @@ -122,7 +122,7 @@ describe('Init MF', () => { expect(serve.executor).toEqual( type === 'host' ? '@nrwl/angular:module-federation-dev-server' - : '@nrwl/angular:webpack-server' + : '@nrwl/angular:webpack-dev-server' ); expect(build.executor).toEqual('@nrwl/angular:webpack-browser'); expect(build.options.customWebpackConfig.path).toEqual( diff --git a/packages/angular/src/migrations/update-13-2-0/update-angular-config.ts b/packages/angular/src/migrations/update-13-2-0/update-angular-config.ts index cc42930623..72e4030ddd 100644 --- a/packages/angular/src/migrations/update-13-2-0/update-angular-config.ts +++ b/packages/angular/src/migrations/update-13-2-0/update-angular-config.ts @@ -5,7 +5,7 @@ import { } from '@nrwl/devkit'; import { forEachExecutorOptions } from '@nrwl/workspace/src/utilities/executor-options-utils'; -import { Schema as WebpackServerOptions } from '../../builders/webpack-server/schema'; +import { Schema as WebpackServerOptions } from '../../builders/webpack-dev-server/schema'; import { BrowserBuilderSchema as WebpackBrowserOptions } from '../../builders/webpack-browser/webpack-browser.impl'; export default async function (tree: Tree) { diff --git a/packages/angular/src/migrations/update-14-8-0/rename-webpack-server.spec.ts b/packages/angular/src/migrations/update-14-8-0/rename-webpack-server.spec.ts new file mode 100644 index 0000000000..0fa430f21a --- /dev/null +++ b/packages/angular/src/migrations/update-14-8-0/rename-webpack-server.spec.ts @@ -0,0 +1,42 @@ +import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing'; +import { readJson, updateJson } from '@nrwl/devkit'; +import remote from '../../generators/remote/remote'; +import renameWebpackServer from './rename-webpack-server'; + +describe('renameWebpackServer', () => { + it('should rename webpack-server to webpack-dev-server correctly', async () => { + // ARRANGE + const tree = createTreeWithEmptyWorkspace(); + await remote(tree, { name: 'remote' }); + + updateJson(tree, 'apps/remote/project.json', (json) => { + json.targets.serve.executor = '@nrwl/angular:webpack-server'; + return json; + }); + + // ACT + renameWebpackServer(tree); + + // ASSERT + const serveTarget = readJson(tree, 'apps/remote/project.json').targets + .serve; + expect(serveTarget).toMatchInlineSnapshot(` + Object { + "configurations": Object { + "development": Object { + "browserTarget": "remote:build:development", + }, + "production": Object { + "browserTarget": "remote:build:production", + }, + }, + "defaultConfiguration": "development", + "executor": "@nrwl/angular:webpack-dev-server", + "options": Object { + "port": 4201, + "publicHost": "http://localhost:4201", + }, + } + `); + }); +}); diff --git a/packages/angular/src/migrations/update-14-8-0/rename-webpack-server.ts b/packages/angular/src/migrations/update-14-8-0/rename-webpack-server.ts new file mode 100644 index 0000000000..86dae9fa22 --- /dev/null +++ b/packages/angular/src/migrations/update-14-8-0/rename-webpack-server.ts @@ -0,0 +1,23 @@ +import type { Tree } from '@nrwl/devkit'; +import { getProjects, updateProjectConfiguration } from '@nrwl/devkit'; + +export default function renameWebpackServer(tree: Tree) { + const projects = getProjects(tree); + + const oldExecutorName = '@nrwl/angular:webpack-server'; + const newExecutorName = '@nrwl/angular:webpack-dev-server'; + + for (const [projectName, project] of projects.entries()) { + let stringifiedProject = JSON.stringify(project); + if (!stringifiedProject.includes(oldExecutorName)) { + continue; + } + for (const [targetName, target] of Object.entries(project.targets)) { + if (target.executor === oldExecutorName) { + target.executor = newExecutorName; + } + } + + updateProjectConfiguration(tree, projectName, project); + } +}