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

package/src/utils/cli-config-utils.d.ts

@@ -0,0 +1 @@
+export declare function replaceAppNameWithPath(node: string | string[] | object | unknown, appName: string, root: string): any;

package/src/utils/cli-config-utils.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceAppNameWithPath = void 0;
+function replaceAppNameWithPath(node, appName, root) {
+    if (typeof node === 'string') {
+        const matchPattern = new RegExp(`([^a-z0-9]*(${appName}))|((${appName})[^a-z0-9:]*)`, 'gi');
+        if (!!node.match(matchPattern) &&
+            node !== 'application' &&
+            node !== 'library') {
+            const r = node.replace(appName, root);
+            return r.startsWith('/apps') || r.startsWith('/libs')
+                ? r.substring(1)
+                : r;
+        }
+        else {
+            return node;
+        }
+    }
+    else if (Array.isArray(node)) {
+        return node.map((j) => replaceAppNameWithPath(j, appName, root));
+    }
+    else if (typeof node === 'object' && node) {
+        const forbiddenPropertyList = [
+            'prefix',
+            'builder',
+            'executor',
+            'browserTarget',
+            'tags',
+            'defaultConfiguration',
+            'maximumError',
+            'name',
+            'type',
+            'outputHashing',
+            'buildTarget',
+        ]; // Some of the properties should not be renamed
+        return Object.keys(node).reduce((m, c) => ((m[c] = !forbiddenPropertyList.includes(c)
+            ? replaceAppNameWithPath(node[c], appName, root)
+            : node[c]),
+            m), {});
+    }
+    else {
+        return node;
+    }
+}
+exports.replaceAppNameWithPath = replaceAppNameWithPath;

package/src/utils/file-change-recorder.d.ts

@@ -0,0 +1,17 @@
+import type { Tree } from '@nx/devkit';
+import type { Node } from 'typescript';
+export declare class FileChangeRecorder {
+    private readonly tree;
+    private readonly filePath;
+    private mutableContent;
+    get content(): string;
+    get originalContent(): string;
+    constructor(tree: Tree, filePath: string);
+    applyChanges(): void;
+    hasChanged(): boolean;
+    insertLeft(index: number, content: string): void;
+    insertRight(index: number, content: string): void;
+    remove(index: number, end: number): void;
+    replace(node: Node, content: string): void;
+    setContentToFileContent(): void;
+}

package/src/utils/file-change-recorder.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileChangeRecorder = void 0;
+const magic_string_1 = require("magic-string");
+class FileChangeRecorder {
+    get content() {
+        return this.mutableContent.toString();
+    }
+    get originalContent() {
+        return this.mutableContent.original;
+    }
+    constructor(tree, filePath) {
+        this.tree = tree;
+        this.filePath = filePath;
+        this.setContentToFileContent();
+    }
+    applyChanges() {
+        this.tree.write(this.filePath, this.mutableContent.toString());
+    }
+    hasChanged() {
+        return this.mutableContent.hasChanged();
+    }
+    insertLeft(index, content) {
+        this.mutableContent.appendLeft(index, content);
+    }
+    insertRight(index, content) {
+        this.mutableContent.appendRight(index, content);
+    }
+    remove(index, end) {
+        this.mutableContent.remove(index, end);
+    }
+    replace(node, content) {
+        this.mutableContent.overwrite(node.getStart(), node.getEnd(), content);
+    }
+    setContentToFileContent() {
+        this.mutableContent = new magic_string_1.default(this.tree.read(this.filePath, 'utf-8'));
+    }
+}
+exports.FileChangeRecorder = FileChangeRecorder;

package/src/utils/get-mf-projects.d.ts

@@ -0,0 +1,4 @@
+import type { Tree } from '@nx/devkit';
+export declare function getMFProjects(tree: Tree, { legacy }?: {
+    legacy: boolean;
+}): string[];

package/src/utils/get-mf-projects.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMFProjects = void 0;
+const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
+function _getMfProjects(tree, CUSTOM_WEBPACK_OPTION, MODULE_FEDERATION_IDENTIFIER, projects) {
+    return (opts, projectName) => {
+        const webpackPath = opts[CUSTOM_WEBPACK_OPTION]?.path;
+        if (!webpackPath || !tree.exists(webpackPath)) {
+            return;
+        }
+        const webpackConfig = tree.read(webpackPath, 'utf-8');
+        const { tsquery } = require('@phenomnomnominal/tsquery');
+        const ast = tsquery.ast(webpackConfig);
+        const moduleFederationWebpackConfig = tsquery(ast, MODULE_FEDERATION_IDENTIFIER, {
+            visitAllChildren: true,
+        });
+        if (!moduleFederationWebpackConfig ||
+            moduleFederationWebpackConfig.length === 0) {
+            return;
+        }
+        projects.push(projectName);
+    };
+}
+function getMFProjects(tree, { legacy } = { legacy: false }) {
+    const CUSTOM_WEBPACK_OPTION = 'customWebpackConfig';
+    const MODULE_FEDERATION_IDENTIFIER = legacy
+        ? 'Identifier[name=ModuleFederationPlugin]'
+        : 'Identifier[name=withModuleFederation]';
+    const projects = [];
+    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/angular:webpack-browser', _getMfProjects(tree, CUSTOM_WEBPACK_OPTION, MODULE_FEDERATION_IDENTIFIER, projects));
+    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nrwl/angular:webpack-browser', _getMfProjects(tree, CUSTOM_WEBPACK_OPTION, MODULE_FEDERATION_IDENTIFIER, projects));
+    return projects;
+}
+exports.getMFProjects = getMFProjects;

package/src/utils/mf/utils.d.ts

@@ -0,0 +1,15 @@
+import { ModuleFederationConfig, SharedLibraryConfig } from '@nx/webpack/src/utils/module-federation';
+export declare function applyDefaultEagerPackages(sharedConfig: Record<string, SharedLibraryConfig>): void;
+export declare const DEFAULT_NPM_PACKAGES_TO_AVOID: string[];
+export declare const DEFAULT_ANGULAR_PACKAGES_TO_SHARE: string[];
+export declare function getFunctionDeterminateRemoteUrl(isServer?: boolean): (remote: string) => string;
+export declare function getModuleFederationConfig(mfConfig: ModuleFederationConfig, options?: {
+    isServer: boolean;
+    determineRemoteUrl?: (remote: string) => string;
+}): Promise<{
+    sharedLibraries: import("@nx/webpack/src/utils/module-federation").SharedWorkspaceLibraryConfig;
+    sharedDependencies: {
+        [x: string]: SharedLibraryConfig;
+    };
+    mappedRemotes: Record<string, string>;
+}>;

package/src/utils/mf/utils.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getModuleFederationConfig = exports.getFunctionDeterminateRemoteUrl = exports.DEFAULT_ANGULAR_PACKAGES_TO_SHARE = exports.DEFAULT_NPM_PACKAGES_TO_AVOID = exports.applyDefaultEagerPackages = void 0;
+const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
+const devkit_1 = require("@nx/devkit");
+const project_graph_1 = require("nx/src/project-graph/project-graph");
+function applyDefaultEagerPackages(sharedConfig) {
+    const DEFAULT_PACKAGES_TO_LOAD_EAGERLY = [
+        '@angular/localize',
+        '@angular/localize/init',
+    ];
+    for (const pkg of DEFAULT_PACKAGES_TO_LOAD_EAGERLY) {
+        if (!sharedConfig[pkg]) {
+            continue;
+        }
+        sharedConfig[pkg] = { ...sharedConfig[pkg], eager: true };
+    }
+}
+exports.applyDefaultEagerPackages = applyDefaultEagerPackages;
+exports.DEFAULT_NPM_PACKAGES_TO_AVOID = [
+    'zone.js',
+    '@nx/angular/mf',
+    '@nrwl/angular/mf',
+];
+exports.DEFAULT_ANGULAR_PACKAGES_TO_SHARE = [
+    '@angular/animations',
+    '@angular/common',
+];
+function getFunctionDeterminateRemoteUrl(isServer = false) {
+    const target = 'serve';
+    const remoteEntry = isServer ? 'server/remoteEntry.js' : 'remoteEntry.mjs';
+    return function (remote) {
+        const mappedStaticRemotesFromEnv = process.env
+            .NX_MF_DEV_SERVER_STATIC_REMOTES
+            ? JSON.parse(process.env.NX_MF_DEV_SERVER_STATIC_REMOTES)
+            : undefined;
+        if (mappedStaticRemotesFromEnv && mappedStaticRemotesFromEnv[remote]) {
+            return `${mappedStaticRemotesFromEnv[remote]}/${remoteEntry}`;
+        }
+        let remoteConfiguration = null;
+        try {
+            remoteConfiguration = (0, project_graph_1.readCachedProjectConfiguration)(remote);
+        }
+        catch (e) {
+            throw new Error(`Cannot find remote "${remote}". Check that the remote name is correct in your module federation config file.\n`);
+        }
+        const serveTarget = remoteConfiguration?.targets?.[target];
+        if (!serveTarget) {
+            throw new Error(`Cannot automatically determine URL of remote (${remote}). Looked for property "host" in the project's "serve" target.\n
+      You can also use the tuple syntax in your webpack config to configure your remotes. e.g. \`remotes: [['remote1', 'http://localhost:4201']]\``);
+        }
+        const host = serveTarget.options?.host ??
+            `http${serveTarget.options.ssl ? 's' : ''}://localhost`;
+        const port = serveTarget.options?.port ?? 4201;
+        return `${host.endsWith('/') ? host.slice(0, -1) : host}:${port}/${remoteEntry}`;
+    };
+}
+exports.getFunctionDeterminateRemoteUrl = getFunctionDeterminateRemoteUrl;
+async function getModuleFederationConfig(mfConfig, options = { isServer: false }) {
+    let projectGraph;
+    try {
+        projectGraph = (0, devkit_1.readCachedProjectGraph)();
+    }
+    catch (e) {
+        projectGraph = await (0, devkit_1.createProjectGraphAsync)();
+    }
+    if (!projectGraph.nodes[mfConfig.name]?.data) {
+        throw Error(`Cannot find project "${mfConfig.name}". Check that the name is correct in module-federation.config.js`);
+    }
+    const dependencies = (0, module_federation_1.getDependentPackagesForProject)(projectGraph, mfConfig.name);
+    if (mfConfig.shared) {
+        dependencies.workspaceLibraries = dependencies.workspaceLibraries.filter((lib) => mfConfig.shared(lib.importKey, {}) !== false);
+        dependencies.npmPackages = dependencies.npmPackages.filter((pkg) => mfConfig.shared(pkg, {}) !== false);
+    }
+    const sharedLibraries = (0, module_federation_1.shareWorkspaceLibraries)(dependencies.workspaceLibraries);
+    const npmPackages = (0, module_federation_1.sharePackages)(Array.from(new Set([
+        ...exports.DEFAULT_ANGULAR_PACKAGES_TO_SHARE,
+        ...dependencies.npmPackages.filter((pkg) => !exports.DEFAULT_NPM_PACKAGES_TO_AVOID.includes(pkg)),
+    ])));
+    exports.DEFAULT_NPM_PACKAGES_TO_AVOID.forEach((pkgName) => {
+        if (pkgName in npmPackages) {
+            delete npmPackages[pkgName];
+        }
+    });
+    const sharedDependencies = {
+        ...sharedLibraries.getLibraries(projectGraph.nodes[mfConfig.name].data.root),
+        ...npmPackages,
+    };
+    applyDefaultEagerPackages(sharedDependencies);
+    (0, module_federation_1.applySharedFunction)(sharedDependencies, mfConfig.shared);
+    (0, module_federation_1.applyAdditionalShared)(sharedDependencies, mfConfig.additionalShared, projectGraph);
+    const determineRemoteUrlFn = options.determineRemoteUrl ||
+        getFunctionDeterminateRemoteUrl(options.isServer);
+    const mapRemotesFunction = options.isServer ? module_federation_1.mapRemotesForSSR : module_federation_1.mapRemotes;
+    const mappedRemotes = !mfConfig.remotes || mfConfig.remotes.length === 0
+        ? {}
+        : mapRemotesFunction(mfConfig.remotes, 'mjs', determineRemoteUrlFn);
+    return { sharedLibraries, sharedDependencies, mappedRemotes };
+}
+exports.getModuleFederationConfig = getModuleFederationConfig;

package/src/utils/mf/with-module-federation-ssr.d.ts

@@ -0,0 +1,2 @@
+import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
+export declare function withModuleFederationForSSR(options: ModuleFederationConfig): Promise<(config: any) => any>;

package/src/utils/mf/with-module-federation-ssr.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withModuleFederationForSSR = void 0;
+const utils_1 = require("./utils");
+async function withModuleFederationForSSR(options) {
+    const { sharedLibraries, sharedDependencies, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options, {
+        isServer: true,
+    });
+    return (config) => ({
+        ...(config ?? {}),
+        target: false,
+        output: {
+            ...(config.output ?? {}),
+            uniqueName: options.name,
+        },
+        optimization: {
+            ...(config.optimization ?? {}),
+            runtimeChunk: false,
+        },
+        resolve: {
+            ...(config.resolve ?? {}),
+            alias: {
+                ...(config.resolve?.alias ?? {}),
+                ...sharedLibraries.getAliases(),
+            },
+        },
+        plugins: [
+            ...(config.plugins ?? []),
+            new (require('@module-federation/node').UniversalFederationPlugin)({
+                name: options.name,
+                filename: 'remoteEntry.js',
+                exposes: options.exposes,
+                remotes: mappedRemotes,
+                shared: {
+                    ...sharedDependencies,
+                },
+                library: {
+                    type: 'commonjs-module',
+                },
+                isServer: true,
+            }, {}),
+            sharedLibraries.getReplacementPlugin(),
+        ],
+    });
+}
+exports.withModuleFederationForSSR = withModuleFederationForSSR;

package/src/utils/mf/with-module-federation.d.ts

@@ -0,0 +1,2 @@
+import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
+export declare function withModuleFederation(options: ModuleFederationConfig): Promise<(config: any) => any>;

package/src/utils/mf/with-module-federation.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withModuleFederation = void 0;
+const utils_1 = require("./utils");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+async function withModuleFederation(options) {
+    const { sharedLibraries, sharedDependencies, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options);
+    return (config) => ({
+        ...(config ?? {}),
+        output: {
+            ...(config.output ?? {}),
+            uniqueName: options.name,
+            publicPath: 'auto',
+        },
+        optimization: {
+            ...(config.optimization ?? {}),
+            runtimeChunk: false,
+        },
+        resolve: {
+            ...(config.resolve ?? {}),
+            alias: {
+                ...(config.resolve?.alias ?? {}),
+                ...sharedLibraries.getAliases(),
+            },
+        },
+        experiments: {
+            ...(config.experiments ?? {}),
+            outputModule: true,
+        },
+        plugins: [
+            ...(config.plugins ?? []),
+            new ModuleFederationPlugin({
+                name: options.name,
+                filename: 'remoteEntry.mjs',
+                exposes: options.exposes,
+                remotes: mappedRemotes,
+                shared: {
+                    ...sharedDependencies,
+                },
+                library: {
+                    type: 'module',
+                },
+            }),
+            sharedLibraries.getReplacementPlugin(),
+        ],
+    });
+}
+exports.withModuleFederation = withModuleFederation;

package/src/utils/nx-devkit/ast-utils.d.ts

@@ -0,0 +1,94 @@
+import type * as ts from 'typescript';
+import { Tree } from '@nx/devkit';
+type DecoratorName = 'Component' | 'Directive' | 'NgModule' | 'Pipe';
+/**
+ * Check if the Component, Directive or Pipe is standalone
+ * @param sourceFile TS Source File containing the token to check
+ * @param decoratorName The type of decorator to check (Component, Directive, Pipe)
+ */
+export declare function isStandalone(sourceFile: ts.SourceFile, decoratorName: DecoratorName): boolean;
+export declare function getDecoratorMetadata(source: ts.SourceFile, identifier: string, module: string): ts.Node[];
+export declare function removeFromNgModule(host: Tree, source: ts.SourceFile, modulePath: string, property: string): ts.SourceFile;
+/**
+ * Add an import to a Standalone Component
+ * @param host Virtual Tree
+ * @param source TS Source File containing the Component
+ * @param componentPath The path to the Component
+ * @param symbolName The import to add to the Component
+ */
+export declare function addImportToComponent(host: Tree, source: ts.SourceFile, componentPath: string, symbolName: string): ts.SourceFile;
+/**
+ * Add an import to a Standalone Directive
+ * @param host Virtual Tree
+ * @param source TS Source File containing the Directive
+ * @param directivePath The path to the Directive
+ * @param symbolName The import to add to the Directive
+ */
+export declare function addImportToDirective(host: Tree, source: ts.SourceFile, directivePath: string, symbolName: string): ts.SourceFile;
+/**
+ * Add an import to a Standalone Pipe
+ * @param host Virtual Tree
+ * @param source TS Source File containing the Pipe
+ * @param pipePath The path to the Pipe
+ * @param symbolName The import to add to the Pipe
+ */
+export declare function addImportToPipe(host: Tree, source: ts.SourceFile, pipePath: string, symbolName: string): ts.SourceFile;
+/**
+ * Add an import to an NgModule
+ * @param host Virtual Tree
+ * @param source TS Source File containing the NgModule
+ * @param modulePath The path to the NgModule
+ * @param symbolName The import to add to the NgModule
+ */
+export declare function addImportToModule(host: Tree, source: ts.SourceFile, modulePath: string, symbolName: string): ts.SourceFile;
+export declare function addImportToTestBed(host: Tree, source: ts.SourceFile, specPath: string, symbolName: string): ts.SourceFile;
+export declare function addDeclarationsToTestBed(host: Tree, source: ts.SourceFile, specPath: string, symbolName: string[]): ts.SourceFile;
+export declare function replaceIntoToTestBed(host: Tree, source: ts.SourceFile, specPath: string, newSymbol: string, previousSymbol: string): ts.SourceFile;
+export declare function getBootstrapComponent(source: ts.SourceFile, moduleClassName: string): string;
+export declare function addRouteToNgModule(host: Tree, ngModulePath: string, source: ts.SourceFile, route: string): ts.SourceFile;
+export declare function isNgStandaloneApp(tree: Tree, projectName: string): boolean;
+/**
+ * Add a provider to bootstrapApplication call for Standalone Applications
+ * @param tree Virtual Tree
+ * @param filePath Path to the file containing the bootstrapApplication call
+ * @param providerToAdd Provider to add
+ */
+export declare function addProviderToBootstrapApplication(tree: Tree, filePath: string, providerToAdd: string): void;
+/**
+ * Add a provider to appConfig for Standalone Applications
+ * NOTE: The appConfig must be marked with type ApplicationConfig and the providers must be declared as an array in the config
+ * @param tree Virtual Tree
+ * @param filePath Path to the file containing the bootstrapApplication call
+ * @param providerToAdd Provider to add
+ */
+export declare function addProviderToAppConfig(tree: Tree, filePath: string, providerToAdd: string): void;
+/**
+ * Add a provider to an NgModule
+ * @param host Virtual Tree
+ * @param source TS Source File containing the NgModule
+ * @param modulePath Path to the NgModule
+ * @param symbolName The provider to add
+ */
+export declare function addProviderToModule(host: Tree, source: ts.SourceFile, modulePath: string, symbolName: string): ts.SourceFile;
+/**
+ * Add a provider to a Standalone Component
+ * @param host Virtual Tree
+ * @param source TS Source File containing the Component
+ * @param componentPath Path to the Component
+ * @param symbolName The provider to add
+ */
+export declare function addProviderToComponent(host: Tree, source: ts.SourceFile, componentPath: string, symbolName: string): ts.SourceFile;
+export declare function addDeclarationToModule(host: Tree, source: ts.SourceFile, modulePath: string, symbolName: string): ts.SourceFile;
+export declare function addEntryComponents(host: Tree, source: ts.SourceFile, modulePath: string, symbolName: string): ts.SourceFile;
+export declare function readBootstrapInfo(host: Tree, app: string): {
+    moduleSpec: string;
+    modulePath: string;
+    mainPath: string;
+    moduleClassName: string;
+    moduleSource: ts.SourceFile;
+    bootstrapComponentClassName: string;
+    bootstrapComponentFileName: string;
+};
+export declare function getDecoratorPropertyValueNode(host: Tree, modulePath: string, identifier: string, property: string, module: string): ts.Node;
+export declare function getTsSourceFile(host: Tree, path: string): ts.SourceFile;
+export {};