search

angular-extensions / elements

Lazy load Angular Elements (or any other web components / custom elements ) with ease!
https://angular-extensions.github.io/elements/
MIT License
317 stars 40 forks source link

Add support for dynamically resolved URLs #28

Open gshokanov opened 4 years ago

gshokanov commented 4 years ago

Hi 👋 I have encountered the following issue with this package: it is impossible to dynamically resolve URLs at runtime while still compiling using AOT. I have a use case where the URL is resolved dynamically at runtime in a sync way. This URL may be configured by the running sub-application or it may be configured by one of web-components. The API looks somewhat like this:

const lazyElementConfig: LazyElementModuleOptions = {
  elementConfigs: [
    { tag: 'ba-menu', url: resolveUrl('ba-menu') }
  ]
}

My team uses a custom package to store some data on the window object to share it between micro-frontends. This data is resolved before the application's bootstrap. But during the compilation, Angular aggressively optimizes this value to undefined, which obviously breaks the application. Currently, the workaround is to manually provide URLs to the directive in templates. I think it could be fixed if elementConfigs could accept url as a function that resolves to URL value. Could you please look into it? I'd be happy to contribute if you need any help.

tomastrajan commented 4 years ago

Hi @MagicCurlyHair !

As you said, you can currently use directive directly , but I understand it would be nicer experience if you could also pre-configure it in a central location.

And yes the main cause of this is Angulars AOT compilation...

Static javascript function are well supported by the AOT compilation so passing one in the config should work...

As for the impl, we could check if the value is string or function and call it if its a function but it should be sync!

One more question would be if we should.support this for every prop or just make the whole config either object or a function which returns a config object which sounds more reasonable.

Would you have a look and make it happen ?

gshokanov commented 4 years ago

@tomastrajan Great idea with the function returning the whole config object! I think this is the better option.

Regarding the function itself, I know that it must be sync, this is not a problem.

I should have some spare time by the end of the week, I will look into it and make a PR.

felipeplets commented 4 years ago

@gshokanov I know it is not the same thing, but there is a feature that we introduced in 10.1 that allow using import maps that allows dynamic URL definition.

Check the example "Using import maps (SystemJS is required)" in the documentation: https://angular-extensions.github.io/elements/#/examples/basic