Is it correct to create nested module in Angular

Question

I have recently reviewed some angular module structure, But I saw many of them in the same folder level.

└──  feature-module1
|      └── components
|      └── services
|
|└──  feature-module2
|      └── components
|      └── services
|
|└──  feature-module3
|      └── components
|      └── services
|
|└──  feature-module4
|      └── components
|      └── services

I want to keep my feature modules in hierarchical structure like below :

.
└── app
    ├── admin(module)
    │   ├── admin.component.ts
    │   │
    │   ├── content-management-dashboard(module)
    │   │   ├── components
    │   │   │   ├── content-list(component)
    │   │   │   ├── edit-content(component)
    │   │   │   └── show-content(component)
    │   │   └── user-management.component.ts
    │   │
    │   └── user-management-dashboard(module)
    │       ├── edit-user(component)
    │       ├── show-user(component)
    │       └── user-list(component)
    │
    │
    └── home(module)
        ├── home.component.ts
        │
        ├── content-dashboard(module)
        │   ├── components
        │   └── services
        │
        └── user-dashboard(module)
            ├── components
            └── services

I have home and admin main module and they contain their related sub module inside them.

Is this way correct ? Should we use hierarchical structure for modules ?

Answer 1

yes you can use modules and subModules and i advice you to use Lazy Loading pattern, when your application will be bigger and bigger you will have a big performance problems because of the bundle size and the time it takes for loading.

lazy loading will load only the needed part of your application, it will load the module when one of its routes is called.

you can create a shared module for everything shared in your app (components, directives, pipes, services).

have a look here to get more details