miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

docs(angular): bring incremental build docs up to date (#23424)

Browse Source 
<!-- 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 -->
The incremental build docs for angular are currently outdated


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Bring the incremental build docs up to date


## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #
This commit is contained in:
Colum Ferry 2024-05-16 11:24:07 +01:00 committed by GitHub
parent 34547b30d1
commit b164569e9d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
docs/shared/guides/setup-incremental-builds-angular.md
View File

@ -3,47 +3,6 @@
In this guide we’ll specifically look into which changes need to be made to enable incremental builds for Angular In this guide we’ll specifically look into which changes need to be made to enable incremental builds for Angular
applications. applications.
## Requirements
If your library consumes any Angular package that has not been compiled with Ivy, you must ensure the
Angular compatibility compiler (`ngcc`) has run before building the library. The incremental build relies
on the fact that `ngcc` must have already been run. One way to do this is to run `ngcc` after every package
installation. You can check your `package.json` and make sure you have the following:
```jsonc {% fileName="package.json" %}
{
...
"scripts": {
...
"postinstall": "ngcc --properties es2015 browser module main",
...
}
...
}
```
{% callout type="warning" title="PNPM support" %}
To use `ngcc` with `pnpm`, set [`node-linker=hoisted` in `.npmrc`](https://pnpm.io/npmrc#node-linker) and explicitly declare `node-gyp-build` in `package.json`
See [angular/angular#50735](https://github.com/angular/angular/issues/50735), [nrwl/nx#16319](https://github.com/nrwl/nx/issues/16319) and [parcel-bundler/watcher#142](https://github.com/parcel-bundler/watcher/issues/142) for more details.
```ini {% fileName=".npmrc" %}
node-linker=hoisted
```
```jsonc {% fileName="package.json" %}
{
...
"devDependencies": {
...
"node-gyp-build": "4.6.0",
...
}
...
}
```
{% /callout %}
## Use buildable libraries ## Use buildable libraries
To enable incremental builds you need to use buildable libraries. To enable incremental builds you need to use buildable libraries.
@ -94,7 +53,7 @@ The `@nx/angular:package` executor also supports incremental builds. It is used
## Adjust the application executor ## Adjust the application executor
Change your Angular application’s "build" target executor to `@nx/angular:webpack-browser` and the "serve" target Change your Angular application’s "build" target executor to `@nx/angular:webpack-browser` and the "serve" target
executor to `@nx/web:file-server` as shown below: executor to `@nx/angular:dev-server` as shown below:
```jsonc ```jsonc
{ {
@ -116,9 +75,10 @@ executor to `@nx/web:file-server` as shown below:
"defaultConfiguration": "production" "defaultConfiguration": "production"
}, },
"serve": { "serve": {
"executor": "@nx/web:file-server", "executor": "@nx/angular:dev-server",
"options": { "options": {
"buildTarget": "my-app:build" "buildTarget": "my-app:build",
"buildLibsFromSource": false
}, },
"configurations": { "configurations": {
"production": { "production": {
@ -142,47 +102,7 @@ nx build my-app --parallel
To serve an application incrementally use this command: To serve an application incrementally use this command:
```shell ```shell
nx serve my-app --parallel nx serve my-app
```
{% callout type="note" title="Project configuration option" %}
You can specify the `--parallel` flags as part of the options property on the file-server executor in
your `project.json` file. The file-server executor will pass those to the `nx build` command it invokes.
{% /callout %}
```jsonc
{
"projectType": "application",
...
"targets": {
"build": {
"executor": "@nx/angular:webpack-browser",
"outputs": [
"{options.outputPath}"
],
"options": {
"buildLibsFromSource": false
...
},
"configurations": {
...
}
},
"serve": {
"executor": "@nx/web:file-server",
"options": {
"buildTarget": "my-app:build",
"parallel": true
},
"configurations": {
"production": {
"buildTarget": "my-app:build:production"
}
}
},
...
}
},
``` ```
### Build target name ### Build target name
@ -232,10 +152,10 @@ Say you have the same application above with a configuration as follows:
} }
}, },
"serve": { "serve": {
"executor": "@nx/web:file-server", "executor": "@nx/angular:dev-server",
"options": { "options": {
"buildTarget": "my-app:build-base", "buildTarget": "my-app:build-base",
"parallel": true "buildLibsFromSource": false
}, },
"configurations": { "configurations": {
"production": { "production": {