Fix the import for apps with a base path (#3092)

Author: mattleibow

samples/Basic/BlazorWebAssembly/SkiaSharpSample/Properties/launchSettings.json

@@ -20,6 +20,31 @@
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
+    },
+    // Uncomment the <base> element in index.html to use these profiles
+    "http/app": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "launchUrl": "app",
+      "commandLineArgs": "--pathbase=/app",
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/app/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "http://localhost:5000",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https/app": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "launchUrl": "app",
+      "commandLineArgs": "--pathbase=/app",
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/app/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "https://localhost:5001;http://localhost:5000",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
     }
   }
 }

samples/Basic/BlazorWebAssembly/SkiaSharpSample/wwwroot/index.html

@@ -5,7 +5,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SkiaSharpSample</title>
-    <base href="/" />
+    <!-- <base href="/" /> -->
+    <base href="/app/" />
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link rel="stylesheet" href="css/app.css" />
     <link rel="icon" type="image/png" href="favicon.ico" />

source/SkiaSharp.Views/SkiaSharp.Views.Blazor/Internal/JSModuleInterop.cs

@@ -20,7 +20,7 @@ internal partial class JSModuleInterop : IDisposable
 		public JSModuleInterop(IJSRuntime js, string moduleName, string moduleUrl)
 		{
 #if NET7_0_OR_GREATER
-			moduleTask = JSHost.ImportAsync(moduleName, "/" + moduleUrl);
+			moduleTask = JSHost.ImportAsync(moduleName, "../" + moduleUrl);
 #else
 			if (js is not IJSInProcessRuntime)
 				throw new NotSupportedException("SkiaSharp currently only works on Web Assembly.");

source/SkiaSharp.Views/SkiaSharp.Views.Blazor/SkiaSharp.Views.Blazor.csproj

@@ -12,6 +12,12 @@
     <PackageTags>aspnet;blazor;web</PackageTags>
   </PropertyGroup>
 
+  <PropertyGroup>
+    <TypeScriptTarget>es2015</TypeScriptTarget>
+    <TypeScriptModuleKind>es2015</TypeScriptModuleKind>
+    <TypeScriptNoImplicitAny>True</TypeScriptNoImplicitAny>
+  </PropertyGroup>
+
   <ItemGroup>
     <SupportedPlatform Include="browser" />
   </ItemGroup>
@@ -21,7 +27,7 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.0" Condition="$(TargetFramework.StartsWith('net7.0'))" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" Condition="$(TargetFramework.StartsWith('net8.0'))" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.0" Condition="$(TargetFramework.StartsWith('net9.0'))" />
-    <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="5.5.3" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="5.7.1" PrivateAssets="all" />
   </ItemGroup>
 
   <ItemGroup>