Support indexFileTransformer in @nx/angular:browser-esbuild executor

[ArielGueta]

Current Behavior

After updating to beta version and started using the @nx/angular:browser-esbuild I have the following issues:

1. Schema error when using "executor": "@nx/angular:browser-esbuild":

Data path "" must NOT have additional properties(indexFileTransformer).

2. Running nx build production:

Error: NX 'indexFileTransformer' is not found in schema

3. Warnings:

Project 'ui' contains extension with invalid name ($schema).
Project 'ui' contains extension with invalid name (tags).__

Expected Behavior

It should work without errors

GitHub Repo

No response

Steps to Reproduce

Update to latest beta version and use the @nx/angular:browser-esbuild executor with indexFileTransformer

Nx Report

none

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[leosvelperez]

Thanks for reporting this!

The indexFileTransformer is not supported by the @nx/angular:browser-esbuild. The error you're getting is a legit error telling you that option is not part of the executor schema. Note it's not supported by the @angular-devkit/build-angular:browser-esbuild schema either. It's only supported when using the builder programmatically.

That said, we can add support for it similar to how we added it to the @nx/angular:webpack-browser. I changed this to a feature request.

[leosvelperez]

3. Warnings:

Project 'ui' contains extension with invalid name ($schema).
Project 'ui' contains extension with invalid name (tags).

I haven't been able to reproduce this. Could you provide a repo so I can reproduce it and troubleshoot it?

[leosvelperez]

It's only supported when using the builder programmatically.

That said, we can add support for it similar to how we added it to the @nx/angular:webpack-browser.

I correct myself. The @angular-devkit/build-angular:browser-esbuild builder doesn't support providing an index.html transformer function at all. Not even when using the programmatic API. It's only supported by the @angular-devkit/build-angular:dev-server builder. This is different than the @angular-devkit/build-angular:browser builder which does accept providing the transformer when using it programmatically.

This blocks us from adding support for it to the @nx/angular:browser-esbuild executor. I'll ping the Angular team on this to see if we can unblock this.

[ArielGueta]

I see that you removed the comments where you said that it will be supported. The weird thing is that when I comment the Angular schema protection it does work. I put a log in the transformer file and I see it.

[leosvelperez]

I see that you removed the comments where you said that it will be supported.

Sorry, I'm unsure what you refer to. I didn't remove any comments. I only corrected myself saying we can't support it if the underlying Angular CLI builder doesn't allow to provide it.

The weird thing is that when I comment the Angular schema protection it does work. I put a log in the transformer file and I see it.

Are you referring the serve target works? That's expected because the dev-server uses the build target indexFileTransformer and process it. What I was referring above is that, while serving your application would transform the index.html correctly, building the application won't, because the builders use for building the application don't support providing such transformer.

[ArielGueta]

Sorry, my bad!

See here #20311 (comment)

[ArielGueta]

So you're saying that only the dev-server supports it? If we can't use it also for the build it's pretty redundant for the dev server.

[leosvelperez]

Oh, that comment. I wrongly didn't check that the browser-esbuild builder didn't support it when you asked in that other issue. I only focused on the fact the dev-server supports it. My bad. I didn't remove it though 😅

Anyways, answering the question more accurately, the dev-server does support build targets specifying the indexFileTransformer option, but the Angular CLI browser-esbuild builder doesn't allow providing it. Therefore, it can't be supported until the Angular CLI builder supports it.

I already pinged the Angular team on this. I'm unsure whether the idea is to use esbuild plugins for that or if they'll continue supporting a specific index.html tranformer function. I'm working on adding support for esbuild plugins, and that should allow you to transform your index.html contents if the transformer is not available.

[leosvelperez]

BTW, I was able to reproduce the warnings you mentioned. That'll be fixed by #20499.

[r-LaForge]

To make this issue easier to find, and it appears to be specifically about the indexFileTransformer option, would the title be more appropriately worded as "@nx/angular:browser-esbuild executor does not support indexFileTransformer" or something similar?

This is something I'm watching for my own team's use-case as well.

[leosvelperez]

Quick update:

Support for ESBuild plugins is being added in #20504. In the absence of a specific indexFileTransformer option, a simple plugin can be written to perform the transformations you need.

I'm still waiting on feedback from the Angular team on this matter. If it takes too long or it doesn't move forward, we could look into supporting it ourselves by passing it along to the underlying Angular CLI builder as a plugin we create on the fly that executes the developer-provided transformation function.

[leosvelperez]

FYI: this is coming in Angular 17.1.0: angular/angular-cli@66edac4. Once it's released and we release the support for that Angular version (we're already working on it), you'll be able to use it.

[leosvelperez]

This was added in #21026 and released in Nx 17.3.0.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.