I am using Abp.io for a project. I have recreated this project with minimal code twice and i’m still running into this issue.

I have a function, using IJSRuntime & IJSObjectReference, that calls Azure Blob and should download a file.

However, I get the error message cannot find ‘downloadFile’ in the debugger, even though the function is in the global.js file (both on my local file and in chrome developer tools).

For ABP, you need to add the script into their BundleContributor class and then
you have to use their CLI to bundle any new JS file into the global file. abp bundle -f.

BundleContributor

public class CWEMPBundleContributor : IBundleContributor
{
    public void AddScripts(BundleContext context)
    {
        context.Add("./scripts/file.js");
    }

    public void AddStyles(BundleContext context)
    {
        context.Add("main.css", true);
    }
}

On my Page code I call the IJSObjectReference in the OnInitializedAsync() function.

protected override async Task OnInitializedAsync()
{
    _jsModule = await JsRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/file.js");
    PayStubsList = await AzureService.GetPayStubListAsync();
    await base.OnInitializedAsync();
}

When I test this by clicking the download button, it calls this function:

private async Task Download(string name)
{
    var contentDto = await AzureService.GetFileAsync(name);
    try
    {
        await _jsModule.InvokeVoidAsync("downloadFile", contentDto.FileName, contentDto.Content);
    }
    catch (Exception e)
    {
        Console.WriteLine(e);
        throw new UserFriendlyException($"Error Downloading the File.");
    }

}

When called, it catches the exception, as it should; but I have no idea why since the functions appear in the global.js file (both locally in my code and in chrome).

global.js local

function downloadFile(n,t){const u=new Blob([t],{type:"application/octet-stream"}),r=URL.createObjectURL(u),i=document.createElement("a");i.href=r;i.download=n;i.click();URL.revokeObjectURL(r)}function viewFile(n,t){const u=new Blob([t],{type:"application/octet-stream"}),r=URL.createObjectURL(u),i=document.createElement("a");i.href=r;i.target="_blank";document.body.appendChild(i);i.click();URL.revokeObjectURL(r)};

Here is the unbundled and minified version file.js:

function downloadFile(fileName, byteArray) {
    // Convert the byte array to a Blob
    const blob = new Blob([byteArray], { type: 'application/octet-stream' });

    // Create an object URL for the Blob
    const url = URL.createObjectURL(blob);

    // Create an anchor element for the download link
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName; // Set the desired file name

    // Trigger the download
    link.click();

    // Clean up the object URL
    URL.revokeObjectURL(url);
}

function viewFile(fileName, byteArray) {
    // Convert the byte array to a Blob
    const blob = new Blob([byteArray], { type: 'application/octet-stream' });

    // Create an object URL for the Blob
    const url = URL.createObjectURL(blob);

    // Create an anchor element for the download link
    const link = document.createElement('a');
    link.href = url;
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();

    // Clean up the object URL
    URL.revokeObjectURL(url);
}

I have tried to clear the application cache/local storage/ and all others. I did a hard refresh on the browser, deleted all bin/obj files, did a clean and rebuild, but still get this error.

Any pointers in the right direction would be helpful!