CssEvents TransitionEventService tries to dynamically inject transitionEvents.min.js with relative path which produces invalid links

[umahanov]

I have a blazor server app.

When I try to use Modal dialog component, which requires CssEvents component on my pages TransitionEventService produces transitionEvents.min.js with invalid path.

Microsoft.JSInterop.JSException: Failed to fetch dynamically imported module: http://localhost:5258/#registration-form_content/Majorsoft.Blazor.Components.CssEvents/transitionEvents.min.js

This happens because TransitionEventService tries to inject it with relative path and not absolute.

private async Task CheckJsObjectAsync()
    {
      if (this._transitionJs != null)
        return;
      this._transitionJs = await this._jsRuntime.InvokeAsync<IJSObjectReference>("import", (object) "./_content/Majorsoft.Blazor.Components.CssEvents/transitionEvents.min.js");
    }

To solve this issue I created my own TransitionEventService and couple of internal classes to simply inject NavigationManager in it

    private async Task CheckJsObjectAsync()
    {
      if (this._transitionJs != null)
        return;
      this._transitionJs = await this._jsRuntime.InvokeAsync<IJSObjectReference>("import", (object) _navigationManager.ToAbsoluteUri("./_content/Majorsoft.Blazor.Components.CssEvents/transitionEvents.min.js"));
    }

The problem is that I need to recreate each service file for each js and css services. It is easier to write my own component. Can you please fix it or maybe you have a better solution for that

It seems to work, but I am not sure this is the best way to do it.