asp.net-coreblazor-webassemblymicro-frontendasp.net-blazor

How do I reference a Blazor WASM project to another Blazor WASM?


I want Create micro-frontends with Blazor WASM (base on this article), I Create two blazor wasm project one name is MicroFrontendsExample.Shell is container/appshell and other name is:MicroFrontendsExample.B1Component

I encountered this error when I referenced the MicroFrontendsExample.B1Component project to the MicroFrontendsExample.Shell

error:

Severity Code Description Project File Line Suppression State Error Conflicting assets with the same target path '_framework/blazor.boot.json'. For assets 'Identity: C:\Users\Sibetalaee\source\repos\MicroFrontendsExample\MicroFrontendsExample.B1Component\bin\Debug\net7.0\wwwroot_framework\blazor.boot.json, SourceType: Project, SourceId: MicroFrontendsExample.B1Component, ContentRoot: C:\Users\Sibetalaee\source\repos\MicroFrontendsExample\MicroFrontendsExample.B1Component\bin\Debug\net7.0\wwwroot, BasePath: /, RelativePath: _framework/blazor.boot.json, AssetKind: Build, AssetMode: All, AssetRole: Primary, RelatedAsset: , AssetTraitName: BlazorWebAssemblyResource, AssetTraitValue: manifest, CopyToOutputDirectory: PreserveNewest, CopyToPublishDirectory: Never, OriginalItemSpec: obj\Debug\net7.0\blazor.boot.json' and 'Identity: C:\Users\Sibetalaee\source\repos\MicroFrontendsExample\MicroFrontendsExample.Shell\bin\Debug\net7.0\wwwroot_framework\blazor.boot.json, SourceType: Computed, SourceId: MicroFrontendsExample.Shell, ContentRoot: C:\Users\Sibetalaee\source\repos\MicroFrontendsExample\MicroFrontendsExample.Shell\bin\Debug\net7.0\wwwroot, BasePath: /, RelativePath: _framework/blazor.boot.json, AssetKind: Build, AssetMode: All, AssetRole: Primary, RelatedAsset: , AssetTraitName: BlazorWebAssemblyResource, AssetTraitValue: manifest, CopyToOutputDirectory: PreserveNewest, CopyToPublishDirectory: Never, OriginalItemSpec: obj\Debug\net7.0\blazor.boot.json' from different projects. MicroFrontendsExample.Shell C:\Program Files\dotnet\sdk\7.0.102\Sdks\Microsoft.NET.Sdk.Razor\targets\Microsoft.NET.Sdk.Razor.StaticWebAssets.targets 391

I have no idea, how can I reference blazor wasm to another ?


Solution

  • You can set the StaticWebAssetBasePath with different name for each project to distinguish.

    In the MicroFrontendsExample.B1Component app's project file (MicroFrontendsExample.B1Component.csproj), add a <StaticWebAssetBasePath> property to a <PropertyGroup> with a value of FirstApp to set the base path for the project's static assets:

    <StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>
    

    In the MicroFrontendsExample.Shell app's project file (MicroFrontendsExample.Shell.csproj), add a <StaticWebAssetBasePath> property to a <PropertyGroup> with a value of SecondApp:

    <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
    

    Note: The name of FirstApp and SecondApp are merely for demonstration purposes.Any base path segments that distinguish the client apps are acceptable.