Feat: Support vite module federation

[protoEvangelion]

Which scope/s are relevant/related to the feature request?

vite-plugin-angular

Information

Hey there 👋 I'm using NX + analog/vite + vite module federation plugin (@module-federation/vite).

This plugin is pretty close to working out of the box but I had to change a few things to support cors, update style urls, and choose the correct settings for the analog/vite plugin.

@brandonroberts Would you be open to a PR to make this dev experience a bit smoother? I'm open to the fact that there is probably a much cleaner way to do this 😅 Let me know if a repo demo would be helpful.

Describe any alternatives/workarounds you're currently using

Manually updated angular-vite-plugin.js using bun patch to apply these changes:

1. Fix CORS when the host server is requesting assets from remote server. I added this to the configureServer vite hook in ./src/lib/angular-vite-plugin.js:

                        res.setHeader('Access-Control-Allow-Origin', '*'); // Allow all origins
                        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); // Allow methods
                        res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); // Allow headers
                        res.setHeader('Access-Control-Allow-Credentials', 'true'); // Allow credentials if necessary

2. Update style urls to point to correct server in configureServer as well:

                        const result = await fileEmitter?.(resolvedId);
                        // Prefix css path with correct server
                        const regex = /ɵɵExternalStylesFeature\(\[(.*?)\]\)/
                        if (result.hmrUpdateCode && options.port) {
                            result.hmrUpdateCode = result.hmrUpdateCode.replace(regex, (match, p1) => {
                                const newArray = p1.split(',').map(item => `"${'http://localhost:' + options.port + '/' + item.trim().replace(/^"|"$/g, '')}"`)
                                return `ɵɵExternalStylesFeature([${newArray.join(', ')}])`
                            })
                        }

3. Additionally for [FIX]: Speed up Angular Vite Plugin #2 I had to add that same block in a custom transform plugin because I think the above only applies after an hmr update

Finally some weird things I discovered is I can't change vite base to something besides / & I had to turn off ssr ssr: false.

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

• Yes
• No

[brandonroberts]

Thanks @protoEvangelion. A demo repo would be helpful. From what I understand, SSR is not currently supported with the Module Federation Vite package.