@nx/angular 0.0.0-pr-27940-4ec79a3 → 0.0.0-pr-27804-bc6b179

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "0.0.0-pr-27940-4ec79a3",
+  "version": "0.0.0-pr-27804-bc6b179",
   "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": {
@@ -22,6 +22,7 @@
     "./executors.json": "./executors.json",
     "./generators": "./generators.js",
     "./executors": "./executors.js",
+    "./plugin": "./plugin.js",
     "./tailwind": "./tailwind.js",
     "./module-federation": "./module-federation/index.js",
     "./src/utils": "./src/utils/index.js",
@@ -79,14 +80,14 @@
     "webpack-merge": "^5.8.0",
     "webpack": "^5.88.0",
     "@module-federation/enhanced": "~0.6.0",
-    "@nx/devkit": "0.0.0-pr-27940-4ec79a3",
-    "@nx/js": "0.0.0-pr-27940-4ec79a3",
-    "@nx/eslint": "0.0.0-pr-27940-4ec79a3",
-    "@nx/webpack": "0.0.0-pr-27940-4ec79a3",
-    "@nx/web": "0.0.0-pr-27940-4ec79a3",
-    "@nx/workspace": "0.0.0-pr-27940-4ec79a3",
+    "@nx/devkit": "0.0.0-pr-27804-bc6b179",
+    "@nx/js": "0.0.0-pr-27804-bc6b179",
+    "@nx/eslint": "0.0.0-pr-27804-bc6b179",
+    "@nx/webpack": "0.0.0-pr-27804-bc6b179",
+    "@nx/web": "0.0.0-pr-27804-bc6b179",
+    "@nx/workspace": "0.0.0-pr-27804-bc6b179",
     "piscina": "^4.4.0",
-    "@nrwl/angular": "0.0.0-pr-27940-4ec79a3"
+    "@nrwl/angular": "0.0.0-pr-27804-bc6b179"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 16.0.0 < 19.0.0",

package/plugin.d.ts

@@ -0,0 +1 @@
+export { createNodesV2 } from './src/plugins/plugin';

package/plugin.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNodesV2 = void 0;
+var plugin_1 = require("./src/plugins/plugin");
+Object.defineProperty(exports, "createNodesV2", { enumerable: true, get: function () { return plugin_1.createNodesV2; } });

package/src/generators/init/init.js

@@ -2,10 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.angularInitGenerator = angularInitGenerator;
 const devkit_1 = require("@nx/devkit");
+const add_plugin_1 = require("@nx/devkit/src/utils/add-plugin");
 const version_utils_1 = require("../utils/version-utils");
+const plugin_1 = require("../../plugins/plugin");
 async function angularInitGenerator(tree, options) {
     ignoreAngularCacheDirectory(tree);
     const installTask = installAngularDevkitCoreIfMissing(tree, options);
+    // For Angular inference plugin, we only want it during import since our
+    // generators do not use `angular.json`, and `nx init` should split
+    // `angular.json` into multiple `project.json` files -- as this is preferred
+    // by most folks we've talked to.
+    options.addPlugin ??= process.env.NX_RUNNING_NX_IMPORT === 'true';
+    if (options.addPlugin) {
+        await (0, add_plugin_1.addPlugin)(tree, await (0, devkit_1.createProjectGraphAsync)(), '@nx/angular/plugin', plugin_1.createNodesV2, {
+            targetNamePrefix: ['', 'angular:', 'angular-'],
+        }, options.updatePackageScripts);
+    }
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

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

@@ -3,4 +3,7 @@ export interface Schema {
   skipInstall?: boolean;
   skipPackageJson?: boolean;
   keepExistingVersions?: boolean;
+  /* internal */
+  addPlugin?: boolean;
+  updatePackageScripts?: boolean;
 }

package/src/plugins/plugin.d.ts

@@ -0,0 +1,19 @@
+import { type CreateNodesV2 } from '@nx/devkit';
+export interface AngularPluginOptions {
+    targetNamePrefix?: string;
+}
+type AngularTargetConfiguration = {
+    builder: string;
+    options?: Record<string, any>;
+    configurations?: Record<string, any>;
+    defaultConfiguration?: string;
+};
+export type AngularProjectConfiguration = {
+    projectType: 'application' | 'library';
+    root: string;
+    sourceRoot?: string;
+    architect?: Record<string, AngularTargetConfiguration>;
+    targets?: Record<string, AngularTargetConfiguration>;
+};
+export declare const createNodesV2: CreateNodesV2<AngularPluginOptions>;
+export {};

package/src/plugins/plugin.js

@@ -0,0 +1,416 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNodesV2 = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const calculate_hash_for_create_nodes_1 = require("@nx/devkit/src/utils/calculate-hash-for-create-nodes");
+const get_named_inputs_1 = require("@nx/devkit/src/utils/get-named-inputs");
+const js_1 = require("@nx/js");
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
+const posix = tslib_1.__importStar(require("node:path/posix"));
+const devkit_internals_1 = require("nx/src/devkit-internals");
+const cache_directory_1 = require("nx/src/utils/cache-directory");
+const knownExecutors = {
+    appShell: new Set(['@angular-devkit/build-angular:app-shell']),
+    build: new Set([
+        '@angular-devkit/build-angular:application',
+        '@angular/build:application',
+        '@angular-devkit/build-angular:browser-esbuild',
+        '@angular-devkit/build-angular:browser',
+        '@angular-devkit/build-angular:ng-packagr',
+    ]),
+    devServer: new Set(['@angular-devkit/build-angular:dev-server']),
+    extractI18n: new Set(['@angular-devkit/build-angular:extract-i18n']),
+    prerender: new Set([
+        '@angular-devkit/build-angular:prerender',
+        '@nguniversal/builders:prerender',
+    ]),
+    server: new Set(['@angular-devkit/build-angular:server']),
+    serveSsr: new Set([
+        '@angular-devkit/build-angular:ssr-dev-server',
+        '@nguniversal/builders:ssr-dev-server',
+    ]),
+    test: new Set(['@angular-devkit/build-angular:karma']),
+};
+const pmc = (0, devkit_1.getPackageManagerCommand)();
+function readProjectsCache(cachePath) {
+    return (0, node_fs_1.existsSync)(cachePath) ? (0, devkit_1.readJsonFile)(cachePath) : {};
+}
+function writeProjectsToCache(cachePath, results) {
+    (0, devkit_1.writeJsonFile)(cachePath, results);
+}
+exports.createNodesV2 = [
+    '**/angular.json',
+    async (configFiles, options, context) => {
+        const optionsHash = (0, devkit_internals_1.hashObject)(options);
+        const cachePath = (0, node_path_1.join)(cache_directory_1.workspaceDataDirectory, `angular-${optionsHash}.hash`);
+        const projectsCache = readProjectsCache(cachePath);
+        try {
+            return await (0, devkit_1.createNodesFromFiles)((configFile, options, context) => createNodesInternal(configFile, options, context, projectsCache), configFiles, options, context);
+        }
+        finally {
+            writeProjectsToCache(cachePath, projectsCache);
+        }
+    },
+];
+async function createNodesInternal(configFilePath, options, context, projectsCache) {
+    const angularWorkspaceRoot = (0, node_path_1.dirname)(configFilePath);
+    // Do not create a project if package.json isn't there
+    const siblingFiles = (0, node_fs_1.readdirSync)((0, node_path_1.join)(context.workspaceRoot, angularWorkspaceRoot));
+    if (!siblingFiles.includes('package.json')) {
+        return {};
+    }
+    const hash = await (0, calculate_hash_for_create_nodes_1.calculateHashForCreateNodes)(angularWorkspaceRoot, options, context, [(0, js_1.getLockFileName)((0, devkit_1.detectPackageManager)(context.workspaceRoot))]);
+    projectsCache[hash] ??= await buildAngularProjects(configFilePath, options, angularWorkspaceRoot, context);
+    return { projects: projectsCache[hash] };
+}
+async function buildAngularProjects(configFilePath, options, angularWorkspaceRoot, context) {
+    const projects = {};
+    const absoluteConfigFilePath = (0, node_path_1.join)(context.workspaceRoot, configFilePath);
+    const angularJson = (0, devkit_1.readJsonFile)(absoluteConfigFilePath);
+    const appShellTargets = [];
+    const prerenderTargets = [];
+    for (const [projectName, project] of Object.entries(angularJson.projects ?? {})) {
+        const targets = {};
+        const projectTargets = getAngularJsonProjectTargets(project);
+        if (!projectTargets) {
+            continue;
+        }
+        const namedInputs = (0, get_named_inputs_1.getNamedInputs)(project.root, context);
+        for (const [_targetName, angularTarget] of Object.entries(projectTargets)) {
+            const targetName = options?.targetNamePrefix
+                ? `${options.targetNamePrefix}${_targetName}`
+                : _targetName;
+            const externalDependencies = ['@angular/cli'];
+            targets[targetName] = {
+                command: 
+                // For targets that are also Angular CLI commands, infer the simplified form.
+                // Otherwise, use `ng run` to support non-command targets so that they will run.
+                targetName === 'build' ||
+                    targetName === 'deploy' ||
+                    targetName === 'extract-i18n' ||
+                    targetName === 'e2e' ||
+                    targetName === 'lint' ||
+                    targetName === 'serve' ||
+                    targetName === 'test'
+                    ? `ng ${targetName}`
+                    : `ng run ${projectName}:${targetName}`,
+                options: { cwd: angularWorkspaceRoot },
+                metadata: {
+                    technologies: ['angular'],
+                    description: `Run the "${targetName}" target for "${projectName}".`,
+                    help: {
+                        command: `${pmc.exec} ng run ${projectName}:${targetName} --help`,
+                        example: {},
+                    },
+                },
+            };
+            if (knownExecutors.appShell.has(angularTarget.builder)) {
+                appShellTargets.push({ target: targetName, project: projectName });
+            }
+            else if (knownExecutors.build.has(angularTarget.builder)) {
+                await updateBuildTarget(targetName, targets[targetName], angularTarget, context, angularWorkspaceRoot, project.root, namedInputs);
+            }
+            else if (knownExecutors.devServer.has(angularTarget.builder)) {
+                targets[targetName].metadata.help.example.options = { port: 4201 };
+            }
+            else if (knownExecutors.extractI18n.has(angularTarget.builder)) {
+                targets[targetName].metadata.help.example.options = { format: 'json' };
+            }
+            else if (knownExecutors.test.has(angularTarget.builder)) {
+                updateTestTarget(targets[targetName], angularTarget, context, angularWorkspaceRoot, project.root, namedInputs, externalDependencies);
+            }
+            else if (knownExecutors.server.has(angularTarget.builder)) {
+                updateServerTarget(targets[targetName], angularTarget, context, angularWorkspaceRoot, project.root, namedInputs);
+            }
+            else if (knownExecutors.serveSsr.has(angularTarget.builder)) {
+                targets[targetName].metadata.help.example.options = { port: 4201 };
+            }
+            else if (knownExecutors.prerender.has(angularTarget.builder)) {
+                prerenderTargets.push({ target: targetName, project: projectName });
+            }
+            if (targets[targetName].inputs?.length) {
+                targets[targetName].inputs.push({ externalDependencies });
+            }
+            if (angularTarget.configurations) {
+                for (const configurationName of Object.keys(angularTarget.configurations)) {
+                    targets[targetName].configurations = {
+                        ...targets[targetName].configurations,
+                        [configurationName]: {
+                            command: `ng run ${projectName}:${targetName}:${configurationName}`,
+                        },
+                    };
+                }
+            }
+            if (angularTarget.defaultConfiguration) {
+                targets[targetName].defaultConfiguration =
+                    angularTarget.defaultConfiguration;
+            }
+        }
+        projects[projectName] = {
+            projectType: project.projectType,
+            root: posix.join(angularWorkspaceRoot, project.root),
+            sourceRoot: project.sourceRoot
+                ? posix.join(angularWorkspaceRoot, project.sourceRoot)
+                : undefined,
+            targets,
+        };
+    }
+    for (const { project, target } of appShellTargets) {
+        updateAppShellTarget(project, target, projects, angularJson, angularWorkspaceRoot, context);
+    }
+    for (const { project, target } of prerenderTargets) {
+        updatePrerenderTarget(project, target, projects, angularJson);
+    }
+    return Object.entries(projects).reduce((acc, [projectName, project]) => {
+        acc[project.root] = {
+            projectType: project.projectType,
+            sourceRoot: project.sourceRoot,
+            targets: project.targets,
+        };
+        return acc;
+    }, {});
+}
+function updateAppShellTarget(projectName, targetName, projects, angularJson, angularWorkspaceRoot, context) {
+    // it must exist since we collected it when processing it
+    const target = projects[projectName].targets[targetName];
+    target.metadata.help.example.options = { route: '/some/route' };
+    const { inputs, outputs } = getBrowserAndServerTargetInputsAndOutputs(projectName, targetName, projects, angularJson);
+    const outputIndexPath = getAngularJsonProjectTargets(angularJson.projects[projectName])[targetName].options?.outputIndexPath;
+    if (outputIndexPath) {
+        const fullOutputIndexPath = (0, node_path_1.join)(context.workspaceRoot, angularWorkspaceRoot, outputIndexPath);
+        outputs.push(getOutput(fullOutputIndexPath, context.workspaceRoot, angularWorkspaceRoot, angularJson.projects[projectName].root));
+    }
+    if (!outputs.length) {
+        // no outputs were identified for the build or server target, so we don't
+        // set any Nx cache options
+        return;
+    }
+    target.cache = true;
+    target.inputs = inputs;
+    target.outputs = outputs;
+}
+async function updateBuildTarget(targetName, target, angularTarget, context, angularWorkspaceRoot, projectRoot, namedInputs) {
+    target.dependsOn = [`^${targetName}`];
+    if (angularTarget.options?.outputPath) {
+        const fullOutputPath = (0, node_path_1.join)(context.workspaceRoot, angularWorkspaceRoot, angularTarget.options.outputPath);
+        target.outputs = [
+            getOutput(fullOutputPath, context.workspaceRoot, angularWorkspaceRoot, projectRoot),
+        ];
+    }
+    else if (angularTarget.builder === '@angular-devkit/build-angular:ng-packagr') {
+        const outputs = await getNgPackagrOutputs(angularTarget, angularWorkspaceRoot, projectRoot, context);
+        if (outputs.length) {
+            target.outputs = outputs;
+        }
+    }
+    if (target.outputs?.length) {
+        // make it cacheable if we were able to identify outputs
+        target.cache = true;
+        target.inputs =
+            'production' in namedInputs
+                ? ['production', '^production']
+                : ['default', '^default'];
+    }
+    if (angularTarget.builder === '@angular-devkit/build-angular:ng-packagr') {
+        target.metadata.help.example.options = { watch: true };
+    }
+    else {
+        target.metadata.help.example.options = { localize: true };
+    }
+}
+function updateTestTarget(target, angularTarget, context, angularWorkspaceRoot, projectRoot, namedInputs, externalDependencies) {
+    target.cache = true;
+    target.inputs =
+        'production' in namedInputs
+            ? ['default', '^production']
+            : ['default', '^default'];
+    target.outputs = getKarmaTargetOutputs(angularTarget, angularWorkspaceRoot, projectRoot, context);
+    externalDependencies.push('karma');
+    target.metadata.help.example.options = { codeCoverage: true };
+}
+function updateServerTarget(target, angularTarget, context, angularWorkspaceRoot, projectRoot, namedInputs) {
+    target.metadata.help.example.options = { localize: true };
+    if (!angularTarget.options?.outputPath) {
+        // only make it cacheable if we were able to identify outputs
+        return;
+    }
+    target.cache = true;
+    target.inputs =
+        'production' in namedInputs
+            ? ['production', '^production']
+            : ['default', '^default'];
+    const fullOutputPath = (0, node_path_1.join)(context.workspaceRoot, angularWorkspaceRoot, angularTarget.options.outputPath);
+    target.outputs = [
+        getOutput(fullOutputPath, context.workspaceRoot, angularWorkspaceRoot, projectRoot),
+    ];
+}
+function updatePrerenderTarget(projectName, targetName, projects, angularJson) {
+    // it must exist since we collected it when processing it
+    const target = projects[projectName].targets[targetName];
+    target.metadata.help.example.options =
+        getAngularJsonProjectTargets(angularJson.projects[projectName])[targetName]
+            .builder === '@angular-devkit/build-angular:prerender'
+            ? { discoverRoutes: false }
+            : { guessRoutes: false };
+    const { inputs, outputs } = getBrowserAndServerTargetInputsAndOutputs(projectName, targetName, projects, angularJson);
+    if (!outputs.length) {
+        // no outputs were identified for the build or server target, so we don't
+        // set any Nx cache options
+        return;
+    }
+    target.cache = true;
+    target.inputs = inputs;
+    target.outputs = outputs;
+}
+async function getNgPackagrOutputs(target, angularWorkspaceRoot, projectRoot, context) {
+    let ngPackageJsonPath = (0, node_path_1.join)(context.workspaceRoot, angularWorkspaceRoot, target.options.project);
+    const readConfig = async (configPath) => {
+        if (!(0, node_fs_1.existsSync)(configPath)) {
+            return undefined;
+        }
+        try {
+            if (configPath.endsWith('.js')) {
+                const result = await import(configPath);
+                return result['default'] ?? result;
+            }
+            return (0, devkit_1.readJsonFile)(configPath);
+        }
+        catch { }
+        return undefined;
+    };
+    let ngPackageJson;
+    let basePath;
+    if ((0, node_fs_1.statSync)(ngPackageJsonPath).isDirectory()) {
+        basePath = ngPackageJsonPath;
+        ngPackageJson = await readConfig((0, node_path_1.join)(ngPackageJsonPath, 'ng-package.json'));
+        if (!ngPackageJson) {
+            ngPackageJson = await readConfig((0, node_path_1.join)(ngPackageJsonPath, 'ng-package.js'));
+        }
+    }
+    else {
+        basePath = (0, node_path_1.dirname)(ngPackageJsonPath);
+        ngPackageJson = await readConfig(ngPackageJsonPath);
+    }
+    if (!ngPackageJson) {
+        return [];
+    }
+    const destination = ngPackageJson.dest
+        ? (0, node_path_1.join)(basePath, ngPackageJson.dest)
+        : (0, node_path_1.join)(basePath, 'dist');
+    return [
+        getOutput(destination, context.workspaceRoot, angularWorkspaceRoot, projectRoot),
+    ];
+}
+function getKarmaTargetOutputs(target, angularWorkspaceRoot, projectRoot, context) {
+    const defaultOutput = posix.join('{workspaceRoot}', angularWorkspaceRoot, 'coverage/{projectName}');
+    if (!target.options?.karmaConfig) {
+        return [defaultOutput];
+    }
+    try {
+        const { parseConfig } = require('karma/lib/config');
+        const karmaConfigPath = (0, node_path_1.join)(context.workspaceRoot, angularWorkspaceRoot, projectRoot, target.options.karmaConfig);
+        const config = parseConfig(karmaConfigPath);
+        if (config.coverageReporter.dir) {
+            return [
+                getOutput(config.coverageReporter.dir, context.workspaceRoot, angularWorkspaceRoot, projectRoot),
+            ];
+        }
+    }
+    catch {
+        // we silently ignore any error here and fall back to the default output
+    }
+    return [defaultOutput];
+}
+function getBrowserAndServerTargetInputsAndOutputs(projectName, targetName, projects, angularJson) {
+    const { browserTarget, serverTarget } = extractBrowserAndServerTargets(angularJson, projectName, targetName);
+    if (!browserTarget || !serverTarget) {
+        // if any of these are missing, the target is invalid so we return empty values
+        return { inputs: [], outputs: [] };
+    }
+    const browserTargetInputs = projects[browserTarget.project]?.targets?.[browserTarget.target]?.inputs ??
+        [];
+    const serverTargetInputs = projects[serverTarget.project]?.targets?.[serverTarget.target]?.inputs ??
+        [];
+    const browserTargetOutputs = projects[browserTarget.project]?.targets?.[browserTarget.target]?.outputs ??
+        [];
+    const serverTargetOutputs = projects[serverTarget.project]?.targets?.[serverTarget.target]?.outputs ??
+        [];
+    return {
+        inputs: mergeInputs(...browserTargetInputs, ...serverTargetInputs),
+        outputs: Array.from(new Set([...browserTargetOutputs, ...serverTargetOutputs])),
+    };
+}
+function extractBrowserAndServerTargets(angularJson, projectName, targetName) {
+    let browserTarget;
+    let serverTarget;
+    try {
+        const targets = getAngularJsonProjectTargets(angularJson.projects[projectName]);
+        const target = targets[targetName];
+        let browserTargetSpecifier = target.options?.browserTarget;
+        if (!browserTargetSpecifier) {
+            const configuration = Object.values(target.configurations ?? {}).find((config) => !!config.browserTarget);
+            browserTargetSpecifier = configuration?.browserTarget;
+        }
+        if (browserTargetSpecifier) {
+            browserTarget = targetFromTargetString(browserTargetSpecifier, projectName, targetName);
+        }
+        let serverTargetSpecifier = target.options?.serverTarget;
+        if (!serverTargetSpecifier) {
+            serverTargetSpecifier = Object.values(target.configurations ?? {}).find((config) => !!config.serverTarget)?.serverTarget;
+        }
+        if (serverTargetSpecifier) {
+            serverTarget = targetFromTargetString(serverTargetSpecifier, projectName, targetName);
+        }
+    }
+    catch { }
+    return { browserTarget: browserTarget, serverTarget };
+}
+function mergeInputs(...inputs) {
+    const stringInputs = new Set();
+    const externalDependencies = new Set();
+    for (const input of inputs) {
+        if (typeof input === 'string') {
+            stringInputs.add(input);
+        }
+        else if ('externalDependencies' in input) {
+            // we only infer external dependencies, so we don't need to handle the other input definitions
+            for (const externalDependency of input.externalDependencies) {
+                externalDependencies.add(externalDependency);
+            }
+        }
+    }
+    return [
+        ...stringInputs,
+        ...(externalDependencies.size
+            ? [{ externalDependencies: Array.from(externalDependencies) }]
+            : []),
+    ];
+}
+// angular support abbreviated target specifiers, this is adapter from:
+// https://github.com/angular/angular-cli/blob/7d9ce246a33c60ec96eb4bf99520f5475716a910/packages/angular_devkit/architect/src/api.ts#L336
+function targetFromTargetString(specifier, abbreviatedProjectName, abbreviatedTargetName) {
+    const tuple = specifier.split(':', 3);
+    if (tuple.length < 2) {
+        // invalid target, ignore
+        return undefined;
+    }
+    // we only care about project and target
+    return {
+        project: tuple[0] || abbreviatedProjectName || '',
+        target: tuple[1] || abbreviatedTargetName || '',
+    };
+}
+function getOutput(path, workspaceRoot, angularWorkspaceRoot, projectRoot) {
+    const relativePath = (0, node_path_1.relative)((0, node_path_1.join)(workspaceRoot, angularWorkspaceRoot, projectRoot), path);
+    if (relativePath.startsWith('..')) {
+        return posix.join('{workspaceRoot}', (0, node_path_1.join)(angularWorkspaceRoot, projectRoot, relativePath));
+    }
+    else {
+        return posix.join('{projectRoot}', relativePath);
+    }
+}
+function getAngularJsonProjectTargets(project) {
+    return project.architect ?? project.targets;
+}