feat(angular): add webpack-server builder with support for custom webpack config (#12917)

This commit is contained in:
Colum Ferry 2022-11-01 16:07:41 +00:00 committed by GitHub
parent 3c65b02c1b
commit a5d031482f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 739 additions and 0 deletions

View File

@ -3414,6 +3414,306 @@
"hidden": false,
"path": "/packages/angular/src/builders/webpack-dev-server/schema.json"
},
{
"name": "webpack-server",
"implementation": "/packages/angular/src/builders/webpack-server/webpack-server.impl.ts",
"schema": {
"version": 2,
"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 `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration and NgUniversal for SSR.",
"type": "object",
"properties": {
"main": {
"type": "string",
"description": "The full path for the main entry point to the server app, relative to the current workspace."
},
"tsConfig": {
"type": "string",
"default": "tsconfig.app.json",
"description": "The full path for the TypeScript configuration file, relative to the current workspace."
},
"inlineStyleLanguage": {
"description": "The stylesheet language to use for the application's inline component styles.",
"type": "string",
"default": "css",
"enum": ["css", "less", "sass", "scss"]
},
"stylePreprocessorOptions": {
"description": "Options to pass to style preprocessors",
"type": "object",
"properties": {
"includePaths": {
"description": "Paths to include. Paths will be resolved to project root.",
"type": "array",
"items": { "type": "string" },
"default": []
}
},
"additionalProperties": false
},
"optimization": {
"description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking and dead-code elimination. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.",
"default": true,
"x-user-analytics": "ep.ng_optimization",
"oneOf": [
{
"type": "object",
"properties": {
"scripts": {
"type": "boolean",
"description": "Enables optimization of the scripts output.",
"default": true
},
"styles": {
"type": "boolean",
"description": "Enables optimization of the styles output.",
"default": true
}
},
"additionalProperties": false
},
{ "type": "boolean" }
]
},
"fileReplacements": {
"description": "Replace compilation source files with other compilation source files in the build.",
"type": "array",
"items": {
"oneOf": [
{
"type": "object",
"properties": {
"src": {
"type": "string",
"pattern": "\\.(([cm]?j|t)sx?|json)$"
},
"replaceWith": {
"type": "string",
"pattern": "\\.(([cm]?j|t)sx?|json)$"
}
},
"additionalProperties": false,
"required": ["src", "replaceWith"]
},
{
"type": "object",
"properties": {
"replace": {
"type": "string",
"pattern": "\\.(([cm]?j|t)sx?|json)$"
},
"with": {
"type": "string",
"pattern": "\\.(([cm]?j|t)sx?|json)$"
}
},
"additionalProperties": false,
"required": ["replace", "with"]
}
]
},
"default": []
},
"outputPath": {
"type": "string",
"description": "The full path for the new output directory, relative to the current workspace.\n\nBy default, writes output to a folder named dist/ in the current project."
},
"resourcesOutputPath": {
"type": "string",
"description": "The path where style resources will be placed, relative to outputPath."
},
"sourceMap": {
"description": "Output source maps for scripts and styles. For more information, see https://angular.io/guide/workspace-config#source-map-configuration.",
"default": false,
"oneOf": [
{
"type": "object",
"properties": {
"scripts": {
"type": "boolean",
"description": "Output source maps for all scripts.",
"default": true
},
"styles": {
"type": "boolean",
"description": "Output source maps for all styles.",
"default": true
},
"hidden": {
"type": "boolean",
"description": "Output source maps used for error reporting tools.",
"default": false
},
"vendor": {
"type": "boolean",
"description": "Resolve vendor packages source maps.",
"default": false
}
},
"additionalProperties": false
},
{ "type": "boolean" }
]
},
"deployUrl": {
"type": "string",
"description": "URL where files will be deployed.",
"x-deprecated": "Use \"baseHref\" browser builder option, \"APP_BASE_HREF\" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url."
},
"verbose": {
"type": "boolean",
"description": "Adds more details to output logging.",
"default": false
},
"progress": {
"type": "boolean",
"description": "Log progress to the console while building.",
"default": true
},
"i18nMissingTranslation": {
"type": "string",
"description": "How to handle missing translations for i18n.",
"enum": ["warning", "error", "ignore"],
"default": "warning"
},
"i18nDuplicateTranslation": {
"type": "string",
"description": "How to handle duplicate translations for i18n.",
"enum": ["warning", "error", "ignore"],
"default": "warning"
},
"localize": {
"description": "Translate the bundles in one or more locales.",
"oneOf": [
{ "type": "boolean", "description": "Translate all locales." },
{
"type": "array",
"description": "List of locales ID's to translate.",
"minItems": 1,
"items": {
"type": "string",
"pattern": "^[a-zA-Z]{2,3}(-[a-zA-Z]{4})?(-([a-zA-Z]{2}|[0-9]{3}))?(-[a-zA-Z]{5,8})?(-x(-[a-zA-Z0-9]{1,8})+)?$"
}
}
]
},
"outputHashing": {
"type": "string",
"description": "Define the output filename cache-busting hashing mode.",
"default": "none",
"enum": ["none", "all", "media", "bundles"]
},
"deleteOutputPath": {
"type": "boolean",
"description": "Delete the output path before building.",
"default": true
},
"preserveSymlinks": {
"type": "boolean",
"description": "Do not use the real path when resolving modules. If unset then will default to `true` if NodeJS option --preserve-symlinks is set."
},
"extractLicenses": {
"type": "boolean",
"description": "Extract all licenses in a separate file, in the case of production builds only.",
"default": true
},
"namedChunks": {
"type": "boolean",
"description": "Use file name for lazy loaded chunks.",
"default": false
},
"externalDependencies": {
"description": "Exclude the listed external dependencies from being bundled into the bundle. Instead, the created bundle relies on these dependencies to be available during runtime.",
"type": "array",
"items": { "type": "string" },
"default": []
},
"bundleDependencies": {
"description": "Which external dependencies to bundle into the bundle. By default, all of node_modules will be bundled.",
"default": true,
"oneOf": [
{ "type": "boolean" },
{ "type": "string", "enum": ["none", "all"] }
]
},
"statsJson": {
"type": "boolean",
"description": "Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.",
"default": false
},
"watch": {
"type": "boolean",
"description": "Run build when files change.",
"default": false
},
"poll": {
"type": "number",
"description": "Enable and define the file watching poll time period in milliseconds."
},
"customWebpackConfig": {
"description": "Options for additional webpack configurations.",
"type": "object",
"properties": {
"path": {
"description": "Path to additional webpack configuration, relative to the workspace root.",
"type": "string"
}
},
"additionalProperties": false
},
"buildLibsFromSource": {
"type": "boolean",
"description": "Read buildable libraries from source instead of building them separately.",
"default": true
}
},
"additionalProperties": false,
"required": ["outputPath", "main", "tsConfig"],
"definitions": {
"fileReplacement": {
"oneOf": [
{
"type": "object",
"properties": {
"src": {
"type": "string",
"pattern": "\\.(([cm]?j|t)sx?|json)$"
},
"replaceWith": {
"type": "string",
"pattern": "\\.(([cm]?j|t)sx?|json)$"
}
},
"additionalProperties": false,
"required": ["src", "replaceWith"]
},
{
"type": "object",
"properties": {
"replace": {
"type": "string",
"pattern": "\\.(([cm]?j|t)sx?|json)$"
},
"with": {
"type": "string",
"pattern": "\\.(([cm]?j|t)sx?|json)$"
}
},
"additionalProperties": false,
"required": ["replace", "with"]
}
]
}
},
"presets": []
},
"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 `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration and NgUniversal for SSR.",
"aliases": [],
"hidden": false,
"path": "/packages/angular/src/builders/webpack-server/schema.json"
},
{
"name": "module-federation-dev-server",
"implementation": "/packages/angular/src/builders/module-federation-dev-server/module-federation-dev-server.impl.ts",

View File

@ -18,6 +18,7 @@
"package",
"webpack-browser",
"webpack-dev-server",
"webpack-server",
"module-federation-dev-server",
"file-server"
],

View File

@ -362,4 +362,39 @@ describe('Angular Projects', () => {
// ASSERT
expect(buildOutput).toContain('Successfully ran target build');
}, 300000);
it('Custom Webpack Config for SSR - should serve the app correctly', async () => {
// ARRANGE
const ssrApp = uniq('app');
runCLI(`generate @nrwl/angular:app ${ssrApp} --no-interactive`);
runCLI(`generate @nrwl/angular:setup-ssr ${ssrApp} --no-interactive`);
updateProjectConfig(ssrApp, (project) => {
project.targets.server.executor = '@nrwl/angular:webpack-server';
return project;
});
// ACT
let process: ChildProcess;
try {
process = await runCommandUntil(`serve-ssr ${ssrApp}`, (output) => {
return output.includes(
`Angular Universal Live Development Server is listening on http://localhost:4200`
);
});
} catch (err) {
console.error(err);
}
// port and process cleanup
try {
if (process && process.pid) {
await promisifiedTreeKill(process.pid, 'SIGKILL');
}
} catch (err) {
expect(err).toBeFalsy();
}
}, 300000);
});

View File

@ -25,6 +25,11 @@
"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."
},
"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 `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 and NgUniversal for SSR."
},
"module-federation-dev-server": {
"implementation": "./src/builders/module-federation-dev-server/module-federation-dev-server.impl",
"schema": "./src/builders/module-federation-dev-server/schema.json",
@ -62,6 +67,11 @@
"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."
},
"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 `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 and NgUniversal for SSR."
},
"module-federation-dev-server": {
"implementation": "./src/builders/module-federation-dev-server/module-federation-dev-server.impl",
"schema": "./src/builders/module-federation-dev-server/schema.json",

View File

@ -1,6 +1,7 @@
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-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';

View File

@ -0,0 +1,8 @@
import { ServerBuilderOptions } from '@angular-devkit/build-angular';
export interface Schema extends ServerBuilderOptions {
customWebpackConfig?: {
path: string;
};
buildLibsFromSource?: boolean;
}

View File

@ -0,0 +1,276 @@
{
"version": 2,
"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 `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration and NgUniversal for SSR.",
"type": "object",
"properties": {
"main": {
"type": "string",
"description": "The full path for the main entry point to the server app, relative to the current workspace."
},
"tsConfig": {
"type": "string",
"default": "tsconfig.app.json",
"description": "The full path for the TypeScript configuration file, relative to the current workspace."
},
"inlineStyleLanguage": {
"description": "The stylesheet language to use for the application's inline component styles.",
"type": "string",
"default": "css",
"enum": ["css", "less", "sass", "scss"]
},
"stylePreprocessorOptions": {
"description": "Options to pass to style preprocessors",
"type": "object",
"properties": {
"includePaths": {
"description": "Paths to include. Paths will be resolved to project root.",
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"additionalProperties": false
},
"optimization": {
"description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking and dead-code elimination. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.",
"default": true,
"x-user-analytics": "ep.ng_optimization",
"oneOf": [
{
"type": "object",
"properties": {
"scripts": {
"type": "boolean",
"description": "Enables optimization of the scripts output.",
"default": true
},
"styles": {
"type": "boolean",
"description": "Enables optimization of the styles output.",
"default": true
}
},
"additionalProperties": false
},
{
"type": "boolean"
}
]
},
"fileReplacements": {
"description": "Replace compilation source files with other compilation source files in the build.",
"type": "array",
"items": {
"$ref": "#/definitions/fileReplacement"
},
"default": []
},
"outputPath": {
"type": "string",
"description": "The full path for the new output directory, relative to the current workspace.\n\nBy default, writes output to a folder named dist/ in the current project."
},
"resourcesOutputPath": {
"type": "string",
"description": "The path where style resources will be placed, relative to outputPath."
},
"sourceMap": {
"description": "Output source maps for scripts and styles. For more information, see https://angular.io/guide/workspace-config#source-map-configuration.",
"default": false,
"oneOf": [
{
"type": "object",
"properties": {
"scripts": {
"type": "boolean",
"description": "Output source maps for all scripts.",
"default": true
},
"styles": {
"type": "boolean",
"description": "Output source maps for all styles.",
"default": true
},
"hidden": {
"type": "boolean",
"description": "Output source maps used for error reporting tools.",
"default": false
},
"vendor": {
"type": "boolean",
"description": "Resolve vendor packages source maps.",
"default": false
}
},
"additionalProperties": false
},
{
"type": "boolean"
}
]
},
"deployUrl": {
"type": "string",
"description": "URL where files will be deployed.",
"x-deprecated": "Use \"baseHref\" browser builder option, \"APP_BASE_HREF\" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url."
},
"verbose": {
"type": "boolean",
"description": "Adds more details to output logging.",
"default": false
},
"progress": {
"type": "boolean",
"description": "Log progress to the console while building.",
"default": true
},
"i18nMissingTranslation": {
"type": "string",
"description": "How to handle missing translations for i18n.",
"enum": ["warning", "error", "ignore"],
"default": "warning"
},
"i18nDuplicateTranslation": {
"type": "string",
"description": "How to handle duplicate translations for i18n.",
"enum": ["warning", "error", "ignore"],
"default": "warning"
},
"localize": {
"description": "Translate the bundles in one or more locales.",
"oneOf": [
{
"type": "boolean",
"description": "Translate all locales."
},
{
"type": "array",
"description": "List of locales ID's to translate.",
"minItems": 1,
"items": {
"type": "string",
"pattern": "^[a-zA-Z]{2,3}(-[a-zA-Z]{4})?(-([a-zA-Z]{2}|[0-9]{3}))?(-[a-zA-Z]{5,8})?(-x(-[a-zA-Z0-9]{1,8})+)?$"
}
}
]
},
"outputHashing": {
"type": "string",
"description": "Define the output filename cache-busting hashing mode.",
"default": "none",
"enum": ["none", "all", "media", "bundles"]
},
"deleteOutputPath": {
"type": "boolean",
"description": "Delete the output path before building.",
"default": true
},
"preserveSymlinks": {
"type": "boolean",
"description": "Do not use the real path when resolving modules. If unset then will default to `true` if NodeJS option --preserve-symlinks is set."
},
"extractLicenses": {
"type": "boolean",
"description": "Extract all licenses in a separate file, in the case of production builds only.",
"default": true
},
"namedChunks": {
"type": "boolean",
"description": "Use file name for lazy loaded chunks.",
"default": false
},
"externalDependencies": {
"description": "Exclude the listed external dependencies from being bundled into the bundle. Instead, the created bundle relies on these dependencies to be available during runtime.",
"type": "array",
"items": {
"type": "string"
},
"default": []
},
"bundleDependencies": {
"description": "Which external dependencies to bundle into the bundle. By default, all of node_modules will be bundled.",
"default": true,
"oneOf": [
{
"type": "boolean"
},
{
"type": "string",
"enum": ["none", "all"]
}
]
},
"statsJson": {
"type": "boolean",
"description": "Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.",
"default": false
},
"watch": {
"type": "boolean",
"description": "Run build when files change.",
"default": false
},
"poll": {
"type": "number",
"description": "Enable and define the file watching poll time period in milliseconds."
},
"customWebpackConfig": {
"description": "Options for additional webpack configurations.",
"type": "object",
"properties": {
"path": {
"description": "Path to additional webpack configuration, relative to the workspace root.",
"type": "string"
}
},
"additionalProperties": false
},
"buildLibsFromSource": {
"type": "boolean",
"description": "Read buildable libraries from source instead of building them separately.",
"default": true
}
},
"additionalProperties": false,
"required": ["outputPath", "main", "tsConfig"],
"definitions": {
"fileReplacement": {
"oneOf": [
{
"type": "object",
"properties": {
"src": {
"type": "string",
"pattern": "\\.(([cm]?j|t)sx?|json)$"
},
"replaceWith": {
"type": "string",
"pattern": "\\.(([cm]?j|t)sx?|json)$"
}
},
"additionalProperties": false,
"required": ["src", "replaceWith"]
},
{
"type": "object",
"properties": {
"replace": {
"type": "string",
"pattern": "\\.(([cm]?j|t)sx?|json)$"
},
"with": {
"type": "string",
"pattern": "\\.(([cm]?j|t)sx?|json)$"
}
},
"additionalProperties": false,
"required": ["replace", "with"]
}
]
}
}
}

View File

@ -0,0 +1,108 @@
import { BuilderContext, createBuilder } from '@angular-devkit/architect';
import { JsonObject } from '@angular-devkit/core';
import { joinPathFragments, readCachedProjectGraph } from '@nrwl/devkit';
import {
calculateProjectDependencies,
createTmpTsConfig,
DependentBuildableProjectNode,
} from '@nrwl/workspace/src/utilities/buildable-libs-utils';
import { existsSync } from 'fs';
import { join } from 'path';
import { Observable } from 'rxjs';
import { merge } from 'webpack-merge';
import { resolveCustomWebpackConfig } from '../utilities/webpack';
import {
executeServerBuilder,
ServerBuilderOutput,
} from '@angular-devkit/build-angular';
import { Schema } from './schema';
function buildServerApp(
options: Schema,
context: BuilderContext
): Observable<ServerBuilderOutput> {
const { buildLibsFromSource, customWebpackConfig, ...delegateOptions } =
options;
// If there is a path to custom webpack config
// Invoke our own support for custom webpack config
if (customWebpackConfig && customWebpackConfig.path) {
const pathToWebpackConfig = joinPathFragments(
context.workspaceRoot,
customWebpackConfig.path
);
if (existsSync(pathToWebpackConfig)) {
return buildServerAppWithCustomWebpackConfiguration(
delegateOptions,
context,
pathToWebpackConfig
);
} else {
throw new Error(
`Custom Webpack Config File Not Found!\nTo use a custom webpack config, please ensure the path to the custom webpack file is correct: \n${pathToWebpackConfig}`
);
}
}
return executeServerBuilder(delegateOptions, context);
}
function buildServerAppWithCustomWebpackConfiguration(
options: Schema,
context: BuilderContext,
pathToWebpackConfig: string
) {
return executeServerBuilder(options, context as any, {
webpackConfiguration: async (baseWebpackConfig) => {
const customWebpackConfiguration = resolveCustomWebpackConfig(
pathToWebpackConfig,
options.tsConfig
);
// The extra Webpack configuration file can also export a Promise, for instance:
// `module.exports = new Promise(...)`. If it exports a single object, but not a Promise,
// then await will just resolve that object.
const config = await customWebpackConfiguration;
// The extra Webpack configuration file can export a synchronous or asynchronous function,
// for instance: `module.exports = async config => { ... }`.
if (typeof config === 'function') {
return config(baseWebpackConfig, options, context.target);
} else {
return merge(baseWebpackConfig, config);
}
},
});
}
export function executeWebpackServerBuilder(
options: Schema,
context: BuilderContext
): Observable<ServerBuilderOutput> {
options.buildLibsFromSource ??= true;
let dependencies: DependentBuildableProjectNode[];
if (!options.buildLibsFromSource) {
const result = calculateProjectDependencies(
readCachedProjectGraph(),
context.workspaceRoot,
context.target.project,
context.target.target,
context.target.configuration
);
dependencies = result.dependencies;
options.tsConfig = createTmpTsConfig(
join(context.workspaceRoot, options.tsConfig),
context.workspaceRoot,
result.target.data.root,
dependencies
);
process.env.NX_TSCONFIG_PATH = options.tsConfig;
}
return buildServerApp(options, context);
}
export default createBuilder<JsonObject & Schema>(
executeWebpackServerBuilder
) as any;