Tutorial hero
Lesson icon

Single Component Angular Modules

Originally published August 04, 2022 Time 2 mins

My tip for this week is… use SCAMs (Single Component Angular Modules).

This one is an opinionated one that ultimately boils down to preference. If you already have an architecture you like in regard to using modules I’m not here to tell you to stop doing that.

However, if you haven’t considered using the Single Component Angular Module approach before, this is what it is and why I like it.

The general idea is that for any component, directive, or pipe you create, you will create a module specifically for that one declarable that declares and exports itself:

declarable that declares and exports itself

Personally - since I’m into using Single File Components where you define your styles and templates inline rather than using separate files - I just drop this module in inline at the end of the file where the component/directive/pipe is created.

To me, this has two main benefits:

  • You can just import the components module wherever you need to use it - no need to think about how to best group related components together and that strategy ending up failing (I’m all for solutions that require me to think less)
  • This approach is similar in spirit and in syntax to using standalone components. Standalone components are still quite new and somewhat experimental (especially inside Ionic applications) so using the SCAM approach gives you a similar experience, and will make converting to standalone later easier (if that’s what you want).

I think this approach is also great for beginners, because it doesn’t require thinking broadly about the applications architecture. Again, you can just import the module for the component into the module of wherever you want to use it - you’re not going to run into errors with Angular complaining you are trying to declare the same component in more than one module.

Learn to build modern Angular apps with my course