<script src="_content/telerik.webreportdesigner.blazor/telerikWebReportDesignerInterop.js" defer></script>

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'Gyr8E4g_PwQHf7G2UKY2h3obMpujPfFp2x9i7dkB4oQ'.
      Microsoft.JSInterop.JSException: Could not find 'telerikWebReportDesignerInterop.createWebReportDesignerWidget' ('telerikWebReportDesignerInterop' was undefined).
Error: Could not find 'telerikWebReportDesignerInterop.createWebReportDesignerWidget' ('telerikWebReportDesignerInterop' was undefined).
    at https://localhost:5001/_framework/blazor.server.js:1:67713
    at Array.forEach (<anonymous>)
    at e.findFunction (https://localhost:5001/_framework/blazor.server.js:1:67673)
    at v (https://localhost:5001/_framework/blazor.server.js:1:69415)
    at https://localhost:5001/_framework/blazor.server.js:1:70361
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:1:70334)
    at https://localhost:5001/_framework/blazor.server.js:1:26441
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:26411)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

<PackageReference Include="Telerik.Reporting.Services.AspNetCore" Version="15.1.21.616" />
<PackageReference Include="Telerik.Reporting.OpenXmlRendering" Version="15.1.21.616" />
<PackageReference Include="Telerik.ReportViewer.Blazor" Version="15.1.21.616" />
<PackageReference Include="Telerik.WebReportDesigner.Blazor" Version="15.1.21.616" />
<PackageReference Include="Telerik.WebReportDesigner.Services" Version="15.1.21.616" />

namespace CSharp.Net5.BlazorIntegrationDemo
{
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.Extensions.DependencyInjection.Extensions;
    using Microsoft.Extensions.Hosting;
    using System;
    using Telerik.Reporting.Cache.File;
    using Telerik.Reporting.Services;
    using Telerik.WebReportDesigner.Services;

    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            this.Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();

            services.AddRazorPages()
                .AddNewtonsoftJson();
            services.AddServerSideBlazor();

            // Configure dependencies for ReportsController.
            services.TryAddSingleton<IReportServiceConfiguration>(sp =>
                new ReportServiceConfiguration
                {
                    ReportingEngineConfiguration = sp.GetService<IConfiguration>(),
                    HostAppId = "Net5BlazorDemo",
                    Storage = new FileStorage(),
                    ReportSourceResolver = new UriReportSourceResolver(System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "..", "..", "..", "..", "Report Designer", "Examples")),
                });

            // Configure dependencies for ReportDesignerController.
            services.TryAddSingleton<IReportDesignerServiceConfiguration>(sp => new ReportDesignerServiceConfiguration
            {
                DefinitionStorage = new FileDefinitionStorage(
                    System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "..", "..", "..", "..", "Report Designer", "Examples")),
                SettingsStorage = new FileSettingsStorage(
                    System.IO.Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "Telerik Reporting")),
                ResourceStorage = new ResourceStorage(
                    System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "..", "..", "..", "..", "Report Designer", "Examples", "Resources"))
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
            }

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

        /// <summary>
        /// Loads a reporting configuration from a specific JSON-based configuration file.
        /// </summary>
        /// <param name="environment">The current web hosting environment used to obtain the content root path</param>
        /// <returns>IConfiguration instance used to initialize the Reporting engine</returns>
        static IConfiguration ResolveSpecificReportingConfiguration(IWebHostEnvironment environment)
        {
            // If a specific configuration needs to be passed to the reporting engine, add it through a new IConfiguration instance.
            var reportingConfigFileName = System.IO.Path.Combine(environment.ContentRootPath, "reportingAppSettings.json");
            return new ConfigurationBuilder()
                .AddJsonFile(reportingConfigFileName, true)
                .Build();
        }
    }
}

@page "/webreportdesigner"
@using Telerik.WebReportDesigner.Blazor

<style>
    #wrd1 {
        position: relative;
        height: 880px;
        padding-right: 50px;
    }
</style>

@* Create the WebReportDesignerWidget *@

<p>This Web Report Designer instance works with reports hosted locally using the Reporting REST service. For more information, visit the <a target="_blank" href="https://docs.telerik.com/reporting/web-report-designer">Web Report Designer</a> article.</p>
<WebReportDesigner DesignerId="wrd1"
                   ServiceUrl="/api/reportdesigner"
                   Report="Dashboard.trdp"
                   ToolboxArea="new ToolboxAreaOptions() { Layout = ToolboxAreaLayout.List }"
                   PropertiesArea="new PropertiesAreaOptions() { Layout = PropertiesAreaLayout.Categorized }" />