8fa7065cf1
This PR updates examples in `.md` files (both docs and blog posts) to use positional args. Nx 20 changes the position arg to be either `directory` for apps/libs or `path` for artifacts (e.g. components). So before you'd do this: ``` nx g app myapp --directory=apps/myapp nx g lib mylib --directory=libs/mylib nx g lib mylib --directory=libs/nested/mylib nx g lib @acme/foo --directory=libs/@acme/foo --importPath=@acme/foo nx g component foo --directory=libs/ui/src/foo --pascalCaseFiles ``` Will now be simplified to ``` nx g app apps/myapp nx g lib libs/mylib nx g lib libs/nested/mylib nx g lib libs/@acme/foo # name and import path are both "@acme/foo" nx g component libs/ui/src/foo/Foo ``` For cases where `name` and `importPath` need to be changed, you can always manually specify them. ``` nx g lib libs/nested/foo # name is foo nx g lib libs/nested/foo --name=nested-foo # specify name with prefix nx g lib libs/@acme/foo --name # use "foo" as name and don't match importPath nx g lib libs/@internal/foo --importPath=@acme/foo # different importPath from name <!-- If this is a particularly complex change or feature addition, you can request a dedicated Nx release for this pull request branch. Mention someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they will confirm if the PR warrants its own release for testing purposes, and generate it for you if appropriate. --> ## Current Behavior <!-- This is the behavior we have today --> ## Expected Behavior <!-- This is the behavior we should expect with the changes in this PR --> ## Related Issue(s) <!-- Please link the issue being fixed so it gets closed when this is merged. --> Fixes #
4.1 KiB
| title | description |
|---|---|
| Overview of the Nx Angular Plugin | The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. |
The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It also enables using Angular Devkit builders and schematics in Nx workspaces.
Among other things, it provides:
- Integration with libraries such as:
- Cypress
- ESLint
- Jest
- Playwright
- Storybook
- Generators to help scaffold code quickly, including:
- Micro Frontends
- Libraries, both internal to your codebase and publishable to npm
- Projects with Tailwind CSS
- Executors providing extra capabilities on top of the Angular Devkit builders:
- Provide ESBuild plugins
- Provide custom webpack configurations
- Utilities for automatic workspace refactoring
{% callout type="note" title="Currently using the Angular CLI?" %} You can easily and mostly automatically migrate from an Angular CLI project to Nx! Learn more here. {% /callout %}
Setting Up @nx/angular
Installation
{% callout type="note" title="Keep Nx Package Versions In Sync" %}
Make sure to install the @nx/angular version that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe.
{% /callout %}
In any Nx workspace, you can install @nx/angular by running the following command:
{% tabs %} {% tab label="Nx 18+" %}
nx add @nx/angular
This will install the correct version of @nx/angular.
{% /tab %} {% tab label="Nx < 18" %}
Install the @nx/angular package with your package manager.
npm add -D @nx/angular
{% /tab %} {% /tabs %}
{% callout type="note" title="Angular Tutorials" %} For a full tutorial experience, follow the Angular Standalone Tutorial or the Angular Monorepo Tutorial {% /callout %}
Using the Angular Plugin
Generating an application
It's straightforward to generate an Angular application:
nx g @nx/angular:app apps/appName
By default, the application will be generated with:
- ESLint as the linter.
- Jest as the unit test runner.
- Cypress as the E2E test runner.
We can then serve, build, test, lint, and run e2e tests on the application with the following commands:
nx serve appName
nx build appName
nx test appName
nx lint appName
nx e2e appName
Generating a library
Generating an Angular library is very similar to generating an application:
nx g @nx/angular:lib libs/libName
By default, the library will be generated with:
- ESLint as the linter.
- Jest as the unit test runner.
We can then test and lint the library with the following commands:
nx test libName
nx lint libName
Read more about:
Fallback to @schematics/angular
If you try to invoke a generator that is not present in @nx/angular, the request will automatically be forwarded on
to @schematics/angular. So, even though there is no @nx/angular:service generator, the following command will
successfully create a service:
nx g @nx/angular:service apps/appName/src/lib/my-service/my-service