Problem with loading Blazor view in new module #1414

rick@i-pulse.nl created 4 years ago

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

rick@i-pulse.nl created 4 years ago

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

liangshiwei created 4 years ago

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(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.

Anuradha_Singh created 4 years ago

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

liangshiwei created 4 years ago

Support Team Fullstack Developer

As you have asked to add following in BlazorHostModule

You need to install these packages : )

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()));
    });
}