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

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

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

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

    *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(<YourProjectName>BlazorModule)
    )]
    public class <YourProjectName>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&lt;AbpNavigationOptions&gt;(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.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11