Skip to content

Feat: Support vite module federation #1659

Open
@protoEvangelion

Description

@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
  1. 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(', ')}])`
                            })
                        }
  1. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions