Using Blazor components from a Shared Library in an ASP.NET Core Web Application (IdentityServer project)

陌路散爱 提交于 2020-06-17 22:54:21

问题


Recently I created a new Blazor Webassembly project including Authentication (Individual User Accounts) and ASP.NET Core hosted. This generated 3 projects for me, namely: Client (Blazor Webassembly), Server (where the authentication stuff resides in, using Identityserver - looks like a ASP.NET Core Web Application template using MVC / Razor) and a Shared project.

I want all my components to be reused easily so I also created a Razor Class Library where my (Blazor) components reside in.

In this shared library I created a few components which I also used in my Webassembly project, this all works fine.

However, I also want to use these components in the Server project. This is however not so easy. I tried the following using this link: https://medium.com/@geobourno/bringing-blazor-in-an-existing-net-core-mvc-project-d605d9f9ebe8

  1. I added services.AddServerSideBlazor();and endpoints.MapBlazorHub(); in the startup.cs file of the server project
  2. I added a reference to blazor.server.js and <base href="/"> in my _Layout.cshtml:
  3. I added a reference to the shared components library
  4. I was not sure about the following, in the link/tutorial they either add a reference to a Blazor app (while mine is actually a Razor Class Library) or in the other case the add an _Imports.razor file. I chose the latter (create a _Imports.razor file with the right usings in it)
  5. Next I added a component from the shared library in an existing .cshtml file as following: <component type="typeof(MarketingPage)" render-mode="ServerPrerendered" /> as well as a using to the shared library in the same page: @using PCS2.ComponentsLibrary.Index

After these steps there are several issues.

  • The html / component is being showed but the corresponding CSS is not. I assumed that when I referenced my Shared component Library it would also include the css files that are inside the wwwroot of my shared component library. I thought adding a reference to the stylesheet as following would solve the issue (but sadly it doesn't):

    <link href="_content/PCS2.ComponentsLibrary/css/TailwindStyles.css" rel="stylesheet" />

    <link href="_content/PCS2.ComponentsLibrary/css/CustomStyles.css" rel="stylesheet" />

when inspecting it I can see the files are not being loaded:

These css files reside in the wwwroot of my component class library:

  • There are several blazor.server.js errors being generated after adding the component:

Any clue how I can get this to work?

来源:https://stackoverflow.com/questions/62203126/using-blazor-components-from-a-shared-library-in-an-asp-net-core-web-application

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!