@nx/angular 20.8.0 → 20.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "20.8.0",
+  "version": "20.8.1",
   "private": false,
   "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, Playwright and Cypress. \n\n- Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -72,14 +72,14 @@
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "20.8.0",
-    "@nx/js": "20.8.0",
-    "@nx/eslint": "20.8.0",
-    "@nx/webpack": "20.8.0",
-    "@nx/rspack": "20.8.0",
-    "@nx/module-federation": "20.8.0",
-    "@nx/web": "20.8.0",
-    "@nx/workspace": "20.8.0",
+    "@nx/devkit": "20.8.1",
+    "@nx/js": "20.8.1",
+    "@nx/eslint": "20.8.1",
+    "@nx/webpack": "20.8.1",
+    "@nx/rspack": "20.8.1",
+    "@nx/module-federation": "20.8.1",
+    "@nx/web": "20.8.1",
+    "@nx/workspace": "20.8.1",
     "piscina": "^4.4.0"
   },
   "peerDependencies": {

package/src/generators/application/application.js

@@ -76,6 +76,12 @@ async function applicationGenerator(tree, schema) {
             skipInstall: options.skipPackageJson,
             skipFormat: true,
         });
+        if (options.ssr) {
+            (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, './files/rspack-ssr'), options.appProjectSourceRoot, {
+                pathToDistFolder: (0, devkit_1.joinPathFragments)((0, devkit_1.offsetFromRoot)(options.appProjectRoot), options.outputPath, 'browser'),
+                tmpl: '',
+            });
+        }
     }
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);

package/src/generators/application/files/rspack-ssr/server.ts__tmpl__

@@ -0,0 +1,72 @@
+import 'zone.js/node';
+
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine } from '@angular/ssr/node';
+import * as express from 'express';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import bootstrap from './main.server';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(): express.Express {
+  const server = express();
+  const distFolder = join(process.cwd(), "<%= pathToDistFolder %>");
+  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
+    ? join(distFolder, 'index.original.html')
+    : join(distFolder, 'index.html');
+
+  const commonEngine = new CommonEngine();
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get(
+    '*.*',
+    express.static(distFolder, {
+      maxAge: '1y',
+    })
+  );
+
+  // All regular routes use the Angular engine
+  server.get('*', (req, res, next) => {
+    const { protocol, originalUrl, baseUrl, headers } = req;
+
+    commonEngine
+      .render({
+        bootstrap,
+        documentFilePath: indexHtml,
+        url: `${protocol}://${headers.host}${originalUrl}`,
+        publicPath: distFolder,
+        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+      })
+      .then((html) => res.send(html))
+      .catch((err) => next(err));
+  });
+
+  return server;
+}
+
+function run(): void {
+  const port = process.env['PORT'] || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+const moduleFilename = (mainModule && mainModule.filename) || '';
+if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
+  run();
+}
+
+export default bootstrap;

package/src/generators/application/schema.d.ts

@@ -20,7 +20,6 @@ export interface Schema {
   e2eTestRunner?: E2eTestRunner;
   backendProject?: string;
   strict?: boolean;
-  standaloneConfig?: boolean;
   port?: number;
   setParserOptionsProject?: boolean;
   skipPackageJson?: boolean;

package/src/generators/application/schema.json

@@ -130,12 +130,6 @@
       "description": "Create an application with stricter type checking and build optimization options.",
       "default": true
     },
-    "standaloneConfig": {
-      "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
-      "type": "boolean",
-      "default": true,
-      "x-deprecated": "Nx only supports standaloneConfig"
-    },
     "port": {
       "type": "number",
       "description": "The port at which the remote application should be served."

package/src/generators/convert-to-rspack/convert-to-rspack.js

@@ -14,7 +14,9 @@ const enquirer_1 = require("enquirer");
 const SUPPORTED_EXECUTORS = [
     '@angular-devkit/build-angular:browser',
     '@angular-devkit/build-angular:dev-server',
+    '@angular-devkit/build-angular:server',
     '@nx/angular:webpack-browser',
+    '@nx/angular:webpack-server',
     '@nx/angular:dev-server',
     '@nx/angular:module-federation-dev-server',
 ];
@@ -22,20 +24,12 @@ const RENAMED_OPTIONS = {
     main: 'browser',
     ngswConfigPath: 'serviceWorker',
 };
+const DEFAULT_PORT = 4200;
 const REMOVED_OPTIONS = [
-    'publicHost',
-    'disableHostCheck',
-    'resourcesOutputPath',
-    'routesFile',
-    'routes',
-    'discoverRoutes',
-    'appModuleBundle',
-    'inputIndexPath',
-    'outputIndexPath',
     'buildOptimizer',
-    'deployUrl',
     'buildTarget',
     'browserTarget',
+    'publicHost',
 ];
 function normalizeFromProjectRoot(tree, path, projectRoot) {
     if (projectRoot === '.') {
@@ -256,6 +250,7 @@ async function convertToRspack(tree, schema) {
     const serveTargetNames = [];
     let customWebpackConfigPath;
     (0, validate_supported_executor_1.validateSupportedBuildExecutor)(Object.values(project.targets));
+    let projectServePort = DEFAULT_PORT;
     for (const [targetName, target] of Object.entries(project.targets)) {
         if (target.executor === '@angular-devkit/build-angular:browser' ||
             target.executor === '@nx/angular:webpack-browser') {
@@ -268,12 +263,22 @@ async function convertToRspack(tree, schema) {
             }
             buildTargetNames.push(targetName);
         }
+        else if (target.executor === '@angular-devkit/build-angular:server' ||
+            target.executor === '@nx/angular:webpack-server') {
+            createConfigOptions.ssr ??= {};
+            createConfigOptions.ssr.entry ??= normalizeFromProjectRoot(tree, target.options.main, project.root);
+            createConfigOptions.server = './src/main.server.ts';
+            buildTargetNames.push(targetName);
+        }
         else if (target.executor === '@angular-devkit/build-angular:dev-server' ||
             target.executor === '@nx/angular:dev-server' ||
             target.executor === '@nx/angular:module-federation-dev-server') {
             createConfigOptions.devServer = {};
             if (target.options) {
                 handleDevServerTargetOptions(tree, target.options, createConfigOptions.devServer, project.root);
+                if (target.options.port !== DEFAULT_PORT) {
+                    projectServePort = target.options.port;
+                }
             }
             if (target.configurations) {
                 for (const [configurationName, configuration] of Object.entries(target.configurations)) {
@@ -293,6 +298,11 @@ async function convertToRspack(tree, schema) {
     for (const targetName of [...buildTargetNames, ...serveTargetNames]) {
         delete project.targets[targetName];
     }
+    if (projectServePort !== DEFAULT_PORT) {
+        project.targets.serve ??= {};
+        project.targets.serve.options ??= {};
+        project.targets.serve.options.port = projectServePort;
+    }
     (0, devkit_1.updateProjectConfiguration)(tree, projectName, project);
     const { rspackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
     await rspackInitGenerator(tree, {

package/src/generators/convert-to-rspack/lib/create-config.js

@@ -9,7 +9,7 @@ function createConfig(tree, opts, configurationOptions = {}, existingWebpackConf
         ? Object.entries(configurationOptions)
             .map(([configurationName, configurationOptions]) => {
             return `
-      ${configurationName}: {
+      "${configurationName}": {
         options: {
           ${JSON.stringify(configurationOptions, undefined, 2).slice(1, -1)}
         }
@@ -17,6 +17,12 @@ function createConfig(tree, opts, configurationOptions = {}, existingWebpackConf
         })
             .join(',\n')
         : '';
+    const createConfigContents = `createConfig({ 
+    options: {
+      root: __dirname,
+      ${JSON.stringify(createConfigOptions, undefined, 2).slice(1, -1)}
+    }
+  }${hasConfigurations ? `, {${expandedConfigurationOptions}}` : ''});`;
     const configContents = `
   import { createConfig }from '@nx/angular-rspack';
   ${existingWebpackConfigPath
@@ -26,23 +32,14 @@ function createConfig(tree, opts, configurationOptions = {}, existingWebpackConf
             : `import webpackMerge from 'webpack-merge';`}`
         : ''}
   
-  ${existingWebpackConfigPath ? 'const baseConfig = ' : 'export default '}createConfig({ 
-    options: {
-      root: __dirname,
-      ${JSON.stringify(createConfigOptions, undefined, 2).slice(1, -1)}
-    }
-  }${hasConfigurations ? `, {${expandedConfigurationOptions}}` : ''});
   ${existingWebpackConfigPath
-        ? `
-    export default ${isExistingWebpackConfigFunction
-            ? `async function (env, argv) { 
-        const oldConfig = await baseWebpackConfig;
+        ? `export default async () => {
+        const baseConfig = await ${createConfigContents}
+        ${isExistingWebpackConfigFunction
+            ? `const oldConfig = await baseWebpackConfig;
         const browserConfig = baseConfig[0];
-        return oldConfig(browserConfig);
-        }`
-            : 'webpackMerge(baseConfig[0], baseWebpackConfig);'}
-  `
-        : ''}
-  `;
+        return oldConfig(browserConfig);`
+            : 'return webpackMerge(baseConfig[0], baseWebpackConfig);'}};`
+        : `export default ${createConfigContents}`}`;
     tree.write((0, devkit_1.joinPathFragments)(root, 'rspack.config.ts'), configContents);
 }

package/src/generators/convert-to-rspack/lib/get-custom-webpack-config.js

@@ -30,7 +30,7 @@ function convertWebpackConfigToUseNxModuleFederationPlugin(webpackConfigContents
     const withModuleFederationImportNodes = (0, tsquery_1.tsquery)(ast, 'ImportDeclaration:has(StringLiteral[value=@nx/module-federation/angular])');
     if (withModuleFederationImportNodes.length > 0) {
         const withModuleFederationImportNode = withModuleFederationImportNodes[0];
-        newWebpackConfigContents = `${webpackConfigContents.slice(0, withModuleFederationImportNode.getStart())}import { NxModuleFederationPlugin } from '@nx/module-federation/rspack';${webpackConfigContents.slice(withModuleFederationImportNode.getEnd())}`;
+        newWebpackConfigContents = `${webpackConfigContents.slice(0, withModuleFederationImportNode.getStart())}import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack';${webpackConfigContents.slice(withModuleFederationImportNode.getEnd())}`;
         ast = tsquery_1.tsquery.ast(newWebpackConfigContents);
         const exportedWithModuleFederationNodes = (0, tsquery_1.tsquery)(ast, 'ExportAssignment:has(CallExpression > Identifier[name=withModuleFederation])');
         if (exportedWithModuleFederationNodes.length > 0) {
@@ -38,9 +38,10 @@ function convertWebpackConfigToUseNxModuleFederationPlugin(webpackConfigContents
             newWebpackConfigContents = `${newWebpackConfigContents.slice(0, exportedWithModuleFederationNode.getStart())}${newWebpackConfigContents.slice(exportedWithModuleFederationNode.getEnd())}
     export default {
       plugins: [
-        new NxModuleFederationPlugin(config, {
+        new NxModuleFederationPlugin({ config }, {
           dts: false,
         }),
+        new NxModuleFederationDevServerPlugin({ config }),
       ]
     }
     `;
@@ -52,7 +53,7 @@ function convertWebpackConfigToUseNxModuleFederationPlugin(webpackConfigContents
     const withModuleFederationRequireNodes = (0, tsquery_1.tsquery)(ast, 'VariableStatement:has(CallExpression > Identifier[name=withModuleFederation], StringLiteral[value=@nx/module-federation/angular])');
     if (withModuleFederationRequireNodes.length > 0) {
         const withModuleFederationRequireNode = withModuleFederationRequireNodes[0];
-        newWebpackConfigContents = `${webpackConfigContents.slice(0, withModuleFederationRequireNode.getStart())}const { NxModuleFederationPlugin } = require('@nx/module-federation/rspack');${webpackConfigContents.slice(withModuleFederationRequireNode.getEnd())}`;
+        newWebpackConfigContents = `${webpackConfigContents.slice(0, withModuleFederationRequireNode.getStart())}const { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } = require('@nx/module-federation/rspack');${webpackConfigContents.slice(withModuleFederationRequireNode.getEnd())}`;
         ast = tsquery_1.tsquery.ast(newWebpackConfigContents);
         const exportedWithModuleFederationNodes = (0, tsquery_1.tsquery)(ast, 'ExpressionStatement:has(BinaryExpression > PropertyAccessExpression:has(Identifier[name=module], Identifier[name=exports]), CallExpression:has(Identifier[name=withModuleFederation]))');
         if (exportedWithModuleFederationNodes.length > 0) {
@@ -63,6 +64,7 @@ function convertWebpackConfigToUseNxModuleFederationPlugin(webpackConfigContents
         new NxModuleFederationPlugin({ config }, {
           dts: false,
         }),
+        new NxModuleFederationDevServerPlugin({ config }),
       ]
     }
     `;

package/src/generators/host/schema.d.ts

@@ -20,7 +20,6 @@ export interface Schema {
   e2eTestRunner?: E2eTestRunner;
   backendProject?: string;
   strict?: boolean;
-  standaloneConfig?: boolean;
   inlineStyle?: boolean;
   inlineTemplate?: boolean;
   viewEncapsulation?: 'Emulated' | 'Native' | 'None';

package/src/generators/host/schema.json

@@ -144,12 +144,6 @@
       "description": "Create an application with stricter type checking and build optimization options.",
       "default": true
     },
-    "standaloneConfig": {
-      "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
-      "type": "boolean",
-      "default": true,
-      "x-deprecated": "Nx only supports standaloneConfig"
-    },
     "setParserOptionsProject": {
       "type": "boolean",
       "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",

package/src/generators/library/lib/normalized-schema.d.ts

@@ -12,7 +12,6 @@ export interface NormalizedSchema {
         buildable?: boolean;
         publishable?: boolean;
         importPath?: string;
-        standaloneConfig?: boolean;
         spec?: boolean;
         commonModule?: boolean;
         routing?: boolean;

package/src/generators/library/schema.d.ts

@@ -12,7 +12,6 @@ export interface Schema {
   buildable?: boolean;
   publishable?: boolean;
   importPath?: string;
-  standaloneConfig?: boolean;
   spec?: boolean;
   flat?: boolean;
   commonModule?: boolean;

package/src/generators/library/schema.json

@@ -108,12 +108,6 @@
       "enum": ["eslint", "none"],
       "default": "eslint"
     },
-    "standaloneConfig": {
-      "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
-      "type": "boolean",
-      "default": true,
-      "x-deprecated": "Nx only supports standaloneConfig"
-    },
     "compilationMode": {
       "description": "Specifies the compilation mode to use. If not specified, it will default to `partial` for publishable libraries and to `full` for buildable libraries. The `full` value can not be used for publishable libraries.",
       "type": "string",

package/src/generators/remote/schema.d.ts

@@ -19,7 +19,6 @@ export interface Schema {
   e2eTestRunner?: E2eTestRunner;
   backendProject?: string;
   strict?: boolean;
-  standaloneConfig?: boolean;
   inlineStyle?: boolean;
   inlineTemplate?: boolean;
   viewEncapsulation?: 'Emulated' | 'Native' | 'None';

package/src/generators/remote/schema.json

@@ -138,12 +138,6 @@
       "description": "Create an application with stricter type checking and build optimization options.",
       "default": true
     },
-    "standaloneConfig": {
-      "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
-      "type": "boolean",
-      "default": true,
-      "x-deprecated": "Nx only supports standaloneConfig"
-    },
     "setParserOptionsProject": {
       "type": "boolean",
       "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",