CODEWITHSUNDEEP
javascriptasp.net-coreblazorstaticresource
aaperfilev
aaperfilev

Reputation: 41

Blazor server app cannot access the static content of the subproject

I've created

I've added the MyClassLibrary project to the dependencies of the BlazorServerApp. Then I've added wwwroot folder to the MyClassLibrary project and added test.js file to this folder.

I've edited the MyClassLibrary project file as follows:

<Project Sdk="Microsoft.NET.Sdk">    
  <PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
    <AssemblyName>MyClassLibrary</AssemblyName>
    <RootNamespace>MyClassLibrary</RootNamespace>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="wwwroot\**\*.js" LogicalName="blazor:js:%(RecursiveDir)%(Filename)%(Extension)" />
  </ItemGroup>    
</Project>

Blazor web app call the UseStaticFiles method in Startup, which enables static files to be served:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
}

I've added the test.js as <script src="_content/MyClassLibrary/test.js"></script> in the _Host.cshtml (BlazorServerApp project):

@page "/"
@namespace BlazorServerApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorServerApp</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <script src="_content/MyClassLibrary/test.js"></script>
</body>
</html>

However, when I run the BlazorServerApp project the error appears in the browser:

GET https://localhost:5001/_content/MyClassLibrary/test.js net::ERR_ABORTED 404

Developer Console of the Browser

That is, the web app doesn't find such a resource at the specified path.

Can anyone explain why this is happening and what needs to be done in order for the application to access static resources (such as js or css) in other dependent projects (net standard class library in my case)?

Upvotes: 4

Views: 2838

Answers (2)

Crustyeyelids
Crustyeyelids

Reputation: 540

I know this was about two years ago, but I found an answer to this.

If you are running your app in Development, chances are you are finding your static web assets just fine. But, if you change your ASPNETCORE_ENVIRONMENT to anything else you will find you get a bunch of 404 errors when trying to get your assets.

To work around this add StaticWebAssetsLoader.UseStaticWebAssets(builder.Environment,builder.Configuration); to your main Main method, or your Program.cs in .net 6.

I found this information here on the aspnetcore github. They talk more about the static asset loader here which is where I found how to use it, but the issue on 38212 seemed to be unrelated. I didn't do a deep dive on how the static asset loader worked though, or why it's needed.

Upvotes: 3

Remi THOMAS
Remi THOMAS

Reputation: 920

Open the component project properties and go to package tab.

You must set a value in Package id

Then you use this id to specify the path

<script src="_content/package_id/test.js"></script>

Upvotes: 2

Related Questions