Change from MVC to Angular UI Type + CRUD Code Generation #3083

9 Answer(s)

• 

  0

  alper created 2 years ago

  Support Team Director

  there's no automatic way to switch a project's UI Framework to another.

  ABP Suite settings are stored in the following file

  %UserProfile%\.abp\suite\appsettings.json
  

  You can find the UI Framework settings in the following fields:

  • UiFrameworkName , update it from Mvc to Angular
  • UiFramework update it from 2 to 3

  I didn't test if this works because it's hacky way :)

  Save Cancel
• 

  0

  improwise created 2 years ago

  This is an interesting question. I guess the actual question here is it is possible to generate a new CRUD GUI based on existing CRUD business layer, which is something we have also pondered but never tried. Will start a new project soon though to evaluate pros and cons of different GUI solutions, and in that, we would like to build out several different GUIs in Angular, Blazor etc. but still use the same ABP solution for backend stuff.

  Save Cancel
• 

  0

  alper created 2 years ago

  Support Team Director

  as long as the entity is the same you can create just UI by checking only "create user interface"

  Save Cancel
• 

  0

  jeflux created 2 years ago

  there's no automatic way to switch a project's UI Framework to another.

  ABP Suite settings are stored in the following file

  %UserProfile%\.abp\suite\appsettings.json 
  

  You can find the UI Framework settings in the following fields:

  • UiFrameworkName , update it from Mvc to Angular
  • UiFramework update it from 2 to 3

  I didn't test if this works because it's hacky way :)

  Ah. This I wanted to try, but wasn't sure where to make the changes. When I make those changes and regenerate UI, ABP Suite is still only generating the MVC code.

  When I load an existing solution into ABP Suite, how does it know the UI Framework? Do I need to change it there also? For example, I made the changes you suggested. When it didn't work, I tried to remove solution from ABP Suite, and when I re-added it, the values in appsettings.json had the MVC configuration (the manual changes I made were not persisted)

  Save Cancel
• 

  0

  jeflux created 2 years ago

  there's no automatic way to switch a project's UI Framework to another.

  ABP Suite settings are stored in the following file

  %UserProfile%\.abp\suite\appsettings.json  
  

  You can find the UI Framework settings in the following fields:

  • UiFrameworkName , update it from Mvc to Angular
  • UiFramework update it from 2 to 3

  I didn't test if this works because it's hacky way :)

  Ah. This I wanted to try, but wasn't sure where to make the changes. When I make those changes and regenerate UI, ABP Suite is still only generating the MVC code.

  When I load an existing solution into ABP Suite, how does it know the UI Framework? Do I need to change it there also? For example, I made the changes you suggested. When it didn't work, I tried to remove solution from ABP Suite, and when I re-added it, the values in appsettings.json had the MVC configuration (the manual changes I made were not persisted)

  I've generated a new solution using Angular for UI and compared to one of my existing solutions I want to migrate from MVC to Angular. As you suggested, I made these changes:

  • UiFrameworkName , update it from Mvc to Angular
  • UiFramework update it from 2 to 3

  I also noted that my appsettings file has an entry for "WebProjectDirectory." In the newly-generated Angular solution, this value is null. So, I changed it to null for the solution I'm attempting to migrate.

  When I then attempt to generate some UI elements using ABP suite, it still generates MVC UI code. Also, the "WebProjectDirectly" value get's changed from null back to it's path to the web project (even if I remove the web project from the VS Solution).

  When I generate a new entity in the Angular app, I see in ABP Suite logs "AngularUiGenerateWithSchematicsCommand started", But with MVC you see instead: "MvcUiGenerateCommand started..."

  Do you know how ABP Suite is determining whether to call Angular generate or MVC generate? Is there something in the Solution that tells ABP Suite to use MVC?

  Save Cancel
• 

  0

  alper created 2 years ago

  Support Team Director

  Actually, ABP Suite searches for some specific directories in your solution. It generates UI for all the UI types if it finds the folder. But you can overwrite these paths in the appsettings.json files. some users change their Angular path, if it's being updated also in the appsettings.json file it'll create the necessary code.

  did you try to set paths for your Angular or MVC projects

  Save Cancel
• 

  0

  jeflux created 2 years ago

  Actually, ABP Suite searches for some specific directories in your solution. It generates UI for all the UI types if it finds the folder. But you can overwrite these paths in the appsettings.json files. some users change their Angular path, if it's being updated also in the appsettings.json file it'll create the necessary code.

  did you try to set paths for your Angular or MVC projects

  I did change the path and framework from MVC to angular. The project then shows up in ABP suite as angular. However, when I attempt to generate code, it still generates MVC UI code.

  I deleted the web project path. When I click generate, it would re-add the path to the appsettings.json file. So I removed the web project from the solution, but it did the same thing. Then I went a step further and deleted the web project files and set the web project path in the appsettings to null again. When I do this, ABP suite generates no UI code, and the console shows "no command"

  At this point, with no MVC project or files, if I re-add the solution to AVP suite, it's still detects it as an MVC solution.

  While trying a bunch of things, I did get it to generate angular code for this project. I had miscellaneous junk files from trying a bunch of things, so I reset my git repo to clean up, then I was going to start generating angular code for real. However, I cannot repeat my success. I know I'm close, I suspect it's that I need a folder named "angular" in a specific location.

  Save Cancel
• 

  0

  jeflux created 2 years ago

  Actually, ABP Suite searches for some specific directories in your solution.
  It generates UI for all the UI types if it finds the folder.
  But you can overwrite these paths in the appsettings.json files.
  some users change their Angular path, if it's being updated also in the appsettings.json file it'll create the necessary code.

  did you try to set paths for your Angular or MVC projects

  I did change the path and framework from MVC to angular. The project then shows up in ABP suite as angular. However, when I attempt to generate code, it still generates MVC UI code.

  I deleted the web project path. When I click generate, it would re-add the path to the appsettings.json file. So I removed the web project from the solution, but it did the same thing. Then I went a step further and deleted the web project files and set the web project path in the appsettings to null again. When I do this, ABP suite generates no UI code, and the console shows "no command"

  At this point, with no MVC project or files, if I re-add the solution to AVP suite, it's still detects it as an MVC solution.

  While trying a bunch of things, I did get it to generate angular code for this project. I had miscellaneous junk files from trying a bunch of things, so I reset my git repo to clean up, then I was going to start generating angular code for real. However, I cannot repeat my success. I know I'm close, I suspect it's that I need a folder named "angular" in a specific location.

  So it appears if I put an "angular" folder with an "angular.json" file in the solution directory, ABP Suite will recognize it as using Angular UI Framework. I can then change the angular path in appsettings and...it WILL generate Angular UI code!

  However, the generated code is quite a mess, probably due to this solution being a module for a microservices template. My guess is that we've strayed too far from the default template for code generation to be useful. I'll leave this ticket open for the time being as I continue to experiment.

  Save Cancel
• 

  0

  jeflux created 2 years ago

  At this point, I've generated Angular UI for two of our microservices. There have been a number of challenges, but I'm confident we can make it work. I want to share what I've done to get this going in case someone comes along and tries to do something similar.

  I started by creating a new Microservices solution in ABP Suite. I took the generated Angular folder from there and put it into the applications folder of our existing microservices solution. I was able to change the environment values to wire up to our existing oAuth endpoint. And I set the default endpoint to our gateway. I was able to start this angular app and login and got the Saas and Administration menus right out of the box. Very promising.

  Next, I went back to ABP Suite and generated a new module. From this generated code, I took the angular folder and dropped it into the solution folder of the microservice I wanted to create an Angular UI for. I removed this microservice solution from ABP Suite, then re-added it to ABP Suite and it recognized it had an Angular folder and I was mostly ready to start generating UI.

  In ABP Suite for our microservice I could choose an existing entity and generate UI. A lot of the generated code was good. We particularly wanted the CRUD UI and forms, and we got this! Though there were several caveats:

  • The ABP Solution name in ABP Suite had to match the module name in the response in the/api/abp/api-definitionresponse. For instance, we have what we call the "Company.InvitationService" project, but I had to rename it in ABP Suite to just "InvitationService".
  • There is a file that is generated in the /config/src/enums/route-names.ts directory. It exports an enum with the service name. This was generated as a weird value wouldn't even work out of the box. Easy to fix, but then every other entity I scaffolded UI code for would generate the same invalid name. So after every entity UI scaffold, I would have to go to the provider it made and make some tweaks.
  • Permissions strings for everything were off. This resulted in menu items not showing up. And in the form dropdowns for edit/delete, they show/hide based on a permissions string. I would just do a find/replace to change something from invitation-service. to InvitationService which matches the permissions strings in our microservice backend.
  • A ton of the models had broken references to other models. So I had to go through all the broken refs and just do a quick add import thing.

  I'll finish up the remaining microservices we want to generate Angular UI code for, but I think now that I know what to expect, it will go pretty fast. The only remaining item that is unknown is how to merge all of the individual Angular microservice apps into the main Angular app. I have an open ticket on that (https://support.abp.io/QA/Questions/3118/Guidance-on-developing-new-Microservice-Modules-for-Angular).

  Of course our life would've been a lot easier if we started with Angular to begin with, but if you are looking to make the change, just know that it is possible.

  Save Cancel