Angular's vite plugin doesn't consume code transformation of previous vite plugin in the chain

[TechAkayy]

Please provide the environment you discovered this bug in.

https://github.com/TechAkayy/my-analog-app-transform-hook-issue/blob/main/vite.config.ts#L9-L21

Which area/package is the issue in?

vite-plugin-angular

Description

@analogjs/vite-plugin-angular

Analog's vite plugin is not using the transformed code from the previous vite plugin. The transform hook must perform transformation on top of what was done by the previous plugin's (in the plugin chain) transform hook.

Please refer to the above github reproduction (stackblitz doesn't seem to work with .analog files), in which

• index.page.analog contains an image with a picture of a Kingfisher.
• in vite.config.ts, there is a inline vite plugin (before analog's vite plugin) which uses transform hook to change the picture to that of a Puppy.

I could be wrong here, but I notice that analog's vite plugin reads the file from the file system for it's code here, instead of using the code that came with the transform hook.

Here is an example of how Vue's & React's vite plugin's transform hook.

Please provide the exception or error you saw

Expected Result: Puppy image
Actual Result: Kingfisher image

Other information

I would be willing to submit a PR to fix this issue

• Yes
• No

[brandonroberts]

This is a known limitation with how Angular compilation works with Vite. The analog plugin needs to be first in the chain

[TechAkayy]

Thanks for the clarification 👍🏽 I believe it will be very helpful if this was added to the documentation in some form. The reason is there are numerous vite plugins that does various processing before passing it to SFC plugins. The transform hook is also used extensively to make changes to code in custom user-land plugins as workarounds a lot. Thanks.

[brandonroberts]

Good point and should need some clarification in the docs