Abp: [Question] Angular - Modular development guide

[NecatiMeral]

Hi,

how's the workflow when creating a new library project inside the ng-packs?
I've cloned this repository and just wanted to add a new libary for the dev-app.

Are you using the ng generate library command or are you using a different approach?

[mehmet-erim]

Hi @NecatiMeral

We were using the ng generate library command before. Now we download the module template (you can download via ABP CLI: abp new YourProjectName -t module -csf). The module template is more suitable for developing a new module that works with ABP backend.
By the way, we will not create a new library in ng-packs folder. The folder will be removed in the future. We going to move each module to modules folder (e.g: modules/account/angular)

[NecatiMeral]

Hi @mehmet-erim,

thank you for your answers. That helps a lot.

Not directly associated with abp, but:
When creating a new module (in the modules directory), you'll have to use a kind of dev-app (same procedure as now). How are you exactly adding the new module to the dev-app without publishing it? I've read the readme but the yarn commands are failing after adding the package dependency (on the ´dev-app`).

Even the symlink commands aren't helping (maybe it's because of windows?). Do you have any guidance for me?

PS: Still wating on part 2 of Building a Real-World Library Structure with Angular — Part I 😄

[mehmet-erim]

Components, directives, etc. what we want in the library can be imported to the dev-app. But a piece of the dev-app cannot be imported to the library. It is the most important rule. Please see this app in detail. You will find answers to all your questions.

symlink-manager works well. If you share any error in detail, we will help you with pleasure.

Part 2 will be out. But I do not know what day it will :)

[NecatiMeral]

Hi @mehmet-erim,

the project dependency is clear to me (no circular dependencies and so on). The only thing that wasn't clear to me was how the dev-app get's the my-project-name project dependency. Adding it to the package.json fails expectedly.

I've examined the template project and if I understood it correctly, the dependency get's established through the angular.json and not the package.json, right?

[mehmet-erim]

If the package has been published, you can add it to the package.json. You can import a thing from your library to the dev-app. See tsconfig.json file.

Actually, it is directly imported. Since there are no paths in tsconfig.prod.json, it will throw an error if your package is not in node_modules. But since there will be paths in dev mode, it will reference directly from the library folder.