dotnet:core:blazor

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
dotnet:core:blazor [2019/08/18 20:22] – ともやんdotnet:core:blazor [2019/08/19 20:00] (現在) – [サブディレクトリで Blazor アプリが動作しない] ともやん
行 1: 行 1:
-<ifauth !@loggedinusers><html> 
-<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
-<script> 
-     (adsbygoogle = window.adsbygoogle || []).push({ 
-          google_ad_client: "ca-pub-0791334967460971", 
-          enable_page_level_ads: true 
-     }); 
-</script></html></ifauth> 
 <html> <html>
   <style>   <style>
行 12: 行 4:
       border-width: 0px;       border-width: 0px;
       width: 100%;       width: 100%;
-      height: 100%;+      height: 600px;
     }     }
   </style>   </style>
 </html> </html>
-====== Blazor アプリ ======+====== Blazor - Web ブラウザで動作する .NET Core 環境 ======
 <WRAP prewrap 100% #blazor_app> <WRAP prewrap 100% #blazor_app>
 <html> <html>
-  <iframe src='/_media/dotnet/core/blazor_app/index.html'>+  <iframe src='/media/dotnet/core/blazor_app/'>
   </iframe>   </iframe>
 </html> </html>
 </WRAP> </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.1566127321.txt.gz
  • 最終更新: 2019/08/18 20:22
  • by ともやん