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

package/src/generators/application/schema.json

@@ -0,0 +1,192 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "GeneratorNxApp",
+  "title": "Creates an Angular application.",
+  "description": "Creates an Angular application.",
+  "type": "object",
+  "cli": "nx",
+  "properties": {
+    "name": {
+      "description": "The name of the application.",
+      "type": "string",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the application?",
+      "pattern": "^[a-zA-Z][^:]*$"
+    },
+    "directory": {
+      "description": "The directory of the new application.",
+      "type": "string",
+      "x-priority": "important"
+    },
+    "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.",
+      "type": "string",
+      "default": "css",
+      "enum": ["css", "scss", "sass", "less"],
+      "x-prompt": {
+        "message": "Which stylesheet format would you like to use?",
+        "type": "list",
+        "items": [
+          {
+            "value": "css",
+            "label": "CSS"
+          },
+          {
+            "value": "scss",
+            "label": "SASS(.scss)  [ https://sass-lang.com   ]"
+          },
+          {
+            "value": "sass",
+            "label": "SASS(.sass)  [ https://sass-lang.com   ]"
+          },
+          {
+            "value": "less",
+            "label": "LESS         [ https://lesscss.org     ]"
+          }
+        ]
+      }
+    },
+    "routing": {
+      "type": "boolean",
+      "description": "Enable routing for the application.",
+      "default": true,
+      "x-priority": "important"
+    },
+    "inlineStyle": {
+      "description": "Specifies if the style will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "s"
+    },
+    "inlineTemplate": {
+      "description": "Specifies if the template will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "t"
+    },
+    "viewEncapsulation": {
+      "description": "Specifies the view encapsulation strategy.",
+      "enum": ["Emulated", "None", "ShadowDom"],
+      "type": "string"
+    },
+    "prefix": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The prefix to apply to generated selectors.",
+      "default": "app",
+      "alias": "p"
+    },
+    "skipTests": {
+      "description": "Skip creating spec files.",
+      "type": "boolean",
+      "default": false,
+      "alias": "S"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "skipPackageJson": {
+      "type": "boolean",
+      "default": false,
+      "description": "Do not add dependencies to `package.json`.",
+      "x-priority": "internal"
+    },
+    "unitTestRunner": {
+      "type": "string",
+      "enum": ["jest", "none"],
+      "description": "Test runner to use for unit tests.",
+      "default": "jest"
+    },
+    "e2eTestRunner": {
+      "type": "string",
+      "enum": ["cypress", "playwright", "none"],
+      "description": "Test runner to use for end to end (E2E) tests.",
+      "x-prompt": "Which E2E test runner would you like to use?",
+      "default": "cypress"
+    },
+    "tags": {
+      "type": "string",
+      "description": "Add tags to the application (used for linting)."
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint", "none"],
+      "default": "eslint"
+    },
+    "backendProject": {
+      "type": "string",
+      "description": "Backend project that provides data to this application. This sets up `proxy.config.json`."
+    },
+    "strict": {
+      "type": "boolean",
+      "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."
+    },
+    "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.",
+      "default": false
+    },
+    "addTailwind": {
+      "type": "boolean",
+      "description": "Whether to configure Tailwind CSS for the application.",
+      "default": false
+    },
+    "standalone": {
+      "description": "Generate an application that is setup to use standalone components.",
+      "type": "boolean",
+      "default": true,
+      "x-priority": "important"
+    },
+    "rootProject": {
+      "description": "Create an application at the root of the workspace.",
+      "type": "boolean",
+      "default": false,
+      "hidden": true,
+      "x-priority": "internal"
+    },
+    "minimal": {
+      "description": "Generate a Angular app with a minimal setup.",
+      "type": "boolean",
+      "default": false
+    },
+    "bundler": {
+      "description": "Bundler to use to build the application. It defaults to `esbuild` for Angular versions >= 17.0.0. Otherwise, it defaults to `webpack`. _Note: The `esbuild` bundler is only considered stable from Angular v17._",
+      "type": "string",
+      "enum": ["webpack", "esbuild"],
+      "x-prompt": "Which bundler do you want to use to build the application?",
+      "x-priority": "important"
+    },
+    "ssr": {
+      "description": "Creates an application with Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) enabled.",
+      "type": "boolean",
+      "x-prompt": "Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?",
+      "default": false
+    }
+  },
+  "additionalProperties": false,
+  "required": ["name"],
+  "examplesFile": "../../../docs/application-examples.md"
+}

package/src/generators/component/component.d.ts

@@ -0,0 +1,5 @@
+import type { Tree } from '@nx/devkit';
+import type { Schema } from './schema';
+export declare function componentGenerator(tree: Tree, rawOptions: Schema): Promise<void>;
+export declare function componentGeneratorInternal(tree: Tree, rawOptions: Schema): Promise<void>;
+export default componentGenerator;

package/src/generators/component/component.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentGeneratorInternal = exports.componentGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const utils_1 = require("../utils");
+const version_utils_1 = require("../utils/version-utils");
+const lib_1 = require("./lib");
+async function componentGenerator(tree, rawOptions) {
+    await componentGeneratorInternal(tree, {
+        nameAndDirectoryFormat: 'derived',
+        ...rawOptions,
+    });
+}
+exports.componentGenerator = componentGenerator;
+async function componentGeneratorInternal(tree, rawOptions) {
+    const options = await (0, lib_1.normalizeOptions)(tree, rawOptions);
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files'), options.directory, {
+        name: options.name,
+        fileName: options.fileName,
+        symbolName: options.symbolName,
+        style: options.style,
+        inlineStyle: options.inlineStyle,
+        inlineTemplate: options.inlineTemplate,
+        standalone: options.standalone,
+        skipSelector: options.skipSelector,
+        changeDetection: options.changeDetection,
+        viewEncapsulation: options.viewEncapsulation,
+        displayBlock: options.displayBlock,
+        selector: options.selector,
+        angularMajorVersion,
+        tpl: '',
+    });
+    if (options.skipTests) {
+        const pathToSpecFile = (0, devkit_1.joinPathFragments)(options.directory, `${options.fileName}.spec.ts`);
+        tree.delete(pathToSpecFile);
+    }
+    if (options.inlineTemplate) {
+        const pathToTemplateFile = (0, devkit_1.joinPathFragments)(options.directory, `${options.fileName}.html`);
+        tree.delete(pathToTemplateFile);
+    }
+    if (options.style === 'none' || options.inlineStyle) {
+        const pathToStyleFile = (0, devkit_1.joinPathFragments)(options.directory, `${options.fileName}.${options.style}`);
+        tree.delete(pathToStyleFile);
+    }
+    if (!options.skipImport && !options.standalone) {
+        const modulePath = (0, lib_1.findModuleFromOptions)(tree, options, options.projectRoot);
+        (0, utils_1.addToNgModule)(tree, options.directory, modulePath, options.name, options.symbolName, options.fileName, 'declarations', true, options.export);
+    }
+    (0, lib_1.exportComponentInEntryPoint)(tree, options);
+    (0, lib_1.setGeneratorDefaults)(tree, options);
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+}
+exports.componentGeneratorInternal = componentGeneratorInternal;
+exports.default = componentGenerator;

package/src/generators/component/files/__fileName__.__style__

@@ -0,0 +1,6 @@
+<% if(displayBlock){ if(style != 'sass') { %>:host {
+  display: block;
+}
+<% } else { %>\:host
+  display: block;
+<% }} %>

package/src/generators/component/files/__fileName__.html__tpl__

@@ -0,0 +1 @@
+<p><%= name %> works!</p>

package/src/generators/component/files/__fileName__.spec.ts__tpl__

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%= symbolName %> } from './<%= fileName %>';
+
+describe('<%= symbolName %>', () => {
+  let component: <%= symbolName %>;
+  let fixture: ComponentFixture<<%= symbolName %>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      <%= standalone ? 'imports' : 'declarations' %>: [<%= symbolName %>]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(<%= symbolName %>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/generators/component/files/__fileName__.ts__tpl__

@@ -0,0 +1,27 @@
+import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%>Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core';<% if(standalone) {%>
+import { CommonModule } from '@angular/common';<% } %>
+
+@Component({<% if(!skipSelector) {%>
+  selector: '<%= selector %>',<%}%><% if(standalone) {%>
+  standalone: true,
+  imports: [CommonModule],<%}%><% if(inlineTemplate) { %>
+  template: `<p><%= name %> works!</p>`<% } else { %>
+  templateUrl: './<%= fileName %>.html'<% } if (angularMajorVersion < 17) { if(inlineStyle) { %>,
+  styles: [<% if(displayBlock){ %>
+    `
+      :host {
+        display: block;
+      }
+    `<% } %>
+  ]<% } else if (style !== 'none') { %>,
+  styleUrls: ['./<%= fileName %>.<%= style %>']<% } %><% } else { if(inlineStyle) { %>,
+  styles: `<% if(displayBlock){ %>
+    :host {
+      display: block;
+    }
+  <% } %>`<% } else if (style !== 'none') { %>,
+  styleUrl: './<%= fileName %>.<%= style %>'<% } %><% } %><% if(!!viewEncapsulation) { %>,
+  encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
+  changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
+})
+export class <%= symbolName %> {}

package/src/generators/component/lib/component.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import type { NormalizedSchema } from '../schema';
+export declare function exportComponentInEntryPoint(tree: Tree, schema: NormalizedSchema): void;

package/src/generators/component/lib/component.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportComponentInEntryPoint = void 0;
+const devkit_1 = require("@nx/devkit");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const entry_point_1 = require("../../utils/entry-point");
+const path_1 = require("../../utils/path");
+const module_1 = require("./module");
+function exportComponentInEntryPoint(tree, schema) {
+    if (!schema.export || schema.skipImport) {
+        return;
+    }
+    const { root, projectType } = (0, devkit_1.readProjectConfiguration)(tree, schema.projectName);
+    if (projectType === 'application') {
+        return;
+    }
+    const entryPointPath = (0, entry_point_1.locateLibraryEntryPointFromDirectory)(tree, schema.directory, root, schema.projectSourceRoot);
+    if (!entryPointPath) {
+        devkit_1.logger.warn(`Unable to determine whether the component should be exported in the library entry point file. ` +
+            `The library's entry point file could not be found. Skipping exporting the component in the entry point file.`);
+        return;
+    }
+    if (!schema.standalone) {
+        const modulePath = (0, module_1.findModuleFromOptions)(tree, schema, root);
+        if (!shouldExportInEntryPoint(tree, entryPointPath, modulePath)) {
+            return;
+        }
+    }
+    const relativePathFromEntryPoint = (0, path_1.getRelativeImportToFile)(entryPointPath, schema.filePath);
+    const updateEntryPointContent = (0, devkit_1.stripIndents) `${tree.read(entryPointPath, 'utf-8')}
+    export * from '${relativePathFromEntryPoint}';`;
+    tree.write(entryPointPath, updateEntryPointContent);
+}
+exports.exportComponentInEntryPoint = exportComponentInEntryPoint;
+function shouldExportInEntryPoint(tree, entryPoint, modulePath) {
+    if (!modulePath) {
+        return false;
+    }
+    (0, ensure_typescript_1.ensureTypescript)();
+    const { tsquery } = require('@phenomnomnominal/tsquery');
+    const moduleImportPath = (0, path_1.getRelativeImportToFile)(entryPoint, modulePath);
+    const entryPointContent = tree.read(entryPoint, 'utf-8');
+    const entryPointAst = tsquery.ast(entryPointContent);
+    const moduleExport = tsquery(entryPointAst, `ExportDeclaration StringLiteral[value='${moduleImportPath}']`, { visitAllChildren: true })[0];
+    return Boolean(moduleExport);
+}

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

@@ -0,0 +1,4 @@
+export * from './component';
+export * from './module';
+export * from './normalize-options';
+export * from './set-generator-defaults';

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./component"), exports);
+tslib_1.__exportStar(require("./module"), exports);
+tslib_1.__exportStar(require("./normalize-options"), exports);
+tslib_1.__exportStar(require("./set-generator-defaults"), exports);

package/src/generators/component/lib/module.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import type { NormalizedSchema } from '../schema';
+export declare function findModuleFromOptions(tree: Tree, options: NormalizedSchema, projectRoot: string): string;

package/src/generators/component/lib/module.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findModuleFromOptions = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+// Adapted from https://github.com/angular/angular-cli/blob/732aab5fa7e63618c89dfbbb6f78753f706d7014/packages/schematics/angular/utility/find-module.ts#L29
+// to match the logic from the Angular CLI component schematic.
+const moduleExt = '.module.ts';
+const routingModuleExt = '-routing.module.ts';
+function findModuleFromOptions(tree, options, projectRoot) {
+    if (!options.module) {
+        return (0, devkit_1.normalizePath)(findModule(tree, options.directory, projectRoot));
+    }
+    else {
+        const modulePath = (0, devkit_1.joinPathFragments)(options.directory, options.module);
+        const componentPath = options.directory;
+        const moduleBaseName = (0, path_1.basename)(modulePath);
+        const candidateSet = new Set([options.directory]);
+        const projectRootParent = (0, path_1.dirname)(projectRoot);
+        for (let dir = modulePath; dir !== projectRootParent; dir = (0, path_1.dirname)(dir)) {
+            candidateSet.add(dir);
+        }
+        for (let dir = componentPath; dir !== projectRoot; dir = (0, path_1.dirname)(dir)) {
+            candidateSet.add(dir);
+        }
+        const candidatesDirs = [...candidateSet].sort((a, b) => b.length - a.length);
+        for (const c of candidatesDirs) {
+            const candidateFiles = [
+                '',
+                moduleBaseName,
+                `${moduleBaseName}.ts`,
+                `${moduleBaseName}${moduleExt}`,
+            ].map((x) => (0, devkit_1.joinPathFragments)(c, x));
+            for (const sc of candidateFiles) {
+                if (tree.isFile(sc)) {
+                    return (0, devkit_1.normalizePath)(sc);
+                }
+            }
+        }
+        throw new Error(`Specified module '${options.module}' does not exist.\n` +
+            `Looked in the following directories:\n    ${candidatesDirs.join('\n    ')}`);
+    }
+}
+exports.findModuleFromOptions = findModuleFromOptions;
+function findModule(tree, generateDir, projectRoot) {
+    let dir = generateDir;
+    const projectRootParent = (0, path_1.dirname)(projectRoot);
+    while (dir !== projectRootParent) {
+        const allMatches = tree
+            .children(dir)
+            .map((path) => (0, devkit_1.joinPathFragments)(dir, path))
+            .filter((path) => tree.isFile(path) && path.endsWith(moduleExt));
+        const filteredMatches = allMatches.filter((path) => !path.endsWith(routingModuleExt));
+        if (filteredMatches.length == 1) {
+            return filteredMatches[0];
+        }
+        else if (filteredMatches.length > 1) {
+            throw new Error("Found more than one candidate module to add the component to. Please specify which module the component should be added to by using the '--module' option.");
+        }
+        dir = (0, path_1.dirname)(dir);
+    }
+    throw new Error("Could not find a candidate module to add the component to. Please specify which module the component should be added to by using the '--module' option, or pass '--standalone' to generate a standalone component.");
+}

package/src/generators/component/lib/normalize-options.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import type { NormalizedSchema, Schema } from '../schema';
+export declare function normalizeOptions(tree: Tree, options: Schema): Promise<NormalizedSchema>;

package/src/generators/component/lib/normalize-options.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = void 0;
+const devkit_1 = require("@nx/devkit");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const selector_1 = require("../../utils/selector");
+async function normalizeOptions(tree, options) {
+    options.type ??= 'component';
+    const { artifactName: name, directory, fileName, filePath, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
+        artifactType: 'component',
+        callingGenerator: '@nx/angular:component',
+        name: options.name,
+        directory: options.directory ?? options.path,
+        flat: options.flat,
+        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
+        project: options.project,
+        suffix: options.type ?? 'component',
+    });
+    const { className } = (0, devkit_1.names)(name);
+    const { className: suffixClassName } = (0, devkit_1.names)(options.type);
+    const symbolName = `${className}${suffixClassName}`;
+    const { prefix, root, sourceRoot } = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+    const selector = options.selector ?? (0, selector_1.buildSelector)(name, options.prefix, prefix, 'fileName');
+    (0, selector_1.validateHtmlSelector)(selector);
+    return {
+        ...options,
+        name,
+        projectName,
+        changeDetection: options.changeDetection ?? 'Default',
+        style: options.style ?? 'css',
+        standalone: options.standalone ?? true,
+        directory,
+        fileName,
+        filePath,
+        symbolName,
+        projectSourceRoot: sourceRoot,
+        projectRoot: root,
+        selector,
+    };
+}
+exports.normalizeOptions = normalizeOptions;

package/src/generators/component/lib/set-generator-defaults.d.ts

@@ -0,0 +1,3 @@
+import { type Tree } from '@nx/devkit';
+import type { NormalizedSchema } from '../schema';
+export declare function setGeneratorDefaults(tree: Tree, options: NormalizedSchema): void;

package/src/generators/component/lib/set-generator-defaults.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setGeneratorDefaults = void 0;
+const devkit_1 = require("@nx/devkit");
+function setGeneratorDefaults(tree, options) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    nxJson.generators = nxJson.generators ?? {};
+    nxJson.generators['@nx/angular:component'] = {
+        style: options.style,
+        ...(nxJson.generators['@nx/angular:component'] || {}),
+    };
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+}
+exports.setGeneratorDefaults = setGeneratorDefaults;

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

@@ -0,0 +1,48 @@
+import type { NameAndDirectoryFormat } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
+
+export interface Schema {
+  name: string;
+  directory?: string;
+  nameAndDirectoryFormat?: NameAndDirectoryFormat;
+  displayBlock?: boolean;
+  inlineStyle?: boolean;
+  inlineTemplate?: boolean;
+  standalone?: boolean;
+  viewEncapsulation?: 'Emulated' | 'None' | 'ShadowDom';
+  changeDetection?: 'Default' | 'OnPush';
+  style?: 'css' | 'scss' | 'sass' | 'less' | 'none';
+  skipTests?: boolean;
+  type?: string;
+  skipImport?: boolean;
+  selector?: string;
+  module?: string;
+  skipSelector?: boolean;
+  export?: boolean;
+  prefix?: string;
+  skipFormat?: boolean;
+
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v19.
+   */
+  flat?: boolean;
+  /**
+   * @deprecated Provide the `directory` option instead. It will be removed in Nx v19.
+   */
+  path?: string;
+  /**
+   * @deprecated Provide the `directory` option instead. The project will be determined from the directory provided. It will be removed in Nx v19.
+   */
+  project?: string;
+}
+
+export interface NormalizedSchema extends Schema {
+  directory: string;
+  filePath: string;
+  projectName: string;
+  projectSourceRoot: string;
+  projectRoot: string;
+  selector: string;
+
+  fileName: string;
+  symbolName: string;
+}