Angular 8 components

Question

What would be the most optimal structure for a business project with many components, (50 approx)?

That each component has its own module?

src/
├── app
│   ├── app.component.html
│   ├── app.component.scss
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── app-routing.module.ts
│   ├── components
│   │   ├── comp1
│   │   │   ├── comp1.component.ts
│   │   │   ├── comp1.module.ts
│   │   │   └── index.ts
│   │   ├── comp2
│   │   │   ├── comp2.component.ts
│   │   │   ├── comp2.module.ts
│   │   │   └── index.ts
│   │   ├── comp3
│   │   │   ├── comp3.component.ts
│   │   │   ├── comp3.service.ts
│   │   │   ├── comp3.module.ts
│   │   │   └── index.ts
│   ├── views
│   │   ├── admin
│   │   │   ├── admin.module.ts
│   │   │   ├── admin-routing.module.ts
│   │   │   ├── page1 <== Here I show comp1
│   │   │   ├── page2 <== Here I show comp2
│   │   │   ├── page3 <== Here I show comp3

That a module groups all the components? in this case, every time you load the module, will it load all the components in this memory?

src/
├── app
│   ├── app.component.html
│   ├── app.component.scss
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── app-routing.module.ts
│   ├── components
│   │   ├── comp1
│   │   │   ├── comp1.component.ts
│   │   ├── comp2
│   │   │   ├── comp2.component.ts
│   │   ├── comp3
│   │   │   ├── comp3.component.ts
│   │   │   ├── comp3.service.ts
│   │   ├── comps.module.ts <=== // group all components in one module
│   │   ├── index.ts
│   ├── views
│   │   ├── admin
│   │   │   ├── admin.module.ts
│   │   │   ├── admin-routing.module.ts
│   │   │   ├── page1 <== Here I show comp1
│   │   │   ├── page2 <== Here I show comp2
│   │   │   ├── page3 <== Here I show comp3

Any suggestion?

Answer 1

Yes, In angular when you load a module, all of its components are loaded. You can create feature modules for you different functionalities which you dont want to load at start up. (That is done by lazy loading.)

So the structure will be kind of like this

Core module -> All components required at start up

Featured Modules -> Will load on demand later on.

In angular9, they have provided the feature to lazy load componenets as well. Now you can lazy load components even if the module is loaded. https://johnpapa.net/angular-9-lazy-loading-components/

Answer 2

There is no strict rule. It depends on the components.

Usually it is a mix. A component that represents a "page" (eg the top level routes like your admin area) makes a good module. For "smaller" components used only from a single page it makes sense to put them into the same module.

Other components that are used multiple times from different "page" modules should get into their own module.

The size of the components is also a consideration. The larger a module gets the more it may be good to extract smaller modules.