Prerequisites
Please answer the following questions before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.
- What is your product version? v11
- What is your product type (Angular or MVC)? Angular
- What is product framework type (.net framework or .net core)? .net 6
Hello i have few questions about shared modules. So as an intro here are the modules that is shared for admin (for admin folder) and app(for app folder).
@NgModule({
declarations: [
RoleComboComponent,
PermissionTreeComponent,
PermissionTreeModalComponent,
PermissionComboComponent,
OrganizationUnitsTreeComponent,
FeatureTreeComponent,
EditionComboComponent,
],
imports: [
AppSharedModule,
ReactiveFormsModule,
TreeModule,
TooltipModule,
FormsModule,
CommonModule,
UtilsModule,
AppCommonModule,
TableModule,
TreeModule,
DragDropModule,
ContextMenuModule,
PaginatorModule,
AutoCompleteModule,
EditorModule,
InputMaskModule,
CountoModule,
TextMaskModule,
ImageCropperModule,
PerfectScrollbarModule,
DropdownModule,
AppBsModalModule,
FileUploadModule,
PrimeNgFileUploadModule,
SubheaderModule,
],
exports: [
RoleComboComponent,
PermissionTreeComponent,
PermissionTreeModalComponent,
PermissionComboComponent,
OrganizationUnitsTreeComponent,
FeatureTreeComponent,
EditionComboComponent,
UtilsModule,
AppCommonModule,
TableModule,
TreeModule,
DragDropModule,
ContextMenuModule,
PaginatorModule,
AutoCompleteModule,
EditorModule,
InputMaskModule,
CountoModule,
TextMaskModule,
ImageCropperModule,
PerfectScrollbarModule,
DropdownModule,
AppBsModalModule,
AppSharedModule,
ReactiveFormsModule,
TreeModule,
TooltipModule,
FormsModule,
CommonModule,
FileUploadModule,
PrimeNgFileUploadModule,
SubheaderModule,
],
})
export class AdminSharedModule {}
const imports = [
CommonModule,
FormsModule,
HttpClientModule,
HttpClientJsonpModule,
ModalModule,
TabsModule,
BsDropdownModule,
PopoverModule,
BsDatepickerModule,
AppCommonModule,
FileUploadModule,
AppRoutingModule,
UtilsModule,
ServiceProxyModule,
TableModule,
PaginatorModule,
ProgressBarModule,
PerfectScrollbarModule,
TextMaskModule,
ImageCropperModule,
AutoCompleteModule,
NgxSpinnerModule,
AppBsModalModule,
];
@NgModule({
imports: [...imports],
exports: [...imports],
declarations: [ThemesLayoutBaseComponent],
})
export class AppSharedModule {}
- First of all i really didn't understand what 'AppRoutingModule' do inside AppSharedModule?
- I see some modules that is exported from both modules are the same like AppCommonModule, FileUploadModule,TableModule,PaginatorModule etc. aren't 2 of the same exports are unnecessary? since all the page modules are already importing both of the modules.
- Since angular 9, anz use ivy compiler, what is the best way to debug the angular app? I was using augury https://augury.rangle.io/ before my anz version update. But since they don't support ivy i can not see the routing tree anymore do you have any suggestions for this? I am having problems on some of the modules that i lazy load. If you look at the picture, you can see the navigation is redirected to auditlogs but it doesn't load the auditlogs module. Chrome is becoming unresponsive. Probably sth with angular routing but since i do not get any error i couldn't figure it out, do you have any idea how to debug this?
Thank you for the assistance, looking forward for your reply.
4 Answer(s)
-
0
Hi @cangunaydin
Thank you for sharing your findings. I think the items you shared in #1 and #2 seems unnecessary. I will check those and inform you. For the last item, have you tried https://angular.io/guide/devtools ?
-
0
Hello @ismcagdas I have checked the devtools, thanks for the suggestion, some properties are not supported though, like i can not see the dependency tree but it will be okay i believe. I was doing some readings about angular patterns, i have read interesting articles about a different design pattern called scam (single component angular module).
https://dev.to/this-is-angular/emulating-tree-shakable-components-using-single-component-angular-modules-13do https://angular-training-guide.rangle.io/modules/module-scam-pattern
is there any future plans for switching to scam pattern for anz?
Also is there any specific documentation about angular structural design for anz project? it would be helpful to see a doc about how to design the code structure for your shared modules and feature modules, and what naming conventions should be used? When your codebase grows it is becoming difficult to seperate modules and shared modules and when to add a new module. So i believe it would be helpful for everyone to see a documentation, when and how to create a feature module and how to keep them when your code grows.
For ex in current anz project shared modules structure is little bit confusing since it has common.module (the module for singleton services, this one is referring to the core module in angular docs i believe), utilsmodule, appcommon module, appshared module,mainshared module, adminshared module. It is difficult to follow what module is doing what.
when you want to create a new feature module in anz app, what kind of pattern we should use? for ex in admin folder of anz there are some examples but they are so basic, it does not cover the things i am listing below,
- if you are sharing one component between 2 different modules but not shared in all of the feature modules?
- what will be the smart folder structure to keep your code clean when you are creating feature module?
some kind of folder structure guidance like in this article can be helpful i believe https://itnext.io/angular-patterns-1-modules-organisation-d3b2224ec4cf
-
0
Hi @cangunaydin
We have https://docs.aspnetzero.com/en/aspnet-core-angular/latest/Overview-Angular for explaining Angular project's structure.
We didn't have any knowledge about SCAM pattern, we will investigate it and provide a feedback about this. We suggest creating your app specific modules under the main module (main.module.ts). We suggest to create a separate module for each your page but we don't suggest an approach for the items you mentioned below;
- if you are sharing one component between 2 different modules but not shared in all of the feature modules?
- what will be the smart folder structure to keep your code clean when you are creating feature module?
AspNet Zero doesn't restrict you but also doesn't provide such suggestions at the moment.
-
0
Hello @ismcagdas thanks for your answers it was helpful. I am closing this issue and will wait for your solutions for module unnecessary usages i have other questions but i will raise it on another ticker since it is not related with this thanks again.
