0e56533d01
- Calls out the `@nx/angular:dev-server` executor as required when using `@nx/angular` build executors - Improves & aligns executor descriptions and examples Main docs updated with the callouts: https://nx-dev-git-fork-leosvelperez-docs-angular-executors-nrwl.vercel.app/nx-api/angular/executors/application https://nx-dev-git-fork-leosvelperez-docs-angular-executors-nrwl.vercel.app/nx-api/angular/executors/browser-esbuild https://nx-dev-git-fork-leosvelperez-docs-angular-executors-nrwl.vercel.app/nx-api/angular/executors/webpack-browser https://nx-dev-git-fork-leosvelperez-docs-angular-executors-nrwl.vercel.app/nx-api/angular/executors/dev-server The rest of the Angular executors' descriptions were also updated. <!-- Please make sure you have read the submission guidelines before posting an PR --> <!-- https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr --> <!-- Please make sure that your commit message follows our format --> <!-- Example: `fix(nx): must begin with lowercase` --> ## 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 #
78 lines
2.5 KiB
Markdown
78 lines
2.5 KiB
Markdown
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
|
|
|
|
{% callout type="check" title="Dev Server" %}
|
|
The [`@nx/angular:dev-server` executor](https://nx.dev/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.
|
|
{% /callout %}
|
|
|
|
## Examples
|
|
|
|
{% tabs %}
|
|
{% tab label="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 {% fileName="apps/my-app/project.json" highlightLines=["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 {% fileName="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 {% fileName="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 {% fileName="apps/my-app/src/types.d.ts" %}
|
|
declare const PLUGIN1_TEXT: number;
|
|
declare const PLUGIN2_TEXT: string;
|
|
```
|
|
|
|
{% /tab %}
|
|
{% /tabs %}
|