Creating a new module #3 | Support

bhyatz created 4 years ago

  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)

1

hikalkan created 4 years ago
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.
0
Mehmet created 4 years ago
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.
0

trendline created 4 years ago

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.
0

hikalkan created 4 years ago
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.
0

yekalkan created 4 years ago
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.
0

trendline created 4 years ago

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.
0

vrajasekaran created 4 years ago

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.
0

hikalkan created 4 years ago
Support Team Co-Founder

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

Leaf created 4 years ago

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.
0

alper created 4 years ago
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.
0

Leaf created 4 years ago

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.
0

alper created 4 years ago
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.

Have an answer to this question? Log in and write your answer.