Support angular build outputPath as Object type

[TanMichael]

Current Behavior

As Angular already support to config "outputPath" as Object angular/angular-cli#26304 (comment)
but if config:

"outputPath": {
"base": "dist/apps/appname",
"browser": "web"
},
But when triggering nx build, the NX deamon crashes:

[NX Daemon Server] - 2024-06-28T07:50:37.520Z - Handled REQUEST_PROJECT_GRAPH. Handling time: 533. Response time: 2.
C:\git_source\fone-web-classic\node_modules.pnpm\nx@19.3.0\node_modules\nx\src\hasher\native-task-hasher-impl.js:32
const plans = this.planner.getPlansReference(tasks.map((t) => t.id), taskGraph);
^

Error: Failed to convert JavaScript value Object {"base":"dist/planning","browser":"web"} into rust type String
at NativeTaskHasherImpl.hashTasks (C:\git_source\fone-web-classic\node_modules.pnpm\nx@19.3.0\node_modules\nx\src\hasher\native-task-hasher-impl.js:32:36)
at InProcessTaskHasher.hashTasks (C:\git_source\fone-web-classic\node_modules.pnpm\nx@19.3.0\node_modules\nx\src\hasher\task-hasher.js:53:50)
at handleHashTasks (C:\git_source\fone-web-classic\node_modules.pnpm\nx@19.3.0\node_modules\nx\src\daemon\server\handle-hash-tasks.js:30:56)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async handleResult (C:\git_source\fone-web-classic\node_modules.pnpm\nx@19.3.0\node_modules\nx\src\daemon\server\server.js:130:16)
at async handleMessage (C:\git_source\fone-web-classic\node_modules.pnpm\nx@19.3.0\node_modules\nx\src\daemon\server\server.js:92:9)
at async C:\git_source\fone-web-classic\node_modules.pnpm\nx@19.3.0\node_modules\nx\src\daemon\server\server.js:55:9 {
code: 'StringExpected'
}

Node.js v20.11.1

Expected Behavior

The NX deamon should not crash.

GitHub Repo

No response

Steps to Reproduce

1. config with object
2. run build script

There is already a same issue #21480 , but it had been closed.

[jaysoo]

Nx expects outputPath to be a string. It's not possible for us to support objects since the structure is unknown. In Angular's case, if you are using the object value for outputPath, it is no longer a single output entry.

The fix for Angular would be to replace {options.outputPath} in the outputs array (in project.json) with an expanded entry.

For example,

From:

{
  "targets": {
    "build": {
      "outputs": ["{options.outputPath}"]
    }
  }
}

To this:

{
  "targets": {
    "build": {
      "outputs": [
        "{workspaceRoot}/dist/apps/appname/base}",
        "{workspaceRoot}/dist/apps/appname/web}",
      ]
    }
  }
}

Or whatever the actual output paths are.

[TanMichael]

Thanks @jaysoo for the reply!
I've tried change {options.outputPath} to {outputs} array,

but I got another error:

Then I checked nx docs.
It says:

Targets may define outputs to tell Nx where the target is going to create file artifacts that Nx should cache. "outputs": ["{workspaceRoot}/dist/libs/mylib"] tells Nx where the build target is going to create file artifacts.

It seems not for config the build output.

Back to the issue, the Angular fix angular/angular-cli#26304 (comment) was to resolve that user can't define the browser folder (additional browser directory created in outputPath) name for application build mode of angular 17.
So is there any solution in nx to achieve that?

[TanMichael]

Here is the definition from angular doc:

The outputPath option can be either a String which will be used as the base value or an Object for more fine-tune configuration.

https://v17.angular.io/guide/workspace-config#output-path-configuration

[TanMichael]

Hello，any updates?

[ringtail003]

I faced same error, the daemon said "Failed to convert JavaScript value".
Then updated project.json as follows and was able to build.
Are there any plans to fix it?

@nx/angular: 20.0
@angular/cli: 18.2
Node.js v22.9

// apps/project1/project.json

"targets": {
  "build": {
    "outputs": ["{options.outputPath}"],
    "options": {
      "outputPath": "dist/apps/project1",
      ...
    },
    "configurations": {
      "production": {
        "outputPath": {
          "base": "dist/project1",
          "browser": ""
        },
        ...