@nx/angular 0.0.0-pr-22179-271588f

package/src/generators/federate-module/lib/add-path-to-ts-config.d.ts

@@ -0,0 +1,8 @@
+import { type Tree } from '@nx/devkit';
+type AddPathToTsConfigOptions = {
+    remoteName: string;
+    moduleName: string;
+    pathToFile: string;
+};
+export declare function addPathToTsConfig(tree: Tree, { remoteName, moduleName, pathToFile }: AddPathToTsConfigOptions): void;
+export {};

package/src/generators/federate-module/lib/add-path-to-ts-config.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addPathToTsConfig = void 0;
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+function addPathToTsConfig(tree, { remoteName, moduleName, pathToFile }) {
+    const rootTsConfig = (0, devkit_1.readJson)(tree, (0, js_1.getRootTsConfigPathInTree)(tree));
+    if (!rootTsConfig.compilerOptions?.paths[`${remoteName}/${moduleName}`]) {
+        (0, js_1.addTsConfigPath)(tree, `${remoteName}/${moduleName}`, [pathToFile]);
+    }
+}
+exports.addPathToTsConfig = addPathToTsConfig;

package/src/generators/federate-module/lib/add-remote.d.ts

@@ -0,0 +1,7 @@
+import type { GeneratorCallback, Tree } from '@nx/devkit';
+import { type Schema } from '../schema';
+export declare function addRemote(tree: Tree, schema: Schema): Promise<{
+    tasks: GeneratorCallback[];
+    projectRoot: any;
+    remoteName: any;
+}>;

package/src/generators/federate-module/lib/add-remote.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addRemote = void 0;
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+const test_runners_1 = require("../../../utils/test-runners");
+const remote_1 = require("../../remote/remote");
+const check_remote_exists_1 = require("./check-remote-exists");
+async function addRemote(tree, schema) {
+    const tasks = [];
+    const remote = (0, check_remote_exists_1.getRemoteIfExists)(tree, schema.remote);
+    let projectRoot, remoteName;
+    if (!remote) {
+        const remoteGeneratorCallback = await (0, remote_1.default)(tree, {
+            name: schema.remote,
+            directory: schema.remoteDirectory,
+            host: schema.host,
+            standalone: schema.standalone,
+            projectNameAndRootFormat: schema.projectNameAndRootFormat ?? 'derived',
+            unitTestRunner: schema.unitTestRunner ?? test_runners_1.UnitTestRunner.Jest,
+            e2eTestRunner: schema.e2eTestRunner ?? test_runners_1.E2eTestRunner.Cypress,
+            skipFormat: true,
+        });
+        tasks.push(remoteGeneratorCallback);
+        const { projectName, projectRoot: remoteRoot } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
+            name: schema.remote,
+            directory: schema.remoteDirectory,
+            projectType: 'application',
+            projectNameAndRootFormat: schema.projectNameAndRootFormat ?? 'derived',
+            callingGenerator: '@nx/angular:federate-module',
+        });
+        projectRoot = remoteRoot;
+        remoteName = projectName;
+    }
+    else {
+        projectRoot = remote.root;
+        remoteName = remote.name;
+    }
+    // TODO(Colum): add implicit dependency if the path points to a file in a different project
+    return {
+        tasks,
+        projectRoot,
+        remoteName,
+    };
+}
+exports.addRemote = addRemote;

package/src/generators/federate-module/lib/check-remote-exists.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export declare function getRemoteIfExists(tree: Tree, remote: string): false | import("@nx/devkit").ProjectConfiguration;

package/src/generators/federate-module/lib/check-remote-exists.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRemoteIfExists = void 0;
+const devkit_1 = require("@nx/devkit");
+function getRemoteIfExists(tree, remote) {
+    const remoteProject = getRemote(tree, remote);
+    if (!remoteProject) {
+        return false;
+    }
+    const hasModuleFederationConfig = tree.exists((0, devkit_1.joinPathFragments)(remoteProject.root, 'module-federation.config.ts')) ||
+        tree.exists((0, devkit_1.joinPathFragments)(remoteProject.root, 'module-federation.config.js'));
+    return hasModuleFederationConfig ? remoteProject : false;
+}
+exports.getRemoteIfExists = getRemoteIfExists;
+function getRemote(tree, remote) {
+    try {
+        return (0, devkit_1.readProjectConfiguration)(tree, remote);
+    }
+    catch {
+        return false;
+    }
+}

package/src/generators/federate-module/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from './add-remote';
+export * from './add-path-to-ts-config';
+export * from './add-path-to-exposes';
+export * from './add-file-to-remote-tsconfig';

package/src/generators/federate-module/lib/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./add-remote"), exports);
+tslib_1.__exportStar(require("./add-path-to-ts-config"), exports);
+tslib_1.__exportStar(require("./add-path-to-exposes"), exports);
+tslib_1.__exportStar(require("./add-file-to-remote-tsconfig"), exports);

package/src/generators/federate-module/schema.d.ts

@@ -0,0 +1,15 @@
+import { type ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+import { UnitTestRunner, E2eTestRunner } from '../utils/testing';
+
+export interface Schema {
+  name: string;
+  path: string;
+  remote: string;
+  remoteDirectory?: string;
+  host?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  unitTestRunner?: UnitTestRunner;
+  e2eTestRunner?: E2eTestRunner;
+  standalone?: boolean;
+  skipFormat?: boolean;
+}

package/src/generators/federate-module/schema.json

@@ -0,0 +1,81 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactFederateModule",
+  "title": "Federate Module",
+  "description": "Create a federated module, which is exposed by a remote and can be subsequently loaded by a host.",
+  "examples": [
+    {
+      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=my-remote-app --remoteDirectory=apps/my-remote-app",
+      "description": "Create a federated module from my-remote-app, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule."
+    }
+  ],
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "description": "The path to locate the federated module.",
+      "x-prompt": "What is the path to the module to be federated?"
+    },
+    "name": {
+      "description": "The name of the module.",
+      "type": "string",
+      "x-prompt": "What name would you like to use for the module?",
+      "pattern": "^[a-zA-Z][^:]*$",
+      "x-priority": "important"
+    },
+    "remote": {
+      "type": "string",
+      "description": "The name of the remote.",
+      "x-prompt": "What is/should the remote be named?"
+    },
+    "remoteDirectory": {
+      "description": "The directory of the new remote application if one needs to be created.",
+      "type": "string"
+    },
+    "projectNameAndRootFormat": {
+      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
+    "style": {
+      "description": "The file extension to be used for style files for the remote if one needs to be created.",
+      "type": "string",
+      "default": "css",
+      "enum": ["css", "scss", "sass", "less"]
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "unitTestRunner": {
+      "type": "string",
+      "enum": ["jest", "none"],
+      "description": "Test runner to use for unit tests of the remote if it needs to be created.",
+      "default": "jest"
+    },
+    "e2eTestRunner": {
+      "type": "string",
+      "enum": ["cypress", "none"],
+      "description": "Test runner to use for end to end (e2e) tests of the remote if it needs to be created.",
+      "default": "cypress"
+    },
+    "standalone": {
+      "description": "Whether to generate the remote application with standalone components if it needs to be created.",
+      "type": "boolean",
+      "default": true
+    },
+    "host": {
+      "type": "string",
+      "description": "The host / shell application for this remote."
+    }
+  },
+  "required": ["name", "path", "remote"],
+  "additionalProperties": false
+}

package/src/generators/host/files/common/pre-v17/src/main.server.ts__tmpl__

@@ -0,0 +1,66 @@
+import 'zone.js/dist/zone-node';
+
+import { APP_BASE_HREF } from '@angular/common';
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import * as express from 'express';
+import * as cors from 'cors';
+import { existsSync } from 'fs';
+import { join } from 'path';
+
+import<% if(standalone) { %> bootstrap <% } else { %> { AppServerModule } <% } %>from './bootstrap.server';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(): express.Express {
+  const server = express();
+  const browserBundles = join(process.cwd(), '<%= browserBundleOutput %>');
+
+  server.use(cors());
+  const indexHtml = existsSync(join(browserBundles, 'index.original.html'))
+    ? 'index.original.html'
+    : 'index';
+
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
+  server.engine(
+    'html',
+    ngExpressEngine({
+      <% if(standalone) { %>bootstrap<% } else { %>bootstrap: AppServerModule,<% } %>
+    })
+  );
+
+  server.set('view engine', 'html');
+  server.set('views', browserBundles);
+
+  // Serve static files from /browser
+  server.get(
+    '*.*',
+    express.static(browserBundles, {
+      maxAge: '1y',
+    })
+  );
+
+  // All regular routes use the Universal engine
+  server.get('*', (req, res) => {
+    // keep it async to avoid blocking the server thread
+
+    res.render(indexHtml, {
+      providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
+      req,
+    });
+  });
+
+  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}`);
+  });
+}
+
+run();
+
+<% if(standalone) { %>export default bootstrap;<% } else { %>export * from './bootstrap.server';<% } %>

package/src/generators/host/files/common/v17+/src/main.server.ts__tmpl__

@@ -0,0 +1,67 @@
+import 'zone.js/node';
+
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine } from '@angular/ssr';
+import * as express from 'express';
+import * as cors from 'cors';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import<% if(standalone) { %> bootstrap <% } else { %> { AppServerModule } <% } %>from './bootstrap.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(), '<%= browserBundleOutput %>');
+  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
+    ? join(distFolder, 'index.original.html')
+    : join(distFolder, 'index.html');
+
+  server.use(cors());
+
+  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<% if (!standalone) { %>: AppServerModule<% } %>,
+        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}`);
+  });
+}
+
+run();
+
+export default <% if (standalone) { %>bootstrap<% } else { %>AppServerModule<% } %>;

package/src/generators/host/files/js/webpack.server.config.js__tmpl__

@@ -0,0 +1,3 @@
+const { withModuleFederationForSSR } = require('@nx/angular/module-federation');
+const config = require('./module-federation.config');
+module.exports = withModuleFederationForSSR(config)

package/src/generators/host/files/ts/webpack.server.config.ts__tmpl__

@@ -0,0 +1,4 @@
+import { withModuleFederationForSSR } from '@nx/angular/module-federation';
+import config from './module-federation.config';
+
+export default withModuleFederationForSSR(config);

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

@@ -0,0 +1,5 @@
+import { Tree } from '@nx/devkit';
+import type { Schema } from './schema';
+export declare function host(tree: Tree, options: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function hostInternal(tree: Tree, schema: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
+export default host;

package/src/generators/host/host.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hostInternal = exports.host = void 0;
+const devkit_1 = require("@nx/devkit");
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+const test_runners_1 = require("../../utils/test-runners");
+const application_1 = require("../application/application");
+const remote_1 = require("../remote/remote");
+const setup_mf_1 = require("../setup-mf/setup-mf");
+const lib_1 = require("./lib");
+const add_mf_env_to_inputs_1 = require("../utils/add-mf-env-to-inputs");
+async function host(tree, options) {
+    return await hostInternal(tree, {
+        projectNameAndRootFormat: 'derived',
+        ...options,
+    });
+}
+exports.host = host;
+async function hostInternal(tree, schema) {
+    const { typescriptConfiguration = true, ...options } = schema;
+    options.standalone = options.standalone ?? true;
+    const projects = (0, devkit_1.getProjects)(tree);
+    const remotesToGenerate = [];
+    const remotesToIntegrate = [];
+    if (options.remotes && options.remotes.length > 0) {
+        options.remotes.forEach((remote) => {
+            if (!projects.has(remote)) {
+                remotesToGenerate.push(remote);
+            }
+            else {
+                remotesToIntegrate.push(remote);
+            }
+        });
+    }
+    const { projectName: hostProjectName, projectNameAndRootFormat } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
+        name: options.name,
+        projectType: 'application',
+        directory: options.directory,
+        projectNameAndRootFormat: options.projectNameAndRootFormat,
+        callingGenerator: '@nx/angular:host',
+    });
+    options.projectNameAndRootFormat = projectNameAndRootFormat;
+    const appInstallTask = await (0, application_1.default)(tree, {
+        ...options,
+        standalone: options.standalone,
+        routing: true,
+        port: 4200,
+        skipFormat: true,
+        bundler: 'webpack',
+    });
+    const skipE2E = !options.e2eTestRunner || options.e2eTestRunner === test_runners_1.E2eTestRunner.None;
+    await (0, setup_mf_1.setupMf)(tree, {
+        appName: hostProjectName,
+        mfType: 'host',
+        routing: true,
+        port: 4200,
+        remotes: remotesToIntegrate ?? [],
+        federationType: options.dynamic ? 'dynamic' : 'static',
+        skipPackageJson: options.skipPackageJson,
+        skipFormat: true,
+        skipE2E,
+        e2eProjectName: skipE2E ? undefined : `${hostProjectName}-e2e`,
+        prefix: options.prefix,
+        typescriptConfiguration,
+        standalone: options.standalone,
+        setParserOptionsProject: options.setParserOptionsProject,
+    });
+    let installTasks = [appInstallTask];
+    if (options.ssr) {
+        let ssrInstallTask = await (0, lib_1.updateSsrSetup)(tree, options, hostProjectName, typescriptConfiguration);
+        installTasks.push(ssrInstallTask);
+    }
+    for (const remote of remotesToGenerate) {
+        let remoteDirectory = options.directory;
+        if (options.projectNameAndRootFormat === 'as-provided' &&
+            options.directory) {
+            /**
+             * With the `as-provided` format, the provided directory would be the root
+             * of the host application. Append the remote name to the host parent
+             * directory to get the remote directory.
+             */
+            remoteDirectory = (0, devkit_1.joinPathFragments)(options.directory, '..', remote);
+        }
+        await (0, remote_1.default)(tree, {
+            ...options,
+            name: remote,
+            directory: remoteDirectory,
+            host: hostProjectName,
+            skipFormat: true,
+            standalone: options.standalone,
+            typescriptConfiguration,
+        });
+    }
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree);
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    return (0, devkit_1.runTasksInSerial)(...installTasks);
+}
+exports.hostInternal = hostInternal;
+exports.default = host;

package/src/generators/host/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './update-ssr-setup';

package/src/generators/host/lib/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./update-ssr-setup"), exports);

package/src/generators/host/lib/update-ssr-setup.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import type { Schema } from '../schema';
+export declare function updateSsrSetup(tree: Tree, options: Schema, appName: string, typescriptConfiguration: boolean): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/host/lib/update-ssr-setup.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateSsrSetup = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const versions_1 = require("../../../utils/versions");
+const version_utils_1 = require("../../utils/version-utils");
+async function updateSsrSetup(tree, options, appName, typescriptConfiguration) {
+    let project = (0, devkit_1.readProjectConfiguration)(tree, appName);
+    tree.rename((0, devkit_1.joinPathFragments)(project.sourceRoot, 'main.server.ts'), (0, devkit_1.joinPathFragments)(project.sourceRoot, 'bootstrap.server.ts'));
+    tree.write((0, devkit_1.joinPathFragments)(project.root, 'server.ts'), "import('./src/main.server');");
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, '../files/common', angularMajorVersion >= 17 ? 'v17+' : 'pre-v17'), project.root, {
+        appName,
+        browserBundleOutput: project.targets.build.options.outputPath,
+        standalone: options.standalone,
+        tmpl: '',
+    });
+    const pathToTemplateFiles = typescriptConfiguration ? 'ts' : 'js';
+    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, '../files', pathToTemplateFiles), project.root, {
+        tmpl: '',
+    });
+    // update project.json
+    project = (0, devkit_1.readProjectConfiguration)(tree, appName);
+    project.targets.server.executor = '@nx/angular:webpack-server';
+    project.targets.server.options.customWebpackConfig = {
+        path: (0, devkit_1.joinPathFragments)(project.root, `webpack.server.config.${pathToTemplateFiles}`),
+    };
+    project.targets['serve-ssr'].executor =
+        '@nx/angular:module-federation-dev-ssr';
+    (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
+        cors: versions_1.corsVersion,
+        '@module-federation/node': versions_1.moduleFederationNodeVersion,
+    }, {
+        '@types/cors': versions_1.typesCorsVersion,
+    });
+    return installTask;
+}
+exports.updateSsrSetup = updateSsrSetup;

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

@@ -0,0 +1,33 @@
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+import type { Linter } from '@nx/eslint';
+import type { E2eTestRunner, UnitTestRunner } from '../../utils/test-runners';
+import type { Styles } from '../utils/types';
+
+export interface Schema {
+  name: string;
+  remotes?: string[];
+  dynamic?: boolean;
+  setParserOptionsProject?: boolean;
+  skipPackageJson?: boolean;
+  skipPostInstall?: boolean;
+  addTailwind?: boolean;
+  prefix?: string;
+  style?: Styles;
+  skipTests?: boolean;
+  directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  tags?: string;
+  linter?: Linter;
+  unitTestRunner?: UnitTestRunner;
+  e2eTestRunner?: E2eTestRunner;
+  backendProject?: string;
+  strict?: boolean;
+  standaloneConfig?: boolean;
+  inlineStyle?: boolean;
+  inlineTemplate?: boolean;
+  viewEncapsulation?: 'Emulated' | 'Native' | 'None';
+  skipFormat?: boolean;
+  standalone?: boolean;
+  ssr?: boolean;
+  typescriptConfiguration?: boolean;
+}