Open Closed

ABP.IO Angular UI Custom UI Modifications Using ABP Suite Modules Process Question #3357


User avatar
0
cmartin_momentum3 created
  • ABP Framework version: v5.1.3
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Steps to reproduce the issue:" (see below)
  1. Create a new Angular application using this command: abp new TestAppName -t app-pro -u angular -m none --database-provider ef -csf
  2. Run the TestAppName.DbMigrator in the aspnet-core folder (to create, and seed the database)
  3. Run the TestAppName.HttpApi.Host project (to verify the project works after you've created it, and the database)
  4. Run Yarn, and then Yarn start on the angular folder in the command line (to verify the frontend of the application works)
  5. Stop both the frontend and backend
  6. Run abp suite
  7. Click Modules
  8. Install these Modules' Source Code:
    1. Account
    2. Identity
    3. Identity Server UI
    4. SaaS
    5. Lepton Theme
    6. Payment
    7. File Management
    8. Forms
    9. Twilio SMS
  9. Once you get the backend project to where it can build, if you run dotnet publish pointed at the TestAppName.HttpApi.Host project in Azure DevOps you will get the below error:
  10. E:_Agents\WIN_work_tool\dotnet\sdk\6.0.301\Sdks\Microsoft.NET.Sdk\targets\Microsoft.NET.ConflictResolution.targets(112,5): error NETSDK1152: Found multiple publish output files with the same relative path: E:_Agents\WIN_work\52\s\aspnet-core\modules\Volo.LeptonTheme\src\Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton\package.json, E:_Agents\WIN_work\52\s\aspnet-core\src\TestAppName.HttpApi.Host\package.json. [E:_Agents\WIN_work\52\s\aspnet-core\src\TestAppName.HttpApi.Host\TestAppName.HttpApi.Host.csproj]

##[error]Error: The process 'E:_Agents\WIN_work_tool\dotnet\dotnet.exe' failed with exit code 1

##[warning].NET 5 has some compatibility issues with older Nuget versions(<=5.7), so if you are using an older Nuget version(and not dotnet cli) to restore, then the dotnet cli commands (e.g. dotnet build) which rely on such restored packages might fail. To mitigate such error, you can either: (1) - Use dotnet cli to restore, (2) - Use Nuget version 5.8 to restore, (3) - Use global.json using an older sdk version(<=3) to build

Info: Azure Pipelines hosted agents have been updated and now contain .Net 5.x SDK/Runtime along with the older .Net Core version which are currently lts. Unless you have locked down a SDK version for your project(s), 5.x SDK might be picked up which might have breaking behavior as compared to previous versions. You can learn more about the breaking changes here: https://docs.microsoft.com/en-us/dotnet/core/tools/ and https://docs.microsoft.com/en-us/dotnet/core/compatibility/ . To learn about more such changes and troubleshoot, refer here: https://docs.microsoft.com/en-us/azure/devops/pipelines/tasks/build/dotnet-core-cli?view=azure-devops#troubleshooting

##[error]Dotnet command failed with non-zero exit code on the following projects : E:_Agents\WIN_work\52\s\aspnet-core\src\TestAppName.HttpApi.Host\TestAppName.HttpApi.Host.csproj


To resolve this error in our Build/Publish process in Azure DevOps we added this line to the TestAppName.HttpApi.Host.csproj PropertyGroup: <ErrorOnDuplicatePublishOutputFiles>false</ErrorOnDuplicatePublishOutputFiles>

We found this solution in Microsoft documentation, here: https://docs.microsoft.com/en-us/dotnet/core/compatibility/sdk/6.0/duplicate-files-in-output, because we found out that that TestAppName.HttpApi.Host project was depending on the Volo.Abp.AspNetCore.Mvc.UI.ThemeLepton project, and they had conflicts with the two project's project.json files.


What we are trying to accomplish is quickly build out multi-tenant applications that support UI modifications including changing color schemes, layouts, login screens, and more using ABP.IO and Angular. Is the above process correct, or is there a better way to go about doing this? Or, is there a limitation on what Angular UI can modify in ABP.IO?

We have also tried to use the command line tools for ABP to add in the modules to the angular project, but that did not give us the customization abilities we fully needed, and that is why we started using the ABP Suite.


1 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    What we are trying to accomplish is quickly build out multi-tenant applications that support UI modifications including changing color schemes, layouts, login screens, and more using ABP.IO and Angular. Is the above process correct, or is there a better way to go about doing this? Or, is there a limitation on what Angular UI can modify in ABP.IO?

    You don't need to include all module source code in your application if you just want to change those, because it will make your upgrades difficult. Modules are designed to be extensible(pages, services, components..) You can check the document:

    https://docs.abp.io/en/commercial/latest/themes/customizing-lepton-theme?UI=NG https://docs.abp.io/en/abp/latest/Customizing-Application-Modules-Guide https://docs.abp.io/en/abp/latest

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11