@nx/angular 17.0.0-beta.1 → 17.0.0-beta.2

package/generators.json

@@ -165,7 +165,7 @@
       "description": "Creates an Angular application."
     },
     "component": {
-      "factory": "./src/generators/component/component",
+      "factory": "./src/generators/component/component#componentGeneratorInternal",
       "schema": "./src/generators/component/schema.json",
       "aliases": ["c"],
       "description": "Generate an Angular Component."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "17.0.0-beta.1",
+  "version": "17.0.0-beta.2",
   "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, 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- Upgrading AngularJS applications \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -79,14 +79,14 @@
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
     "enquirer": "^2.3.6",
-    "@nx/devkit": "17.0.0-beta.1",
-    "@nx/cypress": "17.0.0-beta.1",
-    "@nx/jest": "17.0.0-beta.1",
-    "@nx/js": "17.0.0-beta.1",
-    "@nx/linter": "17.0.0-beta.1",
-    "@nx/webpack": "17.0.0-beta.1",
-    "@nx/workspace": "17.0.0-beta.1",
-    "@nrwl/angular": "17.0.0-beta.1"
+    "@nx/devkit": "17.0.0-beta.2",
+    "@nx/cypress": "17.0.0-beta.2",
+    "@nx/jest": "17.0.0-beta.2",
+    "@nx/js": "17.0.0-beta.2",
+    "@nx/linter": "17.0.0-beta.2",
+    "@nx/webpack": "17.0.0-beta.2",
+    "@nx/workspace": "17.0.0-beta.2",
+    "@nrwl/angular": "17.0.0-beta.2"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 14.0.0 < 17.0.0",

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

@@ -1,4 +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

@@ -1,19 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentGenerator = void 0;
+exports.componentGeneratorInternal = exports.componentGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
 const utils_1 = require("../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) {
     (0, lib_1.validateOptions)(tree, rawOptions);
-    const options = (0, lib_1.normalizeOptions)(tree, rawOptions);
-    const componentNames = (0, devkit_1.names)(options.name);
-    const typeNames = (0, devkit_1.names)(options.type);
+    const options = await (0, lib_1.normalizeOptions)(tree, rawOptions);
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files'), options.directory, {
-        fileName: componentNames.fileName,
-        className: componentNames.className,
-        type: typeNames.fileName,
-        typeClassName: typeNames.className,
+        name: options.name,
+        fileName: options.fileName,
+        symbolName: options.symbolName,
         style: options.style,
         inlineStyle: options.inlineStyle,
         inlineTemplate: options.inlineTemplate,
@@ -26,25 +30,25 @@ async function componentGenerator(tree, rawOptions) {
         tpl: '',
     });
     if (options.skipTests) {
-        const pathToSpecFile = (0, devkit_1.joinPathFragments)(options.directory, `${componentNames.fileName}.${typeNames.fileName}.spec.ts`);
+        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, `${componentNames.fileName}.${typeNames.fileName}.html`);
+        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, `${componentNames.fileName}.${typeNames.fileName}.${options.style}`);
+        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.path, modulePath, componentNames.fileName, `${componentNames.className}${typeNames.className}`, `${componentNames.fileName}.${typeNames.fileName}`, 'declarations', options.flat, options.export);
+        (0, utils_1.addToNgModule)(tree, options.directory, modulePath, options.name, options.symbolName, options.fileName, 'declarations', true, options.export);
     }
     (0, lib_1.exportComponentInEntryPoint)(tree, options);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
 }
-exports.componentGenerator = componentGenerator;
+exports.componentGeneratorInternal = componentGeneratorInternal;
 exports.default = componentGenerator;

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,22 @@
+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__.__type__.ts__tpl__ → __fileName__.ts__tpl__}

@@ -5,8 +5,8 @@ import { CommonModule } from '@angular/common';<% } %>
   selector: '<%= selector %>',<%}%><% if(standalone) {%>
   standalone: true,
   imports: [CommonModule],<%}%><% if(inlineTemplate) { %>
-  template: `<p><%= fileName %> works!</p>`<% } else { %>
-  templateUrl: './<%= fileName %><%= type ? '.' + type : '' %>.html'<% } if(inlineStyle) { %>,
+  template: `<p><%= name %> works!</p>`<% } else { %>
+  templateUrl: './<%= fileName %>.html'<% } if(inlineStyle) { %>,
   styles: [<% if(displayBlock){ %>
     `
       :host {
@@ -14,8 +14,8 @@ import { CommonModule } from '@angular/common';<% } %>
       }
     `<% } %>
   ]<% } else if (style !== 'none') { %>,
-  styleUrls: ['./<%= fileName %><%= type ? '.' + type : '' %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
+  styleUrls: ['./<%= fileName %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
 })
-export class <%= className %><%= typeClassName %> {}
+export class <%= symbolName %> {}

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

@@ -12,10 +12,10 @@ function findModuleFromOptions(tree, options, projectRoot) {
         return (0, devkit_1.normalizePath)(findModule(tree, options.directory, projectRoot));
     }
     else {
-        const modulePath = (0, devkit_1.joinPathFragments)(options.path, options.module);
+        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.path]);
+        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);

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

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

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

@@ -2,23 +2,36 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = void 0;
 const devkit_1 = require("@nx/devkit");
-const path_1 = require("../../utils/path");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 const selector_1 = require("../../utils/selector");
-function normalizeOptions(tree, options) {
+async function normalizeOptions(tree, options) {
     options.type ??= 'component';
-    const { directory, filePath, name, path, root, sourceRoot } = (0, path_1.normalizeNameAndPaths)(tree, options);
-    const { prefix } = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    const { artifactName: name, directory, fileName, filePath, project, } = 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, project);
     const selector = options.selector ??
         (0, selector_1.buildSelector)(tree, name, options.prefix, prefix, 'fileName');
     return {
         ...options,
         name,
+        project,
         changeDetection: options.changeDetection ?? 'Default',
         style: options.style ?? 'css',
-        flat: options.flat ?? false,
         directory,
+        fileName,
         filePath,
-        path,
+        symbolName,
         projectSourceRoot: sourceRoot,
         projectRoot: root,
         selector,

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

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateOptions = void 0;
 const validations_1 = require("../../utils/validations");
 function validateOptions(tree, options) {
-    (0, validations_1.validateProject)(tree, options.project);
-    (0, validations_1.validatePathIsUnderProjectRoot)(tree, options.project, options.path);
     (0, validations_1.validateStandaloneOption)(tree, options.standalone);
 }
 exports.validateOptions = validateOptions;

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

@@ -1,7 +1,9 @@
+import type { NameAndDirectoryFormat } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
+
 export interface Schema {
   name: string;
-  project: string;
-  path?: string;
+  directory?: string;
+  nameAndDirectoryFormat?: NameAndDirectoryFormat;
   displayBlock?: boolean;
   inlineStyle?: boolean;
   inlineTemplate?: boolean;
@@ -11,7 +13,6 @@ export interface Schema {
   style?: 'css' | 'scss' | 'sass' | 'less' | 'none';
   skipTests?: boolean;
   type?: string;
-  flat?: boolean;
   skipImport?: boolean;
   selector?: string;
   module?: string;
@@ -19,12 +20,29 @@ export interface Schema {
   export?: boolean;
   prefix?: string;
   skipFormat?: boolean;
+
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v18.
+   */
+  flat?: boolean;
+  /**
+   * @deprecated Provide the `directory` option instead. It will be removed in Nx v18.
+   */
+  path?: string;
+  /**
+   * @deprecated Provide the `directory` option instead. The project will be determined from the directory provided. It will be removed in Nx v18.
+   */
+  project?: string;
 }
 
 export interface NormalizedSchema extends Schema {
   directory: string;
   filePath: string;
+  project: string;
   projectSourceRoot: string;
   projectRoot: string;
   selector: string;
+
+  fileName: string;
+  symbolName: string;
 }

package/src/generators/component/schema.json

@@ -4,23 +4,9 @@
   "title": "Angular Component Schema",
   "cli": "nx",
   "type": "object",
-  "description": "Creates a new, generic Angular component definition in the given or default project.",
+  "description": "Creates a new Angular component.",
   "additionalProperties": false,
   "properties": {
-    "path": {
-      "type": "string",
-      "format": "path",
-      "description": "The path at which to create the component file, relative to the current workspace. Default is a folder with the same name as the component in the project root.",
-      "visible": false
-    },
-    "project": {
-      "type": "string",
-      "description": "The name of the project.",
-      "$default": {
-        "$source": "projectName"
-      },
-      "x-dropdown": "projects"
-    },
     "name": {
       "type": "string",
       "description": "The name of the component.",
@@ -30,6 +16,26 @@
       },
       "x-prompt": "What name would you like to use for the component?"
     },
+    "directory": {
+      "type": "string",
+      "description": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the workspace root.",
+      "aliases": ["dir", "path"],
+      "x-priority": "important"
+    },
+    "nameAndDirectoryFormat": {
+      "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      },
+      "x-dropdown": "projects",
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
+    },
     "prefix": {
       "type": "string",
       "description": "The prefix to apply to the generated component selector.",
@@ -91,7 +97,8 @@
     "flat": {
       "type": "boolean",
       "description": "Create the new files at the top level of the current project.",
-      "default": false
+      "default": false,
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v18."
     },
     "skipImport": {
       "type": "boolean",
@@ -126,6 +133,6 @@
       "x-priority": "internal"
     }
   },
-  "required": ["name", "project"],
+  "required": ["name"],
   "examplesFile": "../../../docs/component-examples.md"
 }

package/src/generators/move/lib/update-ng-package.js

@@ -14,12 +14,9 @@ function updateNgPackage(tree, schema) {
     }
     const rootOffset = (0, devkit_1.normalizePath)((0, path_1.relative)((0, path_1.join)(devkit_1.workspaceRoot, project.root), devkit_1.workspaceRoot));
     const outputs = (0, devkit_1.getOutputsForTargetAndConfiguration)({
-        target: {
-            project: schema.newProjectName,
-            target: 'build',
-        },
-        overrides: {},
-    }, {
+        project: schema.newProjectName,
+        target: 'build',
+    }, {}, {
         name: schema.newProjectName,
         type: 'lib',
         data: {

package/src/generators/utils/find-module.js

@@ -42,7 +42,10 @@ function findModule(tree, path, module) {
     return modulePath;
 }
 exports.findModule = findModule;
-function addToNgModule(tree, path, modulePath, name, className, fileName, ngModuleProperty, isFlat = true, isExported = false) {
+function addToNgModule(tree, path, modulePath, name, className, fileName, ngModuleProperty, 
+// TODO(leo): remove once all consumers are updated
+// // check if exported in the public api
+isFlat = true, isExported = false) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }

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

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

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

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