CSS in Blazor Component Library doesnt load - blazor-server-side

In my razor components project, I am adding a blazor component library to the solution. I can call the components in the component library from my .app project, but it seems that .css and other files don't load from the Blazor component library.
I looked into the component library .csproj file, but I can't figure out what is missing:
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<IsPackable>true</IsPackable>
<LangVersion>7.3</LangVersion>
</PropertyGroup>
<ItemGroup>
<!-- .js/.css files will be referenced via <script>/<link> tags; other content files will just be included in the app's 'dist' directory without any tags referencing them -->
<EmbeddedResource Include="content\**\*.js" LogicalName="blazor:js:%(RecursiveDir)%(Filename)%(Extension)" />
<EmbeddedResource Include="content\**\*.css" LogicalName="blazor:css:%(RecursiveDir)%(Filename)%(Extension)" />
<EmbeddedResource Include="content\**" Exclude="**\*.js;**\*.css" LogicalName="blazor:file:%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.Browser" Version="3.0.0-preview-19075-0444" />
<PackageReference Include="Microsoft.AspNetCore.Components.Build" Version="3.0.0-preview-19075-0444" PrivateAssets="all" />
</ItemGroup>
</Project>

This a limitation with the current release of Razor Components. It can't import static assets from components libraries. As workaround, you should copy them manually until is fixed in next releases.

Static assets should work now since preview 6. Please read blog post about this topic here: https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/

Related

How to stop the localized Microsoft.CodeAnalysis.*.resources.dll files from getting published by ASP.NET Core?

When I publish an ASP.NET Core 3.0 project, I get a few localized folders where the 4 assemblies shown are in each of these folders. I am not sure why these folders and files get included. None of my packages reference a CodeAnalysis package.
I added <PreserveCompilationContext>false</PreserveCompilationContext> in the csproj file but it didn't help. Is there a way to exclude them?
Add this:
<SatelliteResourceLanguages>en</SatelliteResourceLanguages>
to the .csproj file:
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp3.1</TargetFramework>
<SatelliteResourceLanguages>en</SatelliteResourceLanguages>
</PropertyGroup>
As suggested, you can use none to exclude all of them:
<SatelliteResourceLanguages>none</SatelliteResourceLanguages>
and taking consideration languages do you want like english and spanish:
<SatelliteResourceLanguages>en;es</SatelliteResourceLanguages>
Works with VS2019 and other versions
UPDATE 2021/2022:
Still working with Visual Studio 2022 and .NET 6
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<SatelliteResourceLanguages>en</SatelliteResourceLanguages>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
You get a lot of language folders containing CodeAnalysis.dll files in your published output if you have a project reference to Microsoft.VisualStudio.Web.CodeGeneration.Design, which is needed for scaffolding controllers. If that is true for your project, change the package reference in your .csproj file to include ExcludeAssets="all"
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.0.0" ExcludeAssets="All" />
For example, old *.csproj file
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp3.0</TargetFramework>
<UserSecretsId>aspnet-foo-4E53EF45-B3BE-4943-81BE-2449DC5AA2BC</UserSecretsId>
<BlazorLinkOnBuild>false</BlazorLinkOnBuild>
</PropertyGroup>
<ItemGroup>
<!-- ... -->
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design"
Version="3.0.0" />
</ItemGroup>
<ItemGroup>
<!-- ... -->
</ItemGroup>
</Project>
New file *.csproj should be
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp3.0</TargetFramework>
<UserSecretsId>aspnet-foo-4E53EF45-B3BE-4943-81BE-2449DC5AA2BC</UserSecretsId>
<BlazorLinkOnBuild>false</BlazorLinkOnBuild>
</PropertyGroup>
<ItemGroup>
<!-- ... -->
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design"
Version="3.0.0"
ExcludeAssets="All" />
</ItemGroup>
<ItemGroup>
<!-- ... -->
</ItemGroup>
</Project>
In my case, the source of these localized folders was from the package Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation. It has a dependency on Microsoft.CodeAnalysis.Razor. You can read more about the purpose of the package here: https://learn.microsoft.com/en-us/aspnet/core/mvc/views/view-compilation?view=aspnetcore-3.1
You cannot just exclude an asset when trying to take advantage of the package. My work-around was to conditionally include the package reference whenever the project is in debug mode.
<ItemGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="3.1.1" />
</ItemGroup>
I then used an #if pre-processor directive to conditionally run the code that enables razor runtime compilation.
#if DEBUG
services.AddRazorPages().AddRazorRuntimeCompilation();
#else
services.AddRazorPages();
#endif
Please note: You may need to delete your bin folder to see the folders removed after a build. Also, make sure you are building under the correct solution configuration.
I was able to find a Github issue describing this exact scenario, but unfortunately it was never resolved. https://github.com/dotnet/extensions/issues/2247

How to include a local DLL reference in to a nuget package when calling msbuild pack?

We have several projects that need to include a few static DLL. Therefore the project files include code like this:
<ItemGroup>
<Reference Include="..\_Solutions\dependencies\abc123.dll" />
<Reference Include="..\_Solutions\dependencies\def456.dll" />
<Reference Include="System.Web" />
</ItemGroup>
Expected:
We expected that the two dlls; abc123.dll and def456.dll would befound in the nupkg file.
Actual:
However, the nupkg doesn't include the abc123.dll nor the def456.dll files.
One can always include custom content in the nuget-package. Like this:
<ItemGroup>
<Content Include="$(OutputPath)\ReferencedLib.dll">
<Pack>true</Pack>
<PackagePath>lib\$(TargetFramework)</PackagePath>
</Content>
</ItemGroup>
If you target multiple frameworks:
<PropertyGroup>
<TargetFrameworks>netstandard2.0;netstandard1.6</TargetFrameworks>
<TargetsForTfmSpecificContentInPackage>$(TargetsForTfmSpecificContentInPackage);IncludeReferencedProjectInPackage</TargetsForTfmSpecificContentInPackage>
</PropertyGroup>
<Target Name="IncludeReferencedProjectInPackage" Condition="'$(IncludeBuildOutput)' != 'false'">
<ItemGroup>
<TfmSpecificPackageFile Include="$(OutputPath)\ReferencedLib.dll" PackagePath="lib/$(TargetFramework)" />
</ItemGroup>
</Target>
How to include a local DLL reference in to a nuget package when calling msbuild pack?
According the issue on the GitHub, this is currently not directly supported by NuGet.
The workaround I suggest is using the .nuspec file:
NuGet allows you to disable the automatic generation of the resulting
.nuspec file and automatic collection of files by setting the
property in your project, along with a
property that allows you to pass replacement tokens for parsing the
.nuspec file.
See Martin`s answer for details.

.NET Core 1.1 - getting "Duplicate 'Content' items were included"

I've updated my VS2017 to latest 15.3.0 and installed .NET Core SDK 2.0 (I would like to upgrade an existing .NET 1.1 application to 2.0).
Now when I open my project that was compiling fine (didn't change anything in it yet) and I try to compile I get:
Duplicate 'Content' items were included.
The .NET SDK includes 'Content' items from your project directory by default.
You can either remove these items from your project file, or set the 'EnableDefaultContentItems' property to 'false' if you want to explicitly include them in your project file.
For more information, see https://aka.ms/sdkimplicititems. The duplicate items were: 'wwwroot\index.html'
Under problematic file it's pointing to C:\Program Files\dotnet\sdk\2.0.0\Sdks\Microsoft.NET.Sdk\build\Microsoft.NET.Sdk.DefaultItems.targets
I've read online and I'm able to solve this by adding <EnableDefaultContentItems>false</EnableDefaultContentItems> to my .csproj file. But it wasn't there before and I'm not sure what adding this line means.
Once thing that really bothers me is that the source file it's pointing to is in dotnet\sdk\2.0.0 - and as I mentioned the project is still .NET Core 1.1. All I did so far was to install the update for VS2017 and the 2.0 SDK.
How do I solve this? I would like my original project to compile before I upgrade it to 2.0.
EDIT
My csproj file:
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp1.1</TargetFramework>
</PropertyGroup>
<ItemGroup>
<Content Include="wwwroot\index.html" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="IdentityServer4" Version="1.5.2" />
<PackageReference Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.0.1" />
<PackageReference Include="Microsoft.AspNetCore" Version="1.1.2" />
<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.2" />
<PackageReference Include="NLog.Web.AspNetCore" Version="4.4.1" />
</ItemGroup>
<ItemGroup>
<Content Update="appsettings.json">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
<Content Update="web.config">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
</ItemGroup>
<ItemGroup>
<None Update="NLog.config">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
</ItemGroup>
</Project>
As mentioned if I add <EnableDefaultContentItems>false</EnableDefaultContentItems> to PropertyGroup it works. But I don't know what is the meaning of this or why it's needed all of a sudden...
Remove the <ItemGroup> element containing
<Content Include="wwwroot\index.html" />
This item is already included by the Microsoft.NET.Sdk.Web and is therefore defined twice.
Necromancing.
Alternatively, do the following:
Click 'Show All Files' in Solution Explorer
Right click over 'wwwroot' select 'Exclude From Project'
Right click over 'wwwroot' select 'Include in Project'
The error is now gone.
Much safer than editing by hand.

How to copy files to output directory from a referenced NuGet package in .NET Core csproj?

I'm trying to use PhantomJS NuGet package in .NET core csproj application. But I think it is not possible using new PackageReference syntax for NuGet.
When I reference the PhantomJS package like this:
<PackageReference Include="PhantomJS" Version="2.1.1">
<IncludeAssets>all</IncludeAssets>
</PackageReference>
It does not do anything when I run dotnet build.
I'd expect it to copy the files inside PhantomJS package to the output directory (or anywhere in the project) so I could use the binary file provided by the PhantomJS package.
Is there another way to copy the contents of PhantomJS NuGet package to the output directory with MSBuild?
I think you want to use:
<CopyLocalLockFileAssemblies>true</CopyLocalLockFileAssemblies>
in the main <PropertyGroup>, which causes all dependencies to be copied to the output folder. This means every single dependency gets copied though so this can be quite a mess in some situations.
If you then want to exclude specific assemblies or packages:
<ItemGroup>
<-- won't copy to output folder -->
<PackageReference Include="MahApps.Metro" version="1.6.5">
<IncludeAssets>compile</IncludeAssets>
</PackageReference>
<PackageReference Include="Dragablz" version="0.0.3.203">
<IncludeAssets>compile</IncludeAssets>
</PackageReference>
...
<-- normal will copy to output folder -->
<PackageReference Include="xmlrpcnet" version="3.0.0.266" />
<PackageReference Include="YamlDotNet" version="6.0.0" />
</ItemGroup>
<ItemGroup>
<!-- keep assembly reference from copying to output -->
<Reference Include="$(SolutionDir)MarkdownMonster\bin\$(Configuration)\$(TargetFramework)\MarkdownMonster.exe">
<Private>false</Private>
</Reference>
</ItemGroup>
compile in this context means they are available for compilation, but aren't copied to the output folder.
There are two solutions:
1:
<ItemGroup>
<PackageReference Include="PhantomJS" Version="1.0.8" GeneratePathProperty="true" />
</ItemGroup>
<Target Name="CopyPdfExe" AfterTargets="Build">
<Copy SourceFiles="(PkgPhantomJS)\tools\phantomjs\phantomjs.exe" DestinationFolder="$(OutDir)" />
</Target>
2:
<ItemGroup>
<PackageReference Include="PhantomJS" Version="1.0.8" GeneratePathProperty="true" />
</ItemGroup>
<ItemGroup>
<None Include="$(PkgPhantomJS)\tools\phantomjs\phantomjs.exe" CopyToOutputDirectory="PreserveNewest" />
</ItemGroup>
prefer the #2 since if this project is referenced by another one, the .exe can also be copied to the output folder
The <PackageReference> syntax in NuGet uses transitive dependencies, just like the project.json syntax. As such, the same rules apply. See this NuGet v3 which talks about what does and doesn't work between packages.config and the newer syntax. Specifically
You cannot rely on install.ps1 or uninstall.ps1 to function. These files will execute when using packages.config, but will be ignored in v3. So your package needs to be usable without them running. Init.ps1 will still run on NuGet 3.
To get files to copy to the output directory, the PhantomJS NuGet package needs to be changed to use contentFiles.
The tag names are misleading. Try
<PackageReference Include="PhantomJS" Version="2.1.1">
<IncludeAssets>none</IncludeAssets>
</PackageReference>
or
<PackageReference Include="PhantomJS" Version="2.1.1">
<ExcludeAssets>all</ExcludeAssets>
</PackageReference>
instead in order to get the referenced assemblies and other files copied to the build output. See
https://learn.microsoft.com/en-us/nuget/consume-packages/package-references-in-project-files
Try dotnet publish
dotnet publish [<PROJECT>] [-c|--configuration] [-f|--framework] [--force] [--manifest] [--no-dependencies] [--no-restore] [-o|--output] [-r|--runtime] [--self-contained] [-v|--verbosity] [--version-suffix]
dotnet publish [-h|--help]
See https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-publish?tabs=netcore2x
I know this is an old question, but what worked for me was to set IncludeAssets to "runtime"
Actually what is claimed to not work in the original question is what worked for me in .NET6:
<PackageReference Include="PhantomJS" Version="2.1.1">
<IncludeAssets>all</IncludeAssets>
</PackageReference>

AjaxMin task has been declared or used incorrectly, or failed during construction

I'm trying to add Microsoft's AjaxMin to VS2012 project and I'm not really sure what I'm doing. I think I'm missing something obvious.
I copied the code from the tutorial here (http://ajaxmin.codeplex.com/wikipage?title=AjaxMinTask)
And I've tried adding the reference to my project so my code looks like this:
<UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectDirectory)\Build\AjaxMinTask.dll" />
<Target Name="AfterBuild" >
<ItemGroup>
<JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />
</ItemGroup>
<ItemGroup>
<CSS Include="**\*.css" Exclude="**\*.min.css" />
</ItemGroup>
<AjaxMin JsSourceFiles="#(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="#(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
</Target>
This is at the bottom of my .csproj file where there was already a commented out AfterBuild section. I get errors saying JS, CSS, AjaxMin are invalid child elements. When I try to build the project I get an error, I'm not sure what I am missing. I created a folder in the project called Build and added the AjaxMinTask.dll. I don't know if there's any additional thing i need to do to make sure it is referenced properly.
I've also tried using the Import node instead of the UsingTask
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\AjaxMin.tasks" />
And I think AjaxMin is installed correctly because I can run it from command line.
In your .csproj, the end of the document (I've included the last closing element ) should look something like this:
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\MicrosoftAjax\AjaxMin.tasks" />
<Target Name="AfterBuild" AfterTargets="CopyAllFilesToSingleFolderForPackage" Condition="'$(Configuration)'=='Release'">
<ItemGroup>
<JS Include="scripts\*.js" Exclude="scripts\*.min.js;" />
</ItemGroup>
<ItemGroup>
<CSS Include="css\main.css" />
</ItemGroup>
<AjaxMin Switches="-global:jQuery,$" JsSourceFiles="#(JS)" JsCombinedFileName="scripts\combined.min.js" CssSourceFiles="#(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
</Target>
</Project>
As I am using Windows 7 64-bit, you will see the path of Import... includes (MSBuildExtensionsPath32). If you are using Windows 32-bit, then you do not need the 32 at the end. Other then that, your code should work.
Disregard the JS, CSS, AjaxMin childelements error. But you should not get a built error. If you could post your built error, it would be useful.
Also, the code above combines multiple JS files, just added for fun.