[blazor]別プロジェクトで作成したコンポーネントのJavaScriptが動かない

前提

blazor(サーバー)で開発しています。

.NETからJavascriptを呼び出すコンポーネントを作成し動作することが確認できたので、
メインプロジェクト(Main)とユーティリティプロジェクト(Util)の2つのプロジェクトを作成し、
Javascriptを呼び出すコンポーネントをユーティリティプロジェクトに配置して
メインプロジェクトからコンポーネントを読み込んだところ、Javascriptが動作しません。

発生している問題・エラーメッセージ

ExecutionContext.csが見つかりません
現在の呼び出し履歴のフレームのソースを表示するには、ExecutionContext.cs を見つける必要があります

該当のソースコード

Mainプロジェクトのコンポーネント

razor
1<body>
2    <Util.Component1/>
3</body>

Utilプロジェクトに作成したコンポーネント(Component1.razor)

razor
1@using Microsoft.JSInterop
2@inject IJSRuntime JSRuntime
3
4<div class="my-component">
5    This Blazor component is defined in the <strong>Util</strong> package.
6</div>
7
8@code {
9
10    protected async override void OnInitialized()
11    {
12        var module = await JSRuntime.InvokeAsync<IJSObjectReference>(
13           "import", "/wwwroot/Test.js"
14        );
15
16        await module.InvokeVoidAsync("outputLog", "hogehoge");
17    }
18}

Utilプロジェクトに作成したJavascript(Test.js)

razor
1export function outputLog(obj) {
2    alert(obj);
3}

試したこと

Javascriptの配置場所をUtilプロジェクトのwwwrootフォルダからMainプロジェクトのwwwrootフォルダに
変更したところ動作することを確認いたしました。
JSRuntime.InvokeAsync<IJSObjectReference>で指定しているJavascript配置場所が誤っているのだろうという事は
推察出来ますが具体的にどう直せばいいのかがわかりません。

行動規範の内容に同意します

回答2件

私もあまり Blazor は慣れていないので確たることは言えないのですが、ご承知おきを。

JSRuntime.InvokeAsyncで実行するimportは、結局のところ動作しているWebサーバ（Mainプロジェクトで作成されたWeb環境）上で指定のjsファイルをURLで探しています。
Mainプロジェクト側のwwwroot下にちゃんとjsファイルがないとダメなのです。

とはいえUtilプロジェクトで使うjsファイルはUtilプロジェクト内で管理したいのは当然のこと。
UtilプロジェクトとMainプロジェクトが同一ソリューション内であれば、ビルドイベントを使ってjsファイルをMainプロジェクトのwwwroot下にコピーするコマンドを書くのも一つの手だと思います。

投稿2021/05/19 09:48