cleanup(angular): rename webpack-server executor to webpack-dev-server (#11989)
This commit is contained in:
Colum Ferry
GitHub
parent
3c6bff2a0f
commit
8c8c29cdb5
@ -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",
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
"ng-packagr-lite",
|
||||
"package",
|
||||
"webpack-browser",
|
||||
"webpack-server",
|
||||
"webpack-dev-server",
|
||||
"module-federation-dev-server",
|
||||
"file-server"
|
||||
],
|
||||
|
||||
@ -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`.
|
||||
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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':
|
||||
|
||||
@ -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"
|
||||
@ -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",
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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<JsonObject & Schema>(
|
||||
|
||||
@ -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": [
|
||||
{
|
||||
@ -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<JsonObject & Schema>(
|
||||
executeWebpackServerBuilder
|
||||
executeWebpackDevServerBuilder
|
||||
) as any;
|
||||
@ -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,
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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",
|
||||
},
|
||||
}
|
||||
`);
|
||||
});
|
||||
});
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user