blazor web app ImportMap 警告 RZ10012 提示

Question

blazor web app ImportMap 警告 RZ10012 提示

929Free 641

IDE：Microsoft Visual Studio Community 2022 (64 位) - Current

框架: blazor web app

操作步骤:

1.我先创建 blazor web app

      项目名称: BlazorApp1

      框架       : .net 9.0

      身份验证: 无

      勾选 "配置 HTTPS”

      交互性类型 : 服务器

      交互性位置: 全局

      不勾 "包含示例页"

      不勾 "不使用顶级语句"

      不勾 "在 .NET Aspire 业务流程中登记"

然后我创建 Razor 类库

    项目名称: RazorClassLibrary1

    框架: .net 9.0

    不勾 "支持页面和视图"

     不勾 "在 .NET Aspire 业务流程中登记"

创建好以上2个工程后，主程序 BlazorApp1 项目引用 "RazorClassLibrary1"
删除 BlazorApp1 主程序里的 "Components" 文件夹, 只保留 appsettiongs.json 和 Program.cs 文件
然后在 RazorClassLibrary1 工程中新建 Layout 文件夹, 并且在该文件夹里创建 MainLayout.razor 文件，内容如下:

@inherits LayoutComponentBase
@Body

6.然后在 RazorClassLibrary1 工程中新建 Tip 文件夹, 并且在该文件夹里创建 Component2.razor 文件和 Component2.razor.css 文件

Component2.razor 内容如下:

@page "/test"
<h3>Component2</h3>

Component2.razor.css 文件内容如下:

body {
}
h3{
    color:red;
}

修改 RazorClassLibrary1 项目里的 _Imports.razor 文件内容为以下内容:

_Imports.razor :

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop

新增 App.razor 文件, 内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <link rel="stylesheet" href="@Assets["BlazorApp1.styles.css"]" />
    <ImportMap />
    <HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

此时我就发现, <ImportMap> 提示绿色下划线警告了.

新增 Routes.razor 文件, 内容如下:

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

BlazorApp1 主程序的 Program.cs 文件内容如下:

using RazorClassLibrary1;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseAntiforgery();
app.MapStaticAssets();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();
app.Run();

至此 debug 启动程序，浏览 mycomponent 页面 , css 捆绑正常, 浏览 Tip 文件夹下的 test 页面，css 捆绑也正常,

请教:

1）在 App.razor 里的 <ImportMap /> 警告如何解决？可否将这条语句注释掉呢？之前我遇到的 css 隔离失败是否是因为我将该语句注释掉造成的呢？

2）我将 <ImportMap /> 这条语句注释掉，再次重新编译生成，就会出现 Tip文件夹下的 test页面 css 捆绑失败，故此请教下，我这样封装根组件对吗？有没遗漏配置？谢谢了

接受的答案

1 个其他答案

你的答案

Answer 1

Hi @929Free,

感谢你的详细步骤，我还原了您的问题，也尝试手动添加@using Microsoft.AspNetCore.Components 到 _Imports.razor 文件中，重启vs2022打开项目后解决了HeadOutlet 和 Route 警告的问题，但是 ImportMap的警告依旧存在。

后来查阅了官方文档后，我们可以清楚的知道 App.razor 是Blazor Web App 项目默认的根组件，且导入映射组件放置在根组件（通常是App组件）Components/App.razor的内容中<head>。

从代码层面简单的理解下，就是简单的页眉和页尾等框架部分，建议放在Blazor Web项目中，内容详情页的组件可以放在类库项目中。

不建议您将默认的Components文件中的内容全部迁移到类库项目中，您可以考虑将Pages中的迁移出去，这应该是最佳的实践方案。虽然您的项目目前可以运行，但是ImportMap 类应该是运行在Microsoft.AspNetCore.App 框架下，在.NET9中您可以无法使用ImportMap的功能特性。

用户的图像

如果答案是正确的解决方案，请点击“接受答案”并投赞成票。如果您对此答案有其他问题，请点击“评论”。

注意：如果您想接收此线程的相关电子邮件通知，请按照我们的文档中的步骤启用电子邮件通知。

Best Regards

Jason

Answer 2

929Free 641

其实我也偏向于您给的方案，如果我将 App.razor 放到主程序里的话就会造成代码泄露的问题了，因为主程序是要放到 Git 上进行共享的，加上之前您回答的授权功能，我的初衷并不希望这块校验功能共享出来，而是通过 razor 类库进行封装，只有源代码的人才能进行改动，从而保证整个产品的代码安全。