DEV Community

Discussion on: Emulating tree-shakable components using single component Angular modules

haydenbr profile image
Hayden Braxton

A large application has a lot of components. For each of those components, I now have to also create an NgModule for it and import any modules that export declarations that I depend on. So most likely, I'm at least importing CommonModule (for ngIf, async, etc) and probably some other ThirdPartyModule if I use third party components. So that's the first line of repetition.

As I move further up the component tree from UI-interaction related components to business related components, I'm importing more ngModules for all the lower level components I need, and likely still CommonModule and ThirdPartyModule. So the result is a lot of import { SomeComponentModule } from './some.component.ts' and a long list NgModule imports.

To quote the article "SCAMs mean more Angular modules since we will have one for every component, directive, and pipe in our application." This creates a lot of extra boiler code.

I can understand the value of refactoring: I can move the component anywhere and it already has all of the dependencies it needs, but I would also question how often that is a need.

Clarification question: Suppose I have some kind of compound component where I always use a combination of components in concert. Like, maybe I have something like:

    <my-accordion-header>Section 1</my-accordion-header>
    <my-accordion-content>Some content</my-accordion-content>
    <my-accordion-header>Section 2</my-accordion-header>
    <my-accordion-content>Some more content</my-accordion-content>
Enter fullscreen mode Exit fullscreen mode

If I wanted to follow the SCAM approach, there would be one module for each of these four components. So then anyone who wanted to use an accordion would have to import all 4 modules. Or would it be acceptable to create some parent AccordionModule that has no declarations and simply export all 4 component modules so that anyone who needs an accordion simply imports this single parent module?