dotnet:core:blazor

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン		 前のリビジョン
dotnet:core:blazor [2019/08/18 14:12] – 作成 ともやんdotnet:core:blazor [2019/08/19 20:00] (現在) – [サブディレクトリで Blazor アプリが動作しない] ともやん
行 1: 行 1:
-====== Blazor アプリ ======+<html> 
 +  <style> 
 +    #blazor_app iframe { 
 +      border-width: 0px; 
 +      width: 100%; 
 +      height: 600px; 
 +    } 
 +  </style> 
 +</html> 
 +====== Blazor - Web ブラウザで動作する .NET Core 環境 ====== 
 +<WRAP prewrap 100% #blazor_app> 
 +<html> 
 +  <iframe src='/media/dotnet/core/blazor_app/'> 
 +  </iframe> 
 +</html> 
 +</WRAP>
  
 +===== 参考文献 =====
 +[[https://learn-blazor.com/|Introduction :: Learn Blazor]]\\
 +[[https://github.com/mono/mono/issues/11066|Using Roslyn in wasm-Project · Issue #11066 · mono/mono · GitHub]]\\
 +[[https://github.com/Suchiman/Runny|GitHub - Suchiman/Runny: Prototype of running roslyn in the browser via Blazor]]\\
 +
 +===== トラブルシューティング =====
 +
 +==== サブディレクトリで Blazor アプリが動作しない ====
 +テンプレートのアプリは **<base href="/" />** になっているので、配置する階層に合わせて修正する。\\
 +ここでは、**<base href="/media/dotnet/core/blazor_app/" />** に配置するように修正している。\\
 +これを適切に修正しないと、**blazor.webassembly.js** の **fetch** API 呼び出しなどがすべてサブディレクトリを無視して **https://www.tomoyan.net/_framework/** へ要求してしまい **404 Not Found** となってしまう。\\
 +<WRAP prewrap 100%>
 +<code html>
 +<!DOCTYPE html>
 +<html>
 +<head>
 +    <meta charset="utf-8" />
 +    <meta name="viewport" content="width=device-width">
 +    <title>blazorapp</title>
 +    <base href="/media/dotnet/core/blazor_app/" />
 +    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
 +    <link href="css/site.css" rel="stylesheet" />
 +</head>
 +<body>
 +    <app>Loading...</app>
 +
 +    <script src="_framework/blazor.webassembly.js"></script>
 +</body>
 +</html>
 +</code>
 +</WRAP>
 +
 +==== 「Incorrect response MIME type. Expected 'application/wasm'.」が発生する ====
 +<WRAP prewrap 100%>
 +<code>
 +WASM: wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'. blazor.webassembly.js:1
 +WASM: falling back to ArrayBuffer instantiation blazor.webassembly.js:1
 +WASM: Initialized blazor.webassembly.js:1
 +</code>
 +</WRAP>
 +Web サーバの **mime.types** に **application/wasm** **wasm** を追加する。\\
 +<code>
 +$ sudo vi /etc/mime.types
 +</code>
 +<file autoconf /etc/mime.types>
 +x-conference/x-cooltalk                         ice
 +x-epoc/x-sisx-app                               sisx
 +application/wasm                                wasm
 +</file>
 +設定を反映させるために Apache をリロードする。\\
 +<code>
 +$ sudo systemctl reload httpd
 +</code>
  • dotnet/core/blazor.1566105174.txt.gz
  • 最終更新: 2019/08/18 14:12
  • by ともやん