Open Closed

Problem with loading Blazor view in new module #1414


User avatar
0
rick@i-pulse.nl created

Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/
Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index
The exact solution to your question may have been answered before, please use the search on the homepage.

  • ABP Framework version: v4.3.0

  • UI type: Blazor

  • DB provider: EF Core

  • Tiered (MVC) or Identity Server Separated (Angular): no

  • Exception message and stack trace:

  • Steps to reproduce the issue:

We want to implement the UI in blazor, and want to deploy it as Blazor web assembly.

We have created a new module and we have four project related to Blazor:
[1]Blazor.Host
[2]Blazor
[3] Blazor.Server
[4] Blazor.WebAssembly
We have created own code in index.razor component and added code for menu in Blazor project.

See structure below
image.png

In order to run my module, first I run following projects
[1] MyCompany.MyFirstModule.IdentityServer
[2] MyCompany.MyFirstModule.HttpApi.Host
[3] MyCompany.MyFirstModule.Blazor.Host

But when I run MyCompany.MyFirstModule.Blazor.Host, it do not load my index.razor from MyCompany.MyFirstModule.Blazor project.
It always shows blank screen with Loading… keyword, see below
image.png

I have checked and found it always load index.html file of project - MyCompany.MyFirstModule.Blazor.Host.
image.png

PLEASE TELL ME STEPS HOW I CAN USE MyCompany.MyFirstModule.Blazor.Host TO HOST MY CUSTOM MENU AND RAZOR COMPONENT FROM MyCompany.MyFirstModule.Blazor PROJECT


5 Answer(s)
  • User Avatar
    0
    rick@i-pulse.nl created

    Hello,

    Can I get in touch with a support engineer for help?
    We're stuck with the Blazor part and we have to move on with our development.

    Thanks,
    Rick

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    We have fixed the problem in 4.4.0. For now, try:

    appsettings

    {
      ......
      "RemoteServices": {
        "Default": {
          "BaseUrl": "https://localhost:44301/"
        },
        "<YourProjectName>": {
          "BaseUrl": "https://localhost:44300/"
        }
      },
      "AbpCli": {
        "Bundle": {
          "Mode": "BundleAndMinify",
          /* Options: None, Bundle, BundleAndMinify */
          "Name": "global",
          "Parameters": {
            "LeptonTheme.Style": "Style1",
            /* Options: Style1, Style2... Style6 */
            "LeptonTheme.ChangeStyleDynamically": "true"
          }
        }
      }
    }
    

    index.html

    image.png

    *HostMenuContributor

    public class <YourProjectName>HostMenuContributor : IMenuContributor
    {
        private readonly IConfiguration _configuration;
    
        public <YourProjectName>HostMenuContributor(IConfiguration configuration)
        {
            _configuration = configuration;
        }
    
        public async Task ConfigureMenuAsync(MenuConfigurationContext context)
        {
            if (context.Menu.Name == StandardMenus.User)
            {
                await ConfigureUserMenuAsync(context);
            }
        }
    
        private Task ConfigureUserMenuAsync(MenuConfigurationContext context)
        {
            var accountStringLocalizer = context.GetLocalizer<AccountResource>();
    
            var identityServerUrl = _configuration["AuthServer:Authority"] ?? "";
    
            context.Menu.AddItem(new ApplicationMenuItem(
                "Account.Manage",
                accountStringLocalizer["ManageYourProfile"],
                $"{identityServerUrl.EnsureEndsWith('/')}Account/Manage?returnUrl={_configuration["App:SelfUrl"]}",
                icon: "fa fa-cog",
                order: 1000,
                null).RequireAuthenticated());
    
            return Task.CompletedTask;
        }
    }
    

    *BlazorHostModule

    [DependsOn(
        typeof(AbpAutofacWebAssemblyModule),
        typeof(AbpAspNetCoreComponentsWebAssemblyLeptonThemeModule),
        typeof(LeptonThemeManagementBlazorWebAssemblyModule),
        typeof(AbpIdentityProBlazorWebAssemblyModule),
        typeof(AbpAccountAdminBlazorWebAssemblyModule),
        typeof(AbpIdentityServerBlazorWebAssemblyModule),
        typeof(AbpAuditLoggingBlazorWebAssemblyModule),
        typeof(TextTemplateManagementBlazorWebAssemblyModule),
        typeof(LanguageManagementBlazorWebAssemblyModule),
        typeof(SaasHostBlazorWebAssemblyModule),
        typeof(AbpSettingManagementBlazorWebAssemblyModule),
        typeof(BlazorModule)
    )]
    public class BlazorHostModule : AbpModule
    

    *IdentityServerModule

    [DependsOn(
        typeof(AbpAccountPublicWebIdentityServerModule),
        typeof(AbpAccountPublicApplicationModule),
        typeof(AbpAspNetCoreMvcUiMultiTenancyModule),
        typeof(AbpAspNetCoreMvcModule),
        typeof(AbpAspNetCoreMvcUiLeptonThemeModule),
        typeof(AbpAuditLoggingEntityFrameworkCoreModule),
        typeof(AbpAutofacModule),
        typeof(AbpCachingStackExchangeRedisModule),
        typeof(AbpEntityFrameworkCoreSqlServerModule),
        typeof(AbpIdentityProEntityFrameworkCoreModule),
        typeof(AbpIdentityApplicationModule),
        typeof(AbpIdentityHttpApiModule),
        typeof(AbpIdentityServerEntityFrameworkCoreModule),
        typeof(LeptonThemeManagementHttpApiModule),
        typeof(LeptonThemeManagementApplicationModule),
        typeof(LeptonThemeManagementDomainModule),
        typeof(AbpPermissionManagementDomainIdentityModule),
        typeof(AbpPermissionManagementEntityFrameworkCoreModule),
        typeof(AbpPermissionManagementApplicationModule),
        typeof(AbpPermissionManagementHttpApiModule),
        typeof(AbpSettingManagementEntityFrameworkCoreModule),
        typeof(AbpSettingManagementApplicationModule),
        typeof(AbpSettingManagementHttpApiModule),
        typeof(AbpSettingManagementEntityFrameworkCoreModule),
        typeof(AbpFeatureManagementHttpApiModule),
        typeof(AbpFeatureManagementApplicationModule),
        typeof(AbpFeatureManagementEntityFrameworkCoreModule),
        typeof(SaasEntityFrameworkCoreModule),
        typeof(SaasHostApplicationModule),
        typeof(SaasHostHttpApiModule),
        typeof(AbpAspNetCoreAuthenticationJwtBearerModule),
        typeof(BlobStoringDatabaseEntityFrameworkCoreModule),
        typeof(<YourProjectName>ApplicationContractsModule),
        typeof(AbpSwashbuckleModule),
        typeof(AbpAspNetCoreSerilogModule)
        )]
    public class <YourProjectName>IdentityServerModule : AbpModule
    

    Then run abp bundle command in the blazor folder to update resource references.

  • User Avatar
    0
    Anuradha_Singh created

    Hi,

    I have tried your suggestion, but it is not working

    [1] As you have asked to add following in *BlazorHostModule

    typeof(AbpAccountAdminBlazorWebAssemblyModule),
    typeof(AbpIdentityServerBlazorWebAssemblyModule),
    typeof(AbpAuditLoggingBlazorWebAssemblyModule),
    typeof(TextTemplateManagementBlazorWebAssemblyModule),
    typeof(LanguageManagementBlazorWebAssemblyModule),
    typeof(SaasHostBlazorWebAssemblyModule),
    typeof(AbpSettingManagementBlazorWebAssemblyModule)

    #####You have asked to add above but not mention it's directive /assembly reference. So these lines throwing error -Missing directive and an assembly reference.

    [2] You have asked to create this function below in HostMenuContributor

    public <YourProjectName>HostMenuContributor(IConfiguration configuration)
    {
    _configuration = configuration;
    }

    When we call above function from my blazor project's ProductModuleBlazorHostModule function then what should I pass as inside parameter , right now function code is 
    
     private void ConfigureMenu(ServiceConfigurationContext context)
        {
            Configure<AbpNavigationOptions>(options =>
            {
                options.MenuContributors.Add(new ProductModuleHostMenuContributor());
            });
        }
    

    ####### In above function what I should pass in calling of this-> ProductModuleHostMenuContributor() because it is throwing following error

    Error CS7036 There is no argument given that corresponds to the required formal parameter 'configuration' of 'ProductModuleHostMenuContributor.ProductModuleHostMenuContributor(IConfiguration)' IPulse.ProductModule.Blazor.Host E:\2021\host\IPulse.ProductModule.Blazor.Host\ProductModuleBlazorHostModule.cs 71 Active

    [3] When we add dependencies in Identity module , the for following dependencies it throw error

    typeof(AbpSettingManagementApplicationModule),
    typeof(AbpSettingManagementHttpApiModule),
    typeof(AbpSwashbuckleModule),
    typeof(AbpAspNetCoreSerilogModule)

    ####  for dealing this What directive /assembly  reference we have to add
    

    [4] You have asked to ----- run abp bundle command in the blazor folder to update resource references.

    So I have run this command in in Blazor.Host project.Initially I have tried with blazor project [ which is inside the src folder] but command was not running there because that is library project and it is not have wwwroot folder , and this command is looking for appsetting.json file.

    After excecuting above command I get following output


    PS E:\2021\host\IPulse.ProductModule.Blazor.Host> abp bundle
    [18:31:42 INF] ABP CLI (https://abp.io)
    [18:31:43 INF] Version 4.3.2 (Stable)
    [18:31:47 INF] Generating style bundle...
    [18:31:47 INF] Style bundle has been generated successfully.
    [18:31:47 INF] Generating script bundle...
    [18:31:47 WRN] Unable to minify the file: AuthenticationService.js. Adding file to the bundle without minification.
    [18:31:47 INF] Script bundle has been generated successfully.
    [18:31:47 INF] Script and style references in the index.html file have been updated.


    Still I am getting blank page with Loading..... text

    So tell me how to deal with above questions , so that I can fix this.

    Thanks in advance !!

    Anuradha

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer
    1. As you have asked to add following in BlazorHostModule

    You need to install these packages : )

    1. You have asked to create this function below in HostMenuContributor

    private void ConfigureMenu(ServiceConfigurationContext context)
    {
        Configure&lt;AbpNavigationOptions&gt;(options =>
        {
            options.MenuContributors.Add(new ProductModuleHostMenuContributor(context.Services.GetConfiguration()));
        });
    }
    
    1. When we add dependencies in Identity module , the for following dependencies it throw error

    Same with 1

  • User Avatar
    0
    ServiceBot created
    Support Team Automatic process manager

    This question has been automatically marked as stale because it has not had recent activity.

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.2.0-preview. Updated on March 13, 2025, 04:08