Activities of "blepo"

Hi, during this weekend i managed to isolate the problematic code and create a workaround. The issue is in App.razor file in the Blazor project. The App.razor is generated automatically by the Blazor WebApp template from ABP studio. This line:

<AbpStyles BundleName="@BlazorLeptonXThemeBundles.Styles.Global" WebAssemblyStyleFiles="GlobalStyles" @rendermode="InteractiveAuto" />

Causes the app to reload styles upon the WebAssembly module load. This causes the styling of the app to go all over the place, the icons disappear, etc. Removing the 'WebAssemblyStyleFiles' option and manually including the style css files actually fixes the issue:

<AbpStyles BundleName="@BlazorLeptonXThemeBundles.Styles.Global" @rendermode="InteractiveAuto" />
<!-- Manual CSS links -->
<link href="global.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" />
<link href="blazor-global-styles.css" rel="stylesheet" />

I don't know, however, why this happens. Is it a bug in ABP, or something about my configuration? Either way, is anyone encounters a similar problems, this seems to work for now.

I'm not sure that this is the case. Even in the thread you mentioned, https://abp.io/support/questions/8767/Lagging-and-loading-time-of-Blazor-Web-App-Template-Application, it can be seen that this stuff does not happen. The lag in loading, yes, but not the other issues.,

I appreciate your reluctance to jump into such a vague problem, but this is a critical issue for us. I would very much like to use my support token on this problem. I can provide the project, the har file from the network inspector, etc.

Regarding the loading time, it is probably exactly as you say. However, waht about the icons suddenly vanishing from all menus, and the body of the page suddenly expanding vertically?

Hi, I'm having issues with the loading process of my Blazor WebAssembly module in Blazor WebApp project.

Loading recording: https://stgambit-my.sharepoint.com/:v:/p/blazej_leporowski/ES0tOPaTj11PqEIJjNEUSh0BdG3mc35imkOdk45mOMtXeA?e=Mt7M56

Initial load problems When the project starts, I can see the parts of the UI that come from the project itself, and some ABP modules. I canno see the menu for my module. This is probably as expected, as those modules have also server side versions?

However, for some time i cannot interact with the site in any way, even though it apperas as loaded. After 20s to 30s, my module loads. The module has been created using the ABP studio, and choosing the WebAssembly UI option.

This is my first question: Is there any way to make the module use the server side rendering first as well?

As you can see from the recording, there is another issue right away: the text in the filtering box does not fit in the box itself. This does not look good. As the menu, its design etc come out of the box, my second question is thus how to fix that issue? What can be causing it?

Module load problems Around the 20s mark, when the module loads, we can see two new issues. First one comes from the menu bar again: all the icons are gone. Do you have any suggestions what may be causing the icons to disappear from the menu, and how to fix that?

Secondly, upon the module load the entire body of the app gets stretched without any obvious reason. Again, there is nothing in the browser console logs to indicate any sort of issue. Have you ever encountered this issue? How can it be fixed?

Either I have managed to find several bugs all at once, or there is something about the way my app is linked with the custom module that creates those issues. I beleive I have followed all the reommendations from the docs, and have created the module using ABP studio. We've had those issues ever since we have first created the project.

Hi, We have a Layered Modular Monolith app with Blazor WebApp UI. We also have added a custom module to this app. This module uses Blazor WebAssembly.

The solution has been generated using ABP Studio.

I've encountered a problem that only happens when the app is published to a container. We run this container on our local Kubernetes cluster.

I've tried various approaches to fix this, but I'm out of ideas.

The issue only happens in the containerized version. The app runs without issues in both Debug and Release modes from Visual Studio.

Error This is the error, as seen in the browser console (both Firefox and Edge):

ManagedError: AggregateException_ctor_DefaultMessage (Method not found: object Microsoft.Extensions.DependencyInjection.ActivatorUtilities.CreateInstance(System.IServiceProvider,System.Type,object[]))
    at an (dotnet.runtime.qrl1fuqt3c.js:3:26894)
    at Kt.resolve_or_reject (dotnet.runtime.qrl1fuqt3c.js:3:26449)
    at dotnet.runtime.qrl1fuqt3c.js:3:172526
    at dotnet.runtime.qrl1fuqt3c.js:3:172590
    at fr (dotnet.runtime.qrl1fuqt3c.js:3:35046)
    at Fc (dotnet.runtime.qrl1fuqt3c.js:3:172173)
    at 00b598be:0x1f0b8
    at 00b598be:0x1c7c6
    at 00b598be:0xea13
    at 00b598be:0x1eb9c
callEntryPoint	@	blazor.web.js:1
await in callEntryPoint		
Hr	@	blazor.web.js:1
await in Hr		
Fr	@	blazor.web.js:1
startWebAssemblyIfNotStarted	@	blazor.web.js:1
resolveRendererIdForDescriptor	@	blazor.web.js:1
determinePendingOperation	@	blazor.web.js:1
refreshRootComponents	@	blazor.web.js:1
(anonymous)	@	blazor.web.js:1
setTimeout		
rootComponentsMayRequireRefresh	@	blazor.web.js:1
startLoadingWebAssemblyIfNotStarted	@	blazor.web.js:1

The error is linked to the WebAssembly part of the frontend, I think. The logs in the pod are clear and do not indicate any issues.

Upon the first loading of the app, everything seems fine. However, I guess this is the server-side first render, and only of the app UI; the module comes later, as it is strictly WebAssembly.

How it happens On my local machine, the app's first loading looks like this:

1. Initial blank screen, loading the app

2. I see the first render of the home page, unresponsive.

3. After a moment, the app becomes responsive but not fully loaded. If I enter any of the menus, I will see the "Authorizing" message.

4. The module WebAssembly UI is loaded, the module menus appear on the navigation menu, and the app starts to work fully.

In the containerized version, upon the first load, the process ends at step 4. Only after I refresh, it tries to move to step 5. However, it never reaches it, and this is where the error happens.

Dockerfile

FROM mcr.microsoft.com/dotnet/aspnet:9.0
ENV ASPNETCORE_CULTURE=pl-PL \
    ASPNETCORE_UI_CULTURE=pl-PL \
    TZ=Europe/Warsaw \
    LANG=pl_PL.UTF-8 \
    LANGUAGE=pl_PL.UTF-8 \
    LC_ALL=pl_PL.UTF-8

# Install required locales
RUN apt-get update \~~~~
    && apt-get install -y locales \
    && sed -i -e 's/# pl_PL.UTF-8 UTF-8/pl_PL.UTF-8 UTF-8/' /etc/locale.gen \
    && dpkg-reconfigure --frontend=noninteractive locales \
    && update-locale LANG=pl_PL.UTF-8

COPY bin/Release/net9.0/publish/ app/
RUN mkdir -p /app/certs
WORKDIR /app
ENV ASPNETCORE_URLS=http://+:80
ENTRYPOINT ["dotnet", "AppName.Blazor.dll"]

Publish FolderProfile

<?xml version="1.0" encoding="utf-8"?>
<!-- https://go.microsoft.com/fwlink/?LinkID=208121. -->
<Project>
  <PropertyGroup>
    <DeleteExistingFiles>true</DeleteExistingFiles>
    <ExcludeApp_Data>false</ExcludeApp_Data>
    <LaunchSiteAfterPublish>true</LaunchSiteAfterPublish>
    <LastUsedBuildConfiguration>Release</LastUsedBuildConfiguration>
    <LastUsedPlatform>Any CPU</LastUsedPlatform>
    <PublishProvider>FileSystem</PublishProvider>
    <PublishUrl>bin\Release\net9.0\publish\</PublishUrl>
    <WebPublishMethod>FileSystem</WebPublishMethod>
    <_TargetId>Folder</_TargetId>
    <SiteUrlToLaunchAfterPublish />
    <TargetFramework>net9.0</TargetFramework>
    <ProjectGuid>[GUID]</ProjectGuid>
    <SelfContained>false</SelfContained>
  </PropertyGroup>
</Project>

Error screenshot

Steps to reproduce the issue: I'm not sure if this can be easily reproduced.

1. Create Blazor WebApp project.
2. Add a DDD, layered module with Blazor WebAssembly as UI
3. Containerize the app
4. Run it (I guess it does not matter if it is on kubernetes or just docker?)

Steps to reproduce the issue:

I'm not sure if this can be easily reproduced.

1. Create a Blazor WebApp project.

2. Add a DDD, layered module with Blazor WebAssembly as UI.

3. Containerize the app.

4. Run it (I guess it does not matter if it is on Kubernetes or just Docker?).

Desired outcome

App running in a container on Kubernetes.

I'm not sure what parts of our code are relevant to this issue, as I have no idea what may be causing it.

Thanks in advance.