Open Closed

Generating Angular frontend for an entity in a service in microservice solution #4605


User avatar
0
agawdat@vlenseg.com created

I have the microservice template with Angular as frontend. I created a new service, then I need to add a new entity with its UI in the frontend. I tried to open the whole solution in abp suite but I couldn't, so I added my new service solution, and created a new entity, but only the backend code was created, no frontend.

How can I generate the frontend for an entity in a service in a microservice solution?

ABP Framework version: v7.0.2 UI type: Angular DB provider: EF Core Tiered (MVC) or Identity Server Separated (Angular): yes


8 Answer(s)
  • User Avatar
    0
    yekalkan created
    Support Team Fullstack Developer

    Hi @agawdat

    I've tried this but the new project is successfully created in apps\angular\projects folder with the given entity.

    Can you open %USERPROFILE%\.abp\suite\appsettings.json file and check if AngularSolutionRootPath is correct for the service project? It should be the root directory of the main microservice project ({ProjectDirectory}\apps\angular).

  • User Avatar
    0
    agawdat@vlenseg.com created

    I checked the mentioned appsettings.json file and the root path is correct, and I tried several times with the same result: No forntend code is generated. Is it correct that I should load only the service solution in abp suite? And if so, what else could be the issue?

  • User Avatar
    0
    yekalkan created
    Support Team Fullstack Developer

    Is it correct that I should load only the service solution in abp suite?

    Yes, you should add the service solution.

    . what else could be the issue?

    Can you check the Suite logs? Is there any error printed when generating angular code?

  • User Avatar
    0
    agawdat@vlenseg.com created

    You mean in the console window? No errors, and even no mention to Angular or UI in the logs. I just get in abp suite page itself that Creating Angular UI is completed as per the below screenshot.

  • User Avatar
    0
    agawdat@vlenseg.com created

  • User Avatar
    0
    yekalkan created
    Support Team Fullstack Developer

    I meant the backend logs. You can reach them using the button i pointed below:

  • User Avatar
    0
    agawdat@vlenseg.com created

    I found this error:

    2023-02-27 16:07:42.445 +02:00 [INF] Running the Angular Schematics command: node run-schematics.mjs "E:/Vlens/Vlens.Kyc/code/apps/angular/.suite/schematics/node_modules/.bin/ng" g ".suite/schematics/collection.json:entity" microservice-pro Vlens.Kyc.ScanTransactionService "E:/Vlens/Vlens.Kyc/code/services/scanTransaction/.suite/entities/ScanTransaction.json" "E:/Vlens/Vlens.Kyc/code/apps/angular" 2023-02-27 16:07:42.681 +02:00 [INF] Angular Schematics command failed. file:///E:/Vlens/Vlens.Kyc/code/apps/angular/.suite/schematics/run-schematics.mjs:1 import { execa } from "execa"; ^^^^^ SyntaxError: Named export 'execa' not found. The requested module 'execa' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

    import pkg from 'execa'; const { execa } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
    

    Node.js v18.13.0

    2023-02-27 16:07:42.696 +02:00 [INF] 10/11 - AngularUiGenerateWithSchematicsCommand completed. | Duration: 270 ms.

  • User Avatar
    0
    mahmut.gundogdu created

    I found this error:

    2023-02-27 16:07:42.445 +02:00 [INF] Running the Angular Schematics command: node run-schematics.mjs "E:/Vlens/Vlens.Kyc/code/apps/angular/.suite/schematics/node_modules/.bin/ng" g ".suite/schematics/collection.json:entity" microservice-pro Vlens.Kyc.ScanTransactionService "E:/Vlens/Vlens.Kyc/code/services/scanTransaction/.suite/entities/ScanTransaction.json" "E:/Vlens/Vlens.Kyc/code/apps/angular"
    2023-02-27 16:07:42.681 +02:00 [INF] Angular Schematics command failed. file:///E:/Vlens/Vlens.Kyc/code/apps/angular/.suite/schematics/run-schematics.mjs:1 import { execa } from "execa"; ^^^^^ SyntaxError: Named export 'execa' not found. The requested module 'execa' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

    import pkg from 'execa'; const { execa } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21) 
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) 
    

    Node.js v18.13.0

    2023-02-27 16:07:42.696 +02:00 [INF] 10/11 - AngularUiGenerateWithSchematicsCommand completed. | Duration: 270 ms.

    I have checked the error. It seems execa didn't installed on suite folder. Could you run yarn why execa command on the path E:/Vlens/Vlens.Kyc/code/apps/angular/.suite/schematics if there is no execa in here, Could you try to yarn add execa

    If the issue is not related with missing npm package. I will investigate the issue might be related with commonjs vs ESM.

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11