How to pack a razor class library with some static assets? #50499

SKYC829 · 2023-09-04T02:58:21Z

SKYC829
Sep 4, 2023

Hi guys:
I'm a newer in blazor,razor,blazor hybrid and i have some confused in load a script from an external js file.
My expected effect is make my library like Mudblazor that can import js or css file into some blazor (hybrid) project by using tag <script src="_content/{PACKAGE ID}/{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}.js"></script>. So i created a solution BlazorHybridProject means it's a test project and a solution JsLibraryProject means it's a RCL project and BlazorHybridProject will reference it.
After projects created, my index.html looks like:

<!--index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>BlazorApp1.WASM</title>
	<base href="/" />
	<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
	<link href="css/app.css" rel="stylesheet" />
	<link href="BlazorApp1.WASM.styles.css" rel="stylesheet" />
</head>

<body>
	<div id="app">Loading...</div>

	<div id="blazor-error-ui">
		An unhandled error has occurred.
		<a href="" class="reload">Reload</a>
		<a class="dismiss">🗙</a>
	</div>
	<script src="_framework/blazor.webassembly.js"></script>
	<!--for import my rcl project's js file-->
	<script src="_content/BlazorApp1.JsLibrary/exampleJsInterop.min.js"></script>
	<!--for import mudblazor project's js file-->
	<script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>

</html>

And my Counter.razor looks like:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    // for import and invoke js function : prompt which is located at wwwroot directory in BlazorApp1.UI project
    [Inject]
    public ExampleJsInterop ExampleJsInterop{ get; set; }

    // for import and invoke js function: prompt1 which is located at wwwroot directory in BlazorApp1.JsLibrary project
    [Inject]
    public ExampleJsInteropFromLibrary JsInteropFromLibrary { get; set; }

    private void IncrementCount()
    {
        currentCount++;
        ExampleJsInterop?.Prompt($"The count in BlazorApp1.UI.Counter is :{currentCount}");
        JsInteropFromLibrary?.Prompt($"The count in BlazorApp1.UI.Counter is :{currentCount}");
    }
}

ExampleJsInteropFromLibrary.cs like:

using Microsoft.JSInterop;

namespace BlazorApp1.JsLibrary
{
    // This class provides an example of how JavaScript functionality can be wrapped
    // in a .NET class for easy consumption. The associated JavaScript module is
    // loaded on demand when first needed.
    //
    // This class can be registered as scoped DI service and then injected into Blazor
    // components for use.

    public class ExampleJsInteropFromLibrary : IAsyncDisposable
    {
        private readonly Lazy<Task<IJSObjectReference>> moduleTask;

        public ExampleJsInteropFromLibrary(IJSRuntime jsRuntime)
        {
            moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>(
                "import", "./_content/BlazorApp1.JsLibrary/exampleJsInterop.min.js").AsTask());
        }

        public async ValueTask<string> Prompt(string message)
        {
            var module = await moduleTask.Value;
            return await module.InvokeAsync<string>("showPrompt1", message);
        }

        public async ValueTask DisposeAsync()
        {
            if (moduleTask.IsValueCreated)
            {
                var module = await moduleTask.Value;
                await module.DisposeAsync();
            }
        }
    }
}

When i build and run my project and click the Click me button in counter page, the embedded js file in BlazorApp1.UI project is works well but i get an error GET https://localhost:7090/_content/BlazorApp1.JsLibrary/exampleJsInterop.min.js net::ERR_ABORTED 404 in chrome console and i can't find my BlazorApp1.JsLibrary/exampleJsInterop.min.js in chrome dev-tools's Sources tab. could anyone tell me where i did it wrong or anyone can tell me how can i pack my razor class library like the Mudblazor do?

Attaches:

Chrome console:

Chrome sources:

My project zip file:
Blazor Js Isolation.zip

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to pack a razor class library with some static assets? #50499

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

How to pack a razor class library with some static assets? #50499

Uh oh!

SKYC829 Sep 4, 2023

Replies: 0 comments

SKYC829
Sep 4, 2023