DEV Community

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

layzee profile image
Lars Gyrup Brink Nielsen Author

I would say it scales very well. We are able to refactor our application more easily because declarables are not tied to an Angular module that sets up declarations and compilation scope for multiple declarables.

What's the repetition you noticed?

On a side note, this was the first step towards components with local compilation scope. There are two more techniques, albeit experimental, that we cam use today. I didn't cover them in article yet because I thought we would get a stable API for this with Angular Ivy. However, that is still in the far end of the roadmap, so feel free to revisit these old techniques

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?