A wrapper for Angular generators in Nx that simplifies component and other element creation, maintaining compatibility with the previous "derived" behavior.
- Simplifies Nx Angular generator syntax
- Supports component, library, and other Angular generators
- Automatically duplicates the last path segment for component name
- Automatically adds
.module.tsto module names - Compatible with Nx 20+
npm install @jcendal/nx-angular-generators-derivedInstead of using the full Nx command:
npx nx g @nx/angular:component libs/shared/ui/toasts/src/lib/component-name/component-name --name=component-name --module=ui-toasts.module.tsYou can use the simplified syntax:
npm run g component libs/shared/ui/toasts/src/lib/component-name --module=ui-toastsInstead of using the full Nx command:
npx nx g @nx/angular:library libs/shared/asdYou can use the simplified syntax:
npm run g library libs/shared/asdWith import path prefix (optional):
npm run g library libs/shared/library --importPathPrefix=@myorgThis will be converted to --importPath=@myorg/shared/library in the Nx command
(prefix + path without libs/). If --importPathPrefix is not provided or is
empty, no --importPath option will be added to the command.
The wrapper automatically converts:
-
Input:
npm run g component <path> --module=<module-name> -
Output:
npx nx g @nx/angular:component <path>/<last-segment> --name=<last-segment> --module=<module-name>.module.ts -
Input:
npm run g library <path> -
Output:
npx nx g @nx/angular:library <path> -
Input:
npm run g library <path> --importPathPrefix=<prefix> -
Output:
npx nx g @nx/angular:library <path> --importPath=<prefix>/<path-without-libs>
# Simplified command for component
npm run g component libs/shared/ui/toasts/src/lib/component-name --module=ui-toasts
# Executed internally as:
# npx nx g @nx/angular:component libs/shared/ui/toasts/src/lib/component-name/component-name --name=component-name --module=ui-toasts.module.ts
# Simplified command for library
npm run g library libs/shared/asd
# Executed internally as:
# npx nx g @nx/angular:library libs/shared/asd
# Simplified command for library with import path prefix
npm run g library libs/shared/library --importPathPrefix=@myorg
# Executed internally as:
# npx nx g @nx/angular:library libs/shared/asd --importPath=@myorg/ui/shared/asdThe g script accepts the following arguments:
<generator-type>: Generator type (e.g.,component,library,service, etc.)<path>: Path where the element will be generated[--option=value]: Additional options for the generator
- Components and other generators: Automatically duplicates the last path
segment and adds
--nameoption - Library: Uses the path as-is without modification
--moduleoption: Automatically adds.module.tsto the end of the module name--importPathPrefixoption (library only, optional): If provided and non-empty, combines the prefix with the path (withoutlibs/) to create--importPath. Example:libs/shared/librarywith prefix@myorgbecomes@myorg/shared/library. If not provided or empty, no--importPathoption is added.
Make sure you have @nx/angular installed in your Nx project:
npm install -D @nx/angularMIT – Feel free to use, modify, and distribute.