@nx/angular - Generators

The @nx/angular plugin provides various generators to help you create and configure angular projects within your Nx workspace. Below is a complete reference for all available generators and their options.

For an overview of the plugin and setup instructions, see the @nx/angular introduction.

application

Creates an Angular application.

Examples

Simple Application

Create an application named my-app:

nx g @nx/angular:application apps/my-app

Specify style extension

Create an application named my-app in the my-dir directory and use scss for styles:

nx g @nx/angular:app my-dir/my-app --style=scss

Single File Components application

Create an application with Single File Components (inline styles and inline templates):

nx g @nx/angular:app apps/my-app --inlineStyle --inlineTemplate

Set custom prefix and tags

Set the prefix to apply to generated selectors and add tags to the application (used for linting).

nx g @nx/angular:app apps/my-app --prefix=admin --tags=scope:admin,type:ui

Usage:

nx generate @nx/angular:application [options]

Aliases: app

Arguments:

nx generate @nx/angular:application <directory> [options]

Options

Option	Type	Description	Default
--backendProject	string	Backend project that provides data to this application. This sets up proxy.config.json.
--bundler	string	Bundler to use to build the application.	"esbuild"
--e2eTestRunner	string	Test runner to use for end to end (E2E) tests.	"playwright"
--enableTypedLinting	boolean	Whether to enable typed linting. For flat configs, this configures the recommended parserOptions.projectService and tsconfigRootDir. For legacy .eslintrc configs, this configures parserOptions.project. We do not enable this by default for lint performance reasons.	false
--formatter	string	The tool to use for code formatting.
--inlineStyle	boolean	Specifies if the style will be in the ts file.	false
--inlineTemplate	boolean	Specifies if the template will be in the ts file.	false
--linter	string	The tool to use for running lint checks. Defaults to the linter the workspace already uses.
--minimal	boolean	Generate a Angular app with a minimal setup.	false
--name	string	The name of the application.
--port	number	The port at which the application should be served.
--prefix	string	The prefix to apply to generated selectors.	"app"
--rootProject	boolean	Create an application at the root of the workspace.	false
--routing	boolean	Enable routing for the application.	true
--skipFormat	boolean	Skip formatting files.	false
--skipPackageJson	boolean	Do not add dependencies to package.json.	false
--skipTests	boolean	Skip creating spec files.	false
--ssr	boolean	Creates an application with Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) enabled.	false
--standalone	boolean	Generate an application that is setup to use standalone components.	true
--strict	boolean	Create an application with stricter type checking and build optimization options.	true
--style	string	The file extension to be used for style files.	"css"
--tags	string	Add tags to the application (used for linting).
--unitTestRunner	string	Test runner to use for unit tests. vitest-angular uses the @angular/build:unit-test executor (requires Angular v21+ and the esbuild bundler). vitest-analog uses AnalogJS-based setup with @nx/vitest. It defaults to vitest-angular when using the esbuild bundler for Angular versions >= 21.0.0, vitest-analog when using other bundlers on Angular >= 21.0.0, otherwise jest.
--viewEncapsulation	string	Specifies the view encapsulation strategy.
--zoneless	boolean	Generate an application that does not use zone.js. It defaults to true. Note: this is only supported in Angular versions >= 21.0.0

component

Creates a new Angular component.

Examples

Simple Component

Generate a component named Card at apps/my-app/src/lib/card/card.ts:

nx g @nx/angular:component apps/my-app/src/lib/card/card.ts

Without Providing the File Extension

Generate a component named Card at apps/my-app/src/lib/card/card.ts:

nx g @nx/angular:component apps/my-app/src/lib/card/card

With Different Symbol Name

Generate a component named Custom at apps/my-app/src/lib/card/card.ts:

nx g @nx/angular:component apps/my-app/src/lib/card/card --name=custom

With a Component Type

Generate a component named CardComponent at apps/my-app/src/lib/card/card.component.ts:

nx g @nx/angular:component apps/my-app/src/lib/card/card --type=component

Single File Component

Create a component named Card with inline styles and inline template:

nx g @nx/angular:component apps/my-app/src/lib/card/card --inlineStyle --inlineTemplate

Component with OnPush Change Detection Strategy

Create a component named Card with OnPush Change Detection Strategy:

nx g @nx/angular:component apps/my-app/src/lib/card/card --changeDetection=OnPush

Usage:

nx generate @nx/angular:component [options]

Aliases: c

Arguments:

nx generate @nx/angular:component <path> [options]

Options

Option	Type	Description	Default
--changeDetection	string	The change detection strategy to use in the new component. It defaults to OnPush for Angular versions >= 22.0.0 and Default for lower versions. Note: the Eager value is only supported in Angular versions >= 22.0.0.
--displayBlock	boolean	Specifies if the style will contain :host { display: block; }.	false
--export	boolean	Specifies if the component should be exported in the declaring NgModule. Additionally, if the project is a library, the component will be exported from the project’s entry point (normally index.ts) if the module it belongs to is also exported or if the component is standalone.	false
--exportDefault	boolean	Use default export for the component instead of a named export.	false
--inlineStyle	boolean	Include styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.	false
--inlineTemplate	boolean	Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.	false
--module	string	The filename or path to the NgModule that will declare this component.
--name	string	The component symbol name. Defaults to the last segment of the file path.
--ngHtml	boolean	Generate component template files with an ‘.ng.html’ file extension instead of ‘.html’.	false
--prefix	string	The prefix to apply to the generated component selector.
--selector	string	The HTML selector to use for this component.
--skipFormat	boolean	Skip formatting files.	false
--skipImport	boolean	Do not import this component into the owning NgModule.	false
--skipSelector	boolean	Specifies if the component should have a selector or not.	false
--skipTests	boolean	Do not create spec.ts test files for the new component.	false
--standalone	boolean	Whether the generated component is standalone.	true
--style	string	The file extension or preprocessor to use for style files, or none to skip generating the style file.	"css"
--type	string	Append a custom type to the component’s filename. No type is appended unless specified.
--viewEncapsulation	string	The view encapsulation strategy to use in the new component.

component-test

Create a *.cy.ts file for Cypress component testing for an Angular component.

Examples

Can I use component testing?

Angular component testing with Nx requires Cypress version 10.7.0 and up.

You can migrate with to v11 via the migrate-to-cypress-11 generator.

This generator is used to create a Cypress component test file for a given Angular component.

nx g @nx/angular:component-test --project=my-cool-angular-project --componentName=CoolBtnComponent --componentDir=src/cool-btn --componentFileName=cool-btn.component

Test file are generated with the .cy.ts suffix. this is to prevent colliding with any existing .spec. files contained in the project.

It’s currently expected the generated .cy.ts file will live side by side with the component. It is also assumed the project is already setup for component testing. If it isn’t, then you can run the cypress-component-project generator to set up the project for component testing.

Usage:

nx generate @nx/angular:component-test [options]

Options

Option	Type	Description	Default
--componentDir	string [required]	Relative path to the folder that contains the component from the project root.
--componentFileName	string [required]	File name that contains the component without the .ts extension.
--componentName	string [required]	Class name of the component to create a test for.
--project	string [required]	The name of the project where the component is located.
--skipFormat	boolean	Skip formatting files.	false
--skipPackageJson	boolean	Do not add dependencies to package.json.	false

convert-to-application-executor

Converts a project or all projects using one of the @angular-devkit/build-angular:browser, @angular-devkit/build-angular:browser-esbuild, @nx/angular:browser and @nx/angular:browser-esbuild executors to use the @nx/angular:application executor or the @angular-devkit/build-angular:application builder. If the converted target is using one of the @nx/angular executors, the @nx/angular:application executor will be used. Otherwise, the @angular-devkit/build-angular:application builder will be used.

Usage:

nx generate @nx/angular:convert-to-application-executor [options]

Arguments:

nx generate @nx/angular:convert-to-application-executor <project> [options]

Options

Option	Type	Description	Default
--skipFormat	boolean	Skip formatting files.	false

convert-to-rspack

Creates an Angular application.

Usage:

nx generate @nx/angular:convert-to-rspack [options]

Arguments:

nx generate @nx/angular:convert-to-rspack <project> [options]

Options

Option	Type	Description	Default
--skipFormat	boolean	Skip formatting files.	false
--skipInstall	boolean	Skip installing dependencies.	false

cypress-component-configuration

Add a Cypress component testing configuration to an existing project. Cypress v10.7.0 or higher is required.

Can I use component testing?

Angular component testing with Nx requires Cypress version 10.7.0 and up.

You can migrate to v11 via the migrate-to-cypress-11 generator.

This generator is for Cypress based component testing.

This generator is designed to get your Angular project up and running with Cypress Component Testing.

nx g @nx/angular:cypress-component-configuration --project=my-cool-angular-project

Running this generator, adds the required files to the specified project with a preconfigured cypress.config.ts designed for Nx workspaces.

cypress.config.ts

import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';

export default defineConfig({
  component: nxComponentTestingPreset(__filename),
});

Here is an example on how to add custom options to the configuration

cypress.config.ts

import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';

export default defineConfig({
  component: {
    ...nxComponentTestingPreset(__filename),
    // extra options here
  },
});

Specifying a Build Target

Component testing requires a build target to correctly run the component test dev server. This option can be manually specified with --build-target=some-angular-app:build, but Nx will infer this usage from the project graph if one isn’t provided.

For Angular projects, the build target needs to be using the @nx/angular:webpack-browser or @angular-devkit/build-angular:browser executor. The generator will throw an error if a build target can’t be found and suggest passing one in manually.

Letting Nx infer the build target by default

nx g @nx/angular:cypress-component-configuration --project=my-cool-angular-project

Manually specifying the build target

nx g @nx/angular:cypress-component-configuration --project=my-cool-angular-project --build-target:some-angular-app:build --generate-tests

Build Target with Configuration

If you’re wanting to use a build target with a specific configuration. i.e. my-app:build:production, then manually providing --build-target=my-app:build:production is the best way to do that.

Auto Generating Tests

You can optionally use the --generate-tests flag to generate a test file for each component in your project.

nx g @nx/angular:cypress-component-configuration --project=my-cool-angular-project --generate-tests

Running Component Tests

The @nx/cypress/plugin plugin infers a component-test target from the project’s cypress.config.ts.

nx component-test my-cool-angular-project

The generator passes the --build-target option to nxComponentTestingPreset in cypress.config.ts as buildTarget. Change it there as needed.

What is bundled

When the project being tested is a dependent of the specified --build-target, then assets, scripts, and styles are applied to the component being tested. You can determine if the project is dependent by using the project graph. If there is no link between the two projects, then the assets, scripts, and styles won’t be included in the build; therefore, they will not be applied to the component. To have a link between projects, you can import from the project being tested into the specified --build-target project, or set the --build-target project to implicitly depend on the project being tested.

Nx also supports React component testing.

Usage:

nx generate @nx/angular:cypress-component-configuration [options]

Options

Option	Type	Description	Default
--project	string [required]	The name of the project to add cypress component testing configuration to
--buildTarget	string	A build target used to configure Cypress component testing in the format of project:target[:configuration]. The build target should be an angular app. If not provided we will try to infer it from your projects usage.
--generateTests	boolean	Generate default component tests for existing components in the project	false
--skipFormat	boolean	Skip formatting files	false
--skipPackageJson	boolean	Do not add dependencies to package.json.	false

directive

Creates a new Angular directive.

Usage:

nx generate @nx/angular:directive [options]

Aliases: d

Arguments:

nx generate @nx/angular:directive <path> [options]

Options

Option	Type	Description	Default
--export	boolean	The declaring NgModule exports this directive.	false
--module	string	The filename of the declaring NgModule.
--name	string	The directive symbol name. Defaults to the last segment of the file path.
--prefix	string	A prefix to apply to generated selectors.
--selector	string	The HTML selector to use for this directive.
--skipFormat	boolean	Skip formatting of files.	false
--skipImport	boolean	Do not import this directive into the owning NgModule.	false
--skipTests	boolean	Do not create “spec.ts” test files for the new class.	false
--standalone	boolean	Whether the generated directive is standalone.	true
--type	string	Append a custom type to the directive’s filename. No type is appended unless specified.

library

Creates an Angular library.

Examples

Simple Library

Creates the my-ui-lib library with an ui tag:

nx g @nx/angular:library libs/my-ui-lib --tags=ui

Publishable Library

Creates the my-lib library that can be built producing an output following the Angular Package Format (APF) to be distributed as an NPM package:

nx g @nx/angular:library libs/my-lib --publishable --import-path=@my-org/my-lib

Buildable Library

Creates the my-lib library with support for incremental builds:

nx g @nx/angular:library libs/my-lib --buildable

Nested Folder & Import

Creates the my-lib library in the nested directory and sets the import path to @myorg/nested/my-lib:

nx g @nx/angular:library libs/nested/my-lib --importPath=@myorg/nested/my-lib

Usage:

nx generate @nx/angular:library [options]

Aliases: lib

Arguments:

nx generate @nx/angular:library <directory> [options]

Options

Option	Type	Description	Default
--addModuleSpec	boolean	Add a module spec file.	false
--buildable	boolean	Generate a buildable library.	false
--changeDetection	string	The change detection strategy to use in the new component. It defaults to OnPush for Angular versions >= 22.0.0 and Default for lower versions. Note: the Eager value is only supported in Angular versions >= 22.0.0. Disclaimer: This option is only valid when --standalone is set to true.
--compilationMode	string	Specifies the compilation mode to use. If not specified, it will default to partial for publishable libraries and to full for buildable libraries. The full value can not be used for publishable libraries.
--displayBlock	boolean	Specifies if the component generated style will contain :host { display: block; }. Disclaimer: This option is only valid when --standalone is set to true.	false
--enableTypedLinting	boolean	Whether to enable typed linting. For flat configs, this configures the recommended parserOptions.projectService and tsconfigRootDir. For legacy .eslintrc configs, this configures parserOptions.project. We do not enable this by default for lint performance reasons.	false
--flat	boolean	Ensure the generated standalone component is not placed in a subdirectory. Disclaimer: This option is only valid when --standalone is set to true.	false
--importPath	string	The library name used to import it, like @myorg/my-awesome-lib. Must be a valid npm name.
--inlineStyle	boolean	Include styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file. Disclaimer: This option is only valid when --standalone is set to true.	false
--inlineTemplate	boolean	Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file. Disclaimer: This option is only valid when --standalone is set to true.	false
--lazy	boolean	Add RouterModule.forChild when set to true, and a simple array of routes when set to false.	false
--linter	string	The tool to use for running lint checks. Defaults to the linter the workspace already uses.
--name	string	The name of the library.
--parent	string	Path to the parent route configuration using loadChildren or children, depending on what lazy is set to.
--prefix	string	The prefix to apply to generated selectors.
--publishable	boolean	Generate a publishable library.	false
--routing	boolean	Add router configuration. See lazy for more information.	false
--selector	string	The HTML selector to use for this component. Disclaimer: This option is only valid when --standalone is set to true.
--skipFormat	boolean	Skip formatting files.	false
--skipModule	boolean	Whether to skip the creation of a default module when generating the library.	false
--skipPackageJson	boolean	Do not add dependencies to package.json.	false
--skipSelector	boolean	Specifies if the component should have a selector or not. Disclaimer: This option is only valid when --standalone is set to true.	false
--skipTests	boolean	Do not create spec.ts test files for the new component. Disclaimer: This option is only valid when --standalone is set to true.	false
--skipTsConfig	boolean	Do not update tsconfig.json for development experience.	false
--standalone	boolean	Generate a library that uses a standalone component instead of a module as the entry point.	true
--strict	boolean	Create a library with stricter type checking and build optimization options.	true
--style	string	The file extension or preprocessor to use for style files, or none to skip generating the style file. Disclaimer: This option is only valid when --standalone is set to true.	"css"
--tags	string	Add tags to the library (used for linting).
--unitTestRunner	string	Test runner to use for unit tests. vitest-angular uses the @nx/angular:unit-test executor (requires Angular v21+ and a buildable/publishable library). vitest-analog uses AnalogJS-based setup with @nx/vitest. It defaults to vitest-angular for buildable/publishable libraries on Angular >= 21.0.0, vitest-analog for non-buildable libraries on Angular >= 21.0.0, otherwise jest.
--viewEncapsulation	string	The view encapsulation strategy to use in the new component. Disclaimer: This option is only valid when --standalone is set to true.

library-secondary-entry-point

Creates a secondary entry point for an Angular publishable library.

Examples

Basic Usage

Create a secondary entrypoint named button in the ui library.

nx g @nx/angular:library-secondary-entry-point --library=ui --name=button

Skip generating module

Create a secondary entrypoint named button in the ui library but skip creating an NgModule.

nx g @nx/angular:library-secondary-entry-point --library=ui --name=button --skipModule

Usage:

nx generate @nx/angular:library-secondary-entry-point [options]

Aliases: secondary-entry-point, entry-point

Arguments:

nx generate @nx/angular:library-secondary-entry-point <name> [options]

Options

Option	Type	Description	Default
--library	string [required]	The name of the library to create the secondary entry point for.
--skipFormat	boolean	Skip formatting files.	false
--skipModule	boolean	Skip generating a module for the secondary entry point.	false

ngrx-feature-store

Add an NgRx Feature Store to an application or library.

Usage:

nx generate @nx/angular:ngrx-feature-store [options]

Arguments:

nx generate @nx/angular:ngrx-feature-store <name> [options]

Options

Option	Type	Description	Default
--barrels	boolean	Use barrels to re-export actions, state and selectors.	false
--directory	string	The name of the folder used to contain/group the generated NgRx files.	"+state"
--facade	boolean	Create a Facade class for the the feature.	false
--minimal	boolean	Only register the feature state.	false
--parent	string	The path to the file where the state will be registered. For NgModule usage, this will be your Feature Module. For Standalone API usage, this will be your Routes definition file for your feature state. The host directory will create/use the new state directory.
--route	string	The route that the Standalone NgRx Providers should be added to.	"''"
--skipFormat	boolean	Skip formatting files.	false
--skipImport	boolean	Generate NgRx feature files without registering the feature in the NgModule.	false
--skipPackageJson	boolean	Do not update the package.json with NgRx dependencies.	false

ngrx-root-store

Adds NgRx support to an application.

Usage:

nx generate @nx/angular:ngrx-root-store [options]

Arguments:

nx generate @nx/angular:ngrx-root-store <project> [options]

Options

Option	Type	Description	Default
--addDevTools	boolean	Instrument the Store Devtools.	false
--directory	string	The name of the folder used to contain/group the generated NgRx files.	"+state"
--facade	boolean	Create a Facade class for the the feature.	false
--minimal	boolean	Only register the root state management setup or also generate a global feature state.	true
--name	string	Name of the NgRx state, such as products or users. Recommended to use the plural form of the name.
--route	string	The route that the Standalone NgRx Providers should be added to.	"''"
--skipFormat	boolean	Skip formatting files.	false
--skipImport	boolean	Generate NgRx feature files without registering the feature in the NgModule.	false
--skipPackageJson	boolean	Do not update the package.json with NgRx dependencies.	false

pipe

Creates an Angular pipe.

Usage:

nx generate @nx/angular:pipe [options]

Aliases: p

Arguments:

nx generate @nx/angular:pipe <path> [options]

Options

Option	Type	Description	Default
--export	boolean	The declaring NgModule exports this pipe.	false
--module	string	The filename of the declaring NgModule.
--name	string	The pipe symbol name. Defaults to the last segment of the file path.
--skipFormat	boolean	Skip formatting of files.	false
--skipImport	boolean	Do not import this pipe into the owning NgModule.	false
--skipTests	boolean	Do not create “spec.ts” test files for the new pipe.	false
--standalone	boolean	Whether the generated pipe is standalone.	true
--typeSeparator	string	The separator character to use before the type within the generated file’s name. For example, if you set the option to ., the file will be named example.pipe.ts. It defaults to ’-’.

setup-ssr

Create the additional configuration required to enable SSR via Angular Universal for an Angular application.

Usage:

nx generate @nx/angular:setup-ssr [options]

Arguments:

nx generate @nx/angular:setup-ssr <project> [options]

Options

Option	Type	Description	Default
--hydration	boolean	Set up Hydration for the SSR application.	true
--main	string	The name of the main entry-point file.	"main.server.ts"
--rootModuleClassName	string	The name of the root module class.	"AppServerModule"
--rootModuleFileName	string	The name of the root module file	"app.server.module.ts"
--serverFileName	string	The name of the Express server file.	"server.ts"
--serverPort	number	The port for the Express server.	4000
--skipFormat	boolean	Skip formatting the workspace after the generator completes.
--skipPackageJson	boolean	Do not add dependencies to package.json.	false
--standalone	boolean	Use Standalone Components to bootstrap SSR.

stories

Creates Storybook stories/specs for all Angular components declared in a project.

This generator will generate stories for all your components in your project. The stories will be generated using Component Story Format 3 (CSF3).

nx g @nx/angular:stories project-name

You can read more about how this generator works, in the Storybook for Angular overview page.

When running this generator, you will be prompted to provide the following:

• The name of the project you want to generate the configuration for.
• Whether you want to set up Storybook interaction tests (interactionTests). If you choose yes, a play function will be added to your stories, and all the necessary dependencies will be installed. You can read more about this in the Nx Storybook interaction tests documentation page.

You must provide a name for the generator to work.

By default, this generator will also set up Storybook interaction tests. If you don’t want to set up Storybook interaction tests, you can pass the --interactionTests=false option, but it’s not recommended.

There are a number of other options available. Let’s take a look at some examples.

Examples

Ignore certain paths when generating stories

nx g @nx/angular:stories ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*

This will generate stories for all the components in the ui project, except for the ones in the libs/ui/src/not-stories directory, and also for components that their file name is of the pattern *.other.*.

This is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.

By default, Nx will ignore the following paths:

*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx

but you can change this behaviour easily, as explained above.

Usage:

nx generate @nx/angular:stories [options]

Arguments:

nx generate @nx/angular:stories <name> [options]

Options

Option	Type	Description	Default
--ignorePaths	array	Paths to ignore when looking for components.	["*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx"]
--interactionTests	boolean	Set up Storybook interaction tests.	true
--skipFormat	boolean	Skip formatting files.	false

storybook-configuration

Adds Storybook configuration to a project to be able to use and create stories.

This generator will set up Storybook for your Angular project. By default, Storybook v10 is used.

nx g @nx/angular:storybook-configuration project-name

You can read more about how this generator works, in the Storybook for Angular overview page.

When running this generator, you will be prompted to provide the following:

• The name of the project you want to generate the configuration for.
• Whether you want to set up Storybook interaction tests (interactionTests). If you choose yes, a play function will be added to your stories, and all the necessary dependencies will be installed. Also, a test-storybook target will be generated in your project’s project.json, with a command to invoke the Storybook test-runner. You can read more about this in the Nx Storybook interaction tests documentation page.
• Whether you want to generateStories for the components in your project. If you choose yes, a .stories.ts file will be generated next to each of your components in your project.

You must provide a name for the generator to work.

By default, this generator will also set up Storybook interaction tests. If you don’t want to set up Storybook interaction tests, you can pass the --interactionTests=false option, but it’s not recommended.

There are a number of other options available. Let’s take a look at some examples.

Examples

Generate Storybook configuration

nx g @nx/angular:storybook-configuration ui

This will generate Storybook configuration for the ui project using TypeScript for the Storybook configuration files (the files inside the .storybook directory, eg. .storybook/main.ts).

Ignore certain paths when generating stories

nx g @nx/angular:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts

This will generate a Storybook configuration for the ui project and generate stories for all components in the libs/ui/src/lib directory, except for the ones in the libs/ui/src/not-stories directory, and the ones in the apps/my-app directory that end with .something.ts, and also for components that their file name is of the pattern *.other.*.

This is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.

By default, Nx will ignore the following paths:

*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx

but you can change this behaviour easily, as explained above.

Generate Storybook configuration using JavaScript

nx g @nx/angular:storybook-configuration ui --tsConfiguration=false

By default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the .storybook directory, eg. .storybook/main.js).

Usage:

nx generate @nx/angular:storybook-configuration [options]

Arguments:

nx generate @nx/angular:storybook-configuration <project> [options]

Options

Option	Type	Description	Default
--configureStaticServe	boolean	Specifies whether to configure a static file server target for serving storybook. Helpful for speeding up CI build/test times.	true
--generateStories	boolean	Specifies whether to automatically generate *.stories.ts files for components declared in this project or not.	true
--ignorePaths	array	Paths to ignore when looking for components.	["*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx"]
--interactionTests	boolean	Set up Storybook interaction tests.	true
--linter	string	The tool to use for running lint checks.
--skipFormat	boolean	Skip formatting files.	false
--tsConfiguration	boolean	Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.	true

web-worker

Creates a new, generic web worker definition in the given or default project.

Examples

Simple Usage

The basic usage of the web-worker generator is defined below. You must provide a name for the web worker and the project to assign it to.

nx g @nx/angular:web-worker myWebWorker --project=myapp

Usage:

nx generate @nx/angular:web-worker [options]

Arguments:

nx generate @nx/angular:web-worker <name> [options]

Options

Option	Type	Description	Default
--project	string [required]	The name of the project.
--path	string	The path at which to create the worker file, relative to the current workspace.
--skipFormat	boolean	Skip formatting files.	false
--snippet	boolean	Add a worker creation snippet in a sibling file of the same name.	true

Getting Help

You can get help for any generator by adding the --help flag:

nx generate @nx/angular:<generator> --help