diff --git a/docs/generated/packages/angular.json b/docs/generated/packages/angular.json index 812a4f0e52..d9ed7888d8 100644 --- a/docs/generated/packages/angular.json +++ b/docs/generated/packages/angular.json @@ -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", diff --git a/docs/packages.json b/docs/packages.json index 04058e7ad7..a0a7824a0d 100644 --- a/docs/packages.json +++ b/docs/packages.json @@ -18,6 +18,7 @@ "package", "webpack-browser", "webpack-dev-server", + "webpack-server", "module-federation-dev-server", "file-server" ], diff --git a/e2e/angular-core/src/projects.test.ts b/e2e/angular-core/src/projects.test.ts index 9b519c470a..ce90019b6f 100644 --- a/e2e/angular-core/src/projects.test.ts +++ b/e2e/angular-core/src/projects.test.ts @@ -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); }); diff --git a/packages/angular/executors.json b/packages/angular/executors.json index 584473d7ba..cf942f5e76 100644 --- a/packages/angular/executors.json +++ b/packages/angular/executors.json @@ -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", diff --git a/packages/angular/executors.ts b/packages/angular/executors.ts index 1838c04267..300f451e56 100644 --- a/packages/angular/executors.ts +++ b/packages/angular/executors.ts @@ -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'; diff --git a/packages/angular/src/builders/webpack-server/schema.d.ts b/packages/angular/src/builders/webpack-server/schema.d.ts new file mode 100644 index 0000000000..f326840b9c --- /dev/null +++ b/packages/angular/src/builders/webpack-server/schema.d.ts @@ -0,0 +1,8 @@ +import { ServerBuilderOptions } from '@angular-devkit/build-angular'; + +export interface Schema extends ServerBuilderOptions { + customWebpackConfig?: { + path: string; + }; + buildLibsFromSource?: boolean; +} diff --git a/packages/angular/src/builders/webpack-server/schema.json b/packages/angular/src/builders/webpack-server/schema.json new file mode 100644 index 0000000000..8555d2b990 --- /dev/null +++ b/packages/angular/src/builders/webpack-server/schema.json @@ -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"] + } + ] + } + } +} diff --git a/packages/angular/src/builders/webpack-server/webpack-server.impl.ts b/packages/angular/src/builders/webpack-server/webpack-server.impl.ts new file mode 100644 index 0000000000..bc42e86c22 --- /dev/null +++ b/packages/angular/src/builders/webpack-server/webpack-server.impl.ts @@ -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 { + 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 { + 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( + executeWebpackServerBuilder +) as any;