Open Closed

Creating a new module #3


User avatar
0
bhyatz created

Hi

  I've see a guide on how to create a new application and a new module.
  I have a created a new application for our solution.
   
  The entire solution and modules will be based on angular ui.
   
  I want to create a new module with a user interface,
  How do I create this module. 
            Will be a seperate solution?
            Is it possible to have the module in the solution as the base application visual studio solution?
            I would like to have a single visual studio solution if possible to develop the modules as well as the base application but keep the module code is seperate projects.
  How do I include this module in the application?
  How do I load the ui for the module in the main application.
  
  
  
  

12 Answer(s)
  • User Avatar
    1
    hikalkan created
    Support Team Co-Founder

    Hi,

    Every module can be a separate solution (like we did for the modules) or you can develop it under a single Visual Studio solution (for example, in the microservice demo, we've included a product module into the solution).

    I suggest you to go with a single solution at the beginning since it is easier to develop, test, run and maintain. You know, in a single solution, you can cross reference projects. Assuming you will create your module as layered (like this), your application's domain layer should depend on the module's domain layer and so on (as a good practice, but you don't have to do). Also, add standard DependsOn attribute (see the document) when you add a project reference.

    You can create a new module (using abp new MyProductName.MyModuleName -t module-pro - see), then add its projects to the application's solution then add references and dependson attributes. In the future, we will also automate this.

    For the UI part, you can investigate the Angular UI modules we've created to understand how a module is developed. We are using them as NPM packages in the main application, however it may not be practical in development. @mehmet can write you more about that.

  • User Avatar
    0
    Mehmet created

    Hi @bhyatz,

    You have two options to create a new module in a single Angular solution. You can create a regular module or create a library.

    In short, Angular libraries are modules that can be published easily.

    Angular CLI can be used for both options.

    See the Angular CLI documentation

    You can use the following command in the Angular application root folder to create a new module.

    The same way followed in the Angular-MongoDB tutorial.

    yarn ng generate module <your-module-name> --route <your-module-name> --module app.module
    

    If you use the above command, it will create a lazy-loaded module in the app/<your-module-name> folder.


    You can use the following command to create a library

    yarn ng generate library <your-library-name>
    

    If you execute the above command, it will create a library in the projects/<your-library-name folder. This library can be used in your Angular application. You can import any module, component, directive, etc., from this library.

    See the Angular libraries guide

    Note: If you don't plan to publish any library to an NPM server, making each module a library will complicate your angular application.


    If you generate a module with ABP CLI, an Angular application with two libraries will be created. You must publish these Angular libraries to use in your main solution.

    If you chose this way, Symlink Manager may help you. Symlink Manager is a JS package that easily manages to symbolic link processes of your dependency packages.

  • User Avatar
    0
    trendline created

    What is the different between the -t module and -t module-pro, the -t app and -t app-pro. Via the CLI, using -t module-pro creating a new module failed, but use the -t module succeed.

  • User Avatar
    0
    hikalkan created
    Support Team Co-Founder

    Hi @trendline

    module creates a new module with a sample host application uses the free and open source modules and themes. module-pro uses the commercial modules and themes. It doesn't have much difference for a module development but we suggest you use module pro if you then will use this module in an ABP Commercial based solution.

    We will check the problem for module pro, thank you for reporting this.

    app creates a free startup template based project with free modules and themes included. if you want to use it, no need to pay for the ABP Commercial :) app-pro creates a startup project based on the commercial modules and themes.

  • User Avatar
    0
    yekalkan created
    Support Team Fullstack Developer

    Via the CLI, using -t module-pro creating a new module failed

    I tried, and successfully downloaded module-pro and app-pro templates. Please don't only say 'it failed'. Share the error with us.

  • User Avatar
    0
    trendline created

    Hi@yekalkan,

    Thanks for your cliarification, after I changed my network to another one, both module and module-pro template works fine via CLI, but before that module-pro template not work in the network.

    BTW, some package references of moudle-pro template is older than the module template.

  • User Avatar
    0
    vrajasekaran created

    I think this post/answer should be tagged in the front page, since it contains some good references on creating a new Angular UI module. It took me lot of time to search and find this post/answer.

  • User Avatar
    0
    hikalkan created
    Support Team Co-Founder

    Thanks @vrajasekaran for your suggestion. We will create a module development tutorial soon, that will be much better.

  • User Avatar
    0
    Leaf created

    Hi,

    I have use abp new DemoMod -t module-pro command to create module. But it is shown in ABP Suite as Angular Module.

    How to make the module to Mvc instead of Angular?

    Thank you.

  • User Avatar
    0
    alper created
    Support Team Director

    hi @Leaf,

    UI Framework is not meaningful for modules because a module solution has both Angular and MVC. So you can ignore the UI Framework : Angular. Probably this text will be removed in the next versions for modules.

  • User Avatar
    0
    Leaf created

    Hi @alper,

    Thanks for reply.

    I manage to generate the module via ABP suite and manage to add-migration into database.

    How to add the module's page in main Menus and permission page ?

    Thanks @alper.

  • User Avatar
    0
    alper created
    Support Team Director

    Suite adds it to main menu automatically. you don't need to manually add. just add-migration and update database, you'll see it in the menu. forexample, if your module project name is Acme.MyStore then there'll be a main menu item called "My Store", all the menu items are added under "My Store" parent menu.

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