chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,33 @@
|
||||
## Examples
|
||||
|
||||
##### Simple Application
|
||||
|
||||
Create an application named `my-app`:
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```bash
|
||||
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):
|
||||
|
||||
```bash
|
||||
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).
|
||||
|
||||
```bash
|
||||
nx g @nx/angular:app apps/my-app --prefix=admin --tags=scope:admin,type:ui
|
||||
```
|
||||
@@ -0,0 +1,103 @@
|
||||
This executor is a drop-in replacement for the `@angular-devkit/build-angular:application` builder provided by the Angular CLI. It builds an Angular application using [esbuild](https://esbuild.github.io/) with integrated SSR and prerendering capabilities.
|
||||
|
||||
In addition to the features provided by the Angular CLI builder, the `@nx/angular:application` executor also supports the following:
|
||||
|
||||
- Providing esbuild plugins
|
||||
- Providing a function to transform the application's `index.html` file
|
||||
- Incremental builds
|
||||
|
||||
:::tip[Dev Server]
|
||||
The [`@nx/angular:dev-server` executor](/nx-api/angular/executors/dev-server) is required to serve your application when using the `@nx/angular:application` to build it. It is a drop-in replacement for the Angular CLI's `@angular-devkit/build-angular:dev-server` builder and ensures the application is correctly served with Vite when using the `@nx/angular:application` executor.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
##### Providing esbuild plugins
|
||||
|
||||
The executor accepts a `plugins` option that allows you to provide esbuild plugins that will be used when building your application. It allows providing a path to a plugin file or an object with a `path` and `options` property to provide options to the plugin.
|
||||
|
||||
```json title="apps/my-app/project.json" {8-16}
|
||||
{
|
||||
...
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nx/angular:application",
|
||||
"options": {
|
||||
...
|
||||
"plugins": [
|
||||
"apps/my-app/plugins/plugin1.js",
|
||||
{
|
||||
"path": "apps/my-app/plugins/plugin2.js",
|
||||
"options": {
|
||||
"someOption": "some value"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts title="apps/my-app/plugins/plugin1.js"
|
||||
const plugin1 = {
|
||||
name: 'plugin1',
|
||||
setup(build) {
|
||||
const options = build.initialOptions;
|
||||
options.define.PLUGIN1_TEXT = '"Value was provided at build time"';
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = plugin1;
|
||||
```
|
||||
|
||||
```ts title="apps/my-app/plugins/plugin2.js"
|
||||
function plugin2({ someOption }) {
|
||||
return {
|
||||
name: 'plugin2',
|
||||
setup(build) {
|
||||
const options = build.initialOptions;
|
||||
options.define.PLUGIN2_TEXT = JSON.stringify(someOption);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = plugin2;
|
||||
```
|
||||
|
||||
Additionally, we need to inform TypeScript of the defined variables to prevent type-checking errors during the build. We can achieve this by creating or updating a type definition file included in the TypeScript build process (e.g. `src/types.d.ts`) with the following content:
|
||||
|
||||
```ts title="apps/my-app/src/types.d.ts"
|
||||
declare const PLUGIN1_TEXT: number;
|
||||
declare const PLUGIN2_TEXT: string;
|
||||
```
|
||||
|
||||
##### Transforming the 'index.html' file
|
||||
|
||||
The executor accepts an `indexHtmlTransformer` option to provide a path to a file with a default export for a function that receives the application's `index.html` file contents and outputs the updated contents.
|
||||
|
||||
```json title="apps/my-app/project.json" {8}
|
||||
{
|
||||
...
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nx/angular:application",
|
||||
"options": {
|
||||
...
|
||||
"indexHtmlTransformer": "apps/my-app/index-html.transformer.ts"
|
||||
}
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts title="apps/my-app/index-html.transformer.ts"
|
||||
export default function (indexContent: string) {
|
||||
return indexContent.replace(
|
||||
'<title>my-app</title>',
|
||||
'<title>my-app (transformed)</title>'
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,73 @@
|
||||
This executor is a drop-in replacement for the `@angular-devkit/build-angular:browser-esbuild` builder provided by the Angular CLI. It builds an Angular application using esbuild.
|
||||
|
||||
In addition to the features provided by the Angular CLI builder, the `@nx/angular:browser-esbuild` executor also supports the following:
|
||||
|
||||
- Providing esbuild plugins
|
||||
- Incremental builds
|
||||
|
||||
:::tip[Dev Server]
|
||||
The [`@nx/angular:dev-server` executor](/nx-api/angular/executors/dev-server) is required to serve your application when using the `@nx/angular:browser-esbuild` to build it. It is a drop-in replacement for the Angular CLI's `@angular-devkit/build-angular:dev-server` builder and ensures the application is correctly served with Vite when using the `@nx/angular:browser-esbuild` executor.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
##### Providing esbuild plugins
|
||||
|
||||
The executor accepts a `plugins` option that allows you to provide esbuild plugins that will be used when building your application. It allows providing a path to a plugin file or an object with a `path` and `options` property to provide options to the plugin.
|
||||
|
||||
```json title="apps/my-app/project.json" {8-16}
|
||||
{
|
||||
...
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nx/angular:browser-esbuild",
|
||||
"options": {
|
||||
...
|
||||
"plugins": [
|
||||
"apps/my-app/plugins/plugin1.js",
|
||||
{
|
||||
"path": "apps/my-app/plugins/plugin2.js",
|
||||
"options": {
|
||||
"someOption": "some value"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts title="apps/my-app/plugins/plugin1.js"
|
||||
const plugin1 = {
|
||||
name: 'plugin1',
|
||||
setup(build) {
|
||||
const options = build.initialOptions;
|
||||
options.define.PLUGIN1_TEXT = '"Value was provided at build time"';
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = plugin1;
|
||||
```
|
||||
|
||||
```ts title="apps/my-app/plugins/plugin2.js"
|
||||
function plugin2({ someOption }) {
|
||||
return {
|
||||
name: 'plugin2',
|
||||
setup(build) {
|
||||
const options = build.initialOptions;
|
||||
options.define.PLUGIN2_TEXT = JSON.stringify(someOption);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = plugin2;
|
||||
```
|
||||
|
||||
Additionally, we need to inform TypeScript of the defined variables to prevent type-checking errors during the build. We can achieve this by creating or updating a type definition file included in the TypeScript build process (e.g. `src/types.d.ts`) with the following content:
|
||||
|
||||
```ts title="apps/my-app/src/types.d.ts"
|
||||
declare const PLUGIN1_TEXT: number;
|
||||
declare const PLUGIN2_TEXT: string;
|
||||
```
|
||||
@@ -0,0 +1,49 @@
|
||||
## Examples
|
||||
|
||||
##### Simple Component
|
||||
|
||||
Generate a component named `Card` at `apps/my-app/src/lib/card/card.ts`:
|
||||
|
||||
```bash
|
||||
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`:
|
||||
|
||||
```bash
|
||||
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`:
|
||||
|
||||
```bash
|
||||
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`:
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```bash
|
||||
nx g @nx/angular:component apps/my-app/src/lib/card/card --changeDetection=OnPush
|
||||
```
|
||||
@@ -0,0 +1,15 @@
|
||||
:::caution[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](/nx-api/cypress/generators/migrate-to-cypress-11).
|
||||
:::
|
||||
|
||||
This generator is used to create a Cypress component test file for a given Angular component.
|
||||
|
||||
```shell
|
||||
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](/nx-api/angular/generators/cypress-component-configuration) to set up the project for component testing.
|
||||
@@ -0,0 +1,103 @@
|
||||
:::caution[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](/nx-api/cypress/generators/migrate-to-cypress-11).
|
||||
|
||||
This generator is for Cypress based component testing.
|
||||
:::
|
||||
|
||||
This generator is designed to get your Angular project up and running with Cypress Component Testing.
|
||||
|
||||
```shell
|
||||
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.
|
||||
|
||||
```ts title="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
|
||||
|
||||
```ts title="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](/concepts/mental-model#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
|
||||
|
||||
```shell
|
||||
nx g @nx/angular:cypress-component-configuration --project=my-cool-angular-project
|
||||
```
|
||||
|
||||
Manually specifying the build target
|
||||
|
||||
```shell
|
||||
nx g @nx/angular:cypress-component-configuration --project=my-cool-angular-project --build-target:some-angular-app:build --generate-tests
|
||||
```
|
||||
|
||||
:::note[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.
|
||||
|
||||
```shell
|
||||
nx g @nx/angular:cypress-component-configuration --project=my-cool-angular-project --generate-tests
|
||||
```
|
||||
|
||||
## Running Component Tests
|
||||
|
||||
A new `component-test` target will be added to the specified project to run your component tests.
|
||||
|
||||
```shell
|
||||
nx g component-test my-cool-angular-project
|
||||
```
|
||||
|
||||
Here is an example of the project configuration that is generated. The `--build-target` option is added as the `devServerTarget` which can be changed as needed.
|
||||
|
||||
```json title="project.json"
|
||||
{
|
||||
"targets" {
|
||||
"component-test": {
|
||||
"executor": "@nx/cypress:cypress",
|
||||
"options": {
|
||||
"cypressConfig": "<path-to-project-root>/cypress.config.ts",
|
||||
"testingType": "component",
|
||||
"devServerTarget": "some-angular-app:build",
|
||||
"skipServe": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 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](/features/explore-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](/reference/project-configuration#implicitdependencies) on the project being tested.
|
||||
|
||||
Nx also supports [React component testing](/nx-api/react/generators/cypress-component-configuration).
|
||||
@@ -0,0 +1,37 @@
|
||||
## Examples
|
||||
|
||||
##### Basic Usage
|
||||
|
||||
Delegate the build of the project to a different target.
|
||||
|
||||
```json
|
||||
{
|
||||
"prod-build": {
|
||||
"executor": "@nx/angular:delegate-build",
|
||||
"options": {
|
||||
"buildTarget": "app:build:production",
|
||||
"outputPath": "dist/apps/app/production",
|
||||
"tsConfig": "apps/app/tsconfig.json",
|
||||
"watch": false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### Watch for build changes
|
||||
|
||||
Delegate the build of the project to a different target.
|
||||
|
||||
```json
|
||||
{
|
||||
"prod-build": {
|
||||
"executor": "@nx/angular:delegate-build",
|
||||
"options": {
|
||||
"buildTarget": "app:build:production",
|
||||
"outputPath": "dist/apps/app/production",
|
||||
"tsConfig": "apps/app/tsconfig.json",
|
||||
"watch": true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,84 @@
|
||||
This executor is a drop-in replacement for the `@angular-devkit/build-angular:dev-server` builder provided by the Angular CLI. In addition to the features provided by the Angular CLI builder, the `@nx/angular:dev-server` executor also supports the following:
|
||||
|
||||
- Serving applications with Vite when using the `@nx/angular:application` or `@nx/angular:browser-esbuild` executors to build them
|
||||
- Serving applications with webpack when using the `@nx/angular:webpack-browser` executor
|
||||
- Providing HTTP request middleware functions when the build target is using an esbuild-based executor
|
||||
- Incremental builds
|
||||
|
||||
## Examples
|
||||
|
||||
##### Using a custom webpack configuration
|
||||
|
||||
This executor should be used along with `@nx/angular:webpack-browser` to serve an application using a custom webpack configuration.
|
||||
|
||||
Add the `serve` target using the `@nx/angular:dev-server` executor, set the `build` target executor as `@nx/angular:webpack-browser` and set the `customWebpackConfig` option as shown below:
|
||||
|
||||
```json title="apps/my-app/project.json" {2,5-7,10-20}
|
||||
"build": {
|
||||
"executor": "@nx/angular:webpack-browser",
|
||||
"options": {
|
||||
...
|
||||
"customWebpackConfig": {
|
||||
"path": "apps/my-app/webpack.config.js"
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"executor": "@nx/angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "my-app:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "my-app:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development",
|
||||
}
|
||||
```
|
||||
|
||||
```js title="apps/my-app/webpack.config.js"
|
||||
module.exports = (config) => {
|
||||
// update the config with your custom configuration
|
||||
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
##### Providing HTTP request middleware function
|
||||
|
||||
The executor accepts an `esbuildMiddleware` option that allows you to provide HTTP require middleware functions that will be used by the Vite development server.
|
||||
|
||||
```json title="apps/my-app/project.json" {8}
|
||||
{
|
||||
...
|
||||
"targets": {
|
||||
"serve": {
|
||||
"executor": "@nx/angular:dev-server",
|
||||
"options": {
|
||||
...
|
||||
"esbuildMiddleware": ["apps/my-app/hello-world.middleware.ts"]
|
||||
}
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts title="apps/my-app/hello-world.middleware.ts"
|
||||
import type { IncomingMessage, ServerResponse } from 'node:http';
|
||||
|
||||
const helloWorldMiddleware = (
|
||||
req: IncomingMessage,
|
||||
res: ServerResponse,
|
||||
next: (err?: unknown) => void
|
||||
) => {
|
||||
if (req.url === '/hello-world') {
|
||||
res.end('<h1>Hello World!</h1>');
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
};
|
||||
|
||||
export default helloWorldMiddleware;
|
||||
```
|
||||
@@ -0,0 +1,33 @@
|
||||
## Examples
|
||||
|
||||
##### Simple Library
|
||||
|
||||
Creates the `my-ui-lib` library with an `ui` tag:
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```bash
|
||||
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`:
|
||||
|
||||
```bash
|
||||
nx g @nx/angular:library libs/nested/my-lib --importPath=@myorg/nested/my-lib
|
||||
```
|
||||
@@ -0,0 +1,17 @@
|
||||
## Examples
|
||||
|
||||
##### Basic Usage
|
||||
|
||||
Create a secondary entrypoint named `button` in the `ui` library.
|
||||
|
||||
```bash
|
||||
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.
|
||||
|
||||
```bash
|
||||
nx g @nx/angular:library-secondary-entry-point --library=ui --name=button --skipModule
|
||||
```
|
||||
@@ -0,0 +1,60 @@
|
||||
## Examples
|
||||
|
||||
##### Basic Usage
|
||||
|
||||
The Module Federation Dev Server will serve a host application and find the remote applications associated with the host and serve them statically also.
|
||||
See an example set up of it below:
|
||||
|
||||
```json
|
||||
{
|
||||
"serve": {
|
||||
"executor": "@nx/angular:module-federation-dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "host:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "host:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development",
|
||||
"options": {
|
||||
"port": 4200,
|
||||
"publicHost": "http://localhost:4200"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### Serve host with remotes that can be live reloaded
|
||||
|
||||
The Module Federation Dev Server will serve a host application and find the remote applications associated with the host and serve a set selection with live reloading enabled also.
|
||||
See an example set up of it below:
|
||||
|
||||
```json
|
||||
{
|
||||
"serve-with-hmr-remotes": {
|
||||
"executor": "@nx/angular:module-federation-dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "host:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "host:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development",
|
||||
"options": {
|
||||
"port": 4200,
|
||||
"publicHost": "http://localhost:4200",
|
||||
"devRemotes": [
|
||||
"remote1",
|
||||
{
|
||||
"remoteName": "remote2",
|
||||
"configuration": "development"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,5 @@
|
||||
## Information
|
||||
|
||||
This generator is usually used as part of the process of migrating from an Angular CLI Workspace to an Nx monorepo using `npx nx@latest init --integrated`.
|
||||
|
||||
You can read more about [migrating from Angular CLI to Nx here](/recipes/angular/migration/angular).
|
||||
@@ -0,0 +1,11 @@
|
||||
## Examples
|
||||
|
||||
##### Basic Usage
|
||||
|
||||
This generator allows you to convert an Inline SCAM to a Standalone Component. It's important that the SCAM you wish to convert has it's NgModule within the same file for the generator to be able to correctly convert the component to Standalone.
|
||||
|
||||
```bash
|
||||
|
||||
nx g @nx/angular:scam-to-standalone --component=libs/mylib/src/lib/myscam/myscam.ts --project=mylib
|
||||
|
||||
```
|
||||
@@ -0,0 +1,35 @@
|
||||
## Examples
|
||||
|
||||
The `setup-mf` generator is used to add Module Federation support to existing applications.
|
||||
|
||||
##### Convert to Host
|
||||
|
||||
To convert an existing application to a host application, run the following
|
||||
|
||||
```bash
|
||||
nx g setup-mf myapp --mfType=host --routing=true
|
||||
```
|
||||
|
||||
##### Convert to Remote
|
||||
|
||||
To convert an existing application to a remote application, run the following
|
||||
|
||||
```bash
|
||||
nx g setup-mf myapp --mfType=remote --routing=true
|
||||
```
|
||||
|
||||
##### Convert to Remote and attach to a host application
|
||||
|
||||
To convert an existing application to a remote application and attach it to an existing host application name `myhostapp`, run the following
|
||||
|
||||
```bash
|
||||
nx g setup-mf myapp --mfType=remote --routing=true --host=myhostapp
|
||||
```
|
||||
|
||||
##### Convert to Host and attach to existing remote applications
|
||||
|
||||
To convert an existing application to a host application and attaching existing remote applications named `remote1` and `remote2`, run the following
|
||||
|
||||
```bash
|
||||
nx g setup-mf myapp --mfType=host --routing=true --remotes=remote1,remote2
|
||||
```
|
||||
@@ -0,0 +1,38 @@
|
||||
This generator will generate stories for all your components in your project. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).
|
||||
|
||||
```bash
|
||||
nx g @nx/angular:stories project-name
|
||||
```
|
||||
|
||||
You can read more about how this generator works, in the [Storybook for Angular overview page](/recipes/storybook/overview-angular#auto-generate-stories).
|
||||
|
||||
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](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`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](/recipes/storybook/storybook-interaction-tests#setup-storybook-interaction-tests).
|
||||
|
||||
You must provide a `name` for the generator to work.
|
||||
|
||||
By default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing). 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
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```text
|
||||
*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx
|
||||
```
|
||||
|
||||
but you can change this behaviour easily, as explained above.
|
||||
@@ -0,0 +1,55 @@
|
||||
This generator will set up Storybook for your **Angular** project. By default, Storybook v10 is used.
|
||||
|
||||
```bash
|
||||
nx g @nx/angular:storybook-configuration project-name
|
||||
```
|
||||
|
||||
You can read more about how this generator works, in the [Storybook for Angular overview page](/recipes/storybook/overview-angular#generate-storybook-configuration-for-an-angular-project).
|
||||
|
||||
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](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`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`](https://storybook.js.org/docs/angular/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/recipes/storybook/storybook-interaction-tests#setup-storybook-interaction-tests).
|
||||
- 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](https://storybook.js.org/docs/angular/writing-tests/interaction-testing). 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
|
||||
|
||||
```bash
|
||||
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
|
||||
|
||||
```bash
|
||||
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:
|
||||
|
||||
```text
|
||||
*.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
|
||||
|
||||
```bash
|
||||
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`).
|
||||
@@ -0,0 +1,9 @@
|
||||
## 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.
|
||||
|
||||
```bash
|
||||
nx g @nx/angular:web-worker myWebWorker --project=myapp
|
||||
```
|
||||
@@ -0,0 +1,110 @@
|
||||
This executor is a drop-in replacement for the `@angular-devkit/build-angular:browser` builder provided by the Angular CLI. It builds an Angular application using [webpack](https://webpack.js.org/).
|
||||
|
||||
In addition to the features provided by the Angular CLI builder, the `@nx/angular:webpack-browser` executor also supports the following:
|
||||
|
||||
- Providing a custom webpack configuration
|
||||
- Incremental builds
|
||||
|
||||
:::tip[Dev Server]
|
||||
The [`@nx/angular:dev-server` executor](/nx-api/angular/executors/dev-server) is required to serve your application when using the `@nx/angular:webpack-browser` to build it. It is a drop-in replacement for the Angular CLI's `@angular-devkit/build-angular:dev-server` builder and ensures the application is correctly served with Webpack when using the `@nx/angular:webpack-browser` executor.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
##### Using a custom webpack configuration
|
||||
|
||||
The executor supports providing a path to a custom webpack configuration. This allows you to customize how your Angular application is built. It currently supports the following types of webpack configurations:
|
||||
|
||||
- `object`
|
||||
- `Function`
|
||||
- `Promise<object|Function>`
|
||||
|
||||
The executor will merge the provided configuration with the webpack configuration that Angular Devkit uses. The merge order is:
|
||||
|
||||
- Angular Devkit Configuration
|
||||
- Provided Configuration
|
||||
|
||||
To use a custom webpack configuration when building your Angular application, change the `build` target in your `project.json` to match the following:
|
||||
|
||||
```json title="project.json" {5,8-10}
|
||||
{
|
||||
...
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nx/angular:webpack-browser",
|
||||
"options": {
|
||||
...
|
||||
"customWebpackConfig": {
|
||||
"path": "apps/appName/webpack.config.js"
|
||||
}
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### Incrementally Building your Application
|
||||
|
||||
The executor supports incrementally building your Angular application by building the workspace libraries it depends on _(that have been marked as buildable)_ and then building your application using the built source of the libraries.
|
||||
|
||||
This can improve build time as the building of the workspace libraries can be cached, meaning they only have to be rebuilt if they have changed.
|
||||
|
||||
:::note[Performance]
|
||||
There may be some additional overhead in the linking of the built libraries' sources which may reduce the overall improvement in build time. Therefore this approach only benefits large applications and would likely have a negative impact on small and medium applications.
|
||||
:::
|
||||
|
||||
To allow your Angular application to take advantage of incremental building, change the `build` target in your `project.json` to match the following:
|
||||
|
||||
```json title="project.json" {5,8}
|
||||
{
|
||||
...
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nx/angular:webpack-browser",
|
||||
"options": {
|
||||
...
|
||||
"buildLibsFromSource": false
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### Using a custom index.html transformer
|
||||
|
||||
The executor supports providing a custom function to transform the `index.html` file after it has been generated. This allows you to modify the HTML content before it is written to disk.
|
||||
|
||||
To use a custom index.html transformer, create a file with a function that exports the transformer:
|
||||
|
||||
```javascript title="apps/appName/index-html-transformer.js"
|
||||
module.exports = (target, indexHtml) => {
|
||||
// Add a custom meta tag
|
||||
const customMeta = `<meta name="custom-meta" content="Custom value">`;
|
||||
return indexHtml.replace('</head>', `${customMeta}\n</head>`);
|
||||
};
|
||||
```
|
||||
|
||||
The transformer function receives two parameters:
|
||||
|
||||
- `target`: The Angular build target configuration object containing properties like `project`, `target`, and `configuration`
|
||||
- `indexHtml`: The generated HTML content as a string
|
||||
|
||||
Then update your `project.json` to use the transformer:
|
||||
|
||||
```json title="project.json" {5,8}
|
||||
{
|
||||
...
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nx/angular:webpack-browser",
|
||||
"options": {
|
||||
...
|
||||
"indexHtmlTransformer": "apps/appName/index-html-transformer.js"
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user