Blog Post

Your Angular Module is a SCAM!

by Younes Jaaidi •
Mar 12, 2019 • 4 minutes

Every time I am about to add a component to an Angular application, I feel like there is a bunch of people arguing in my head.

TL;DR

There’s a to generate Single Component Angular Modules.

yarn add @wishtack/schematics
yarn ng g @wishtack/schematics/scam hello-world

Where It All Started

A while ago, I caught this Pull Request from which shows that the Angular team might make NgModules optional in the future.

It inspired me to experiment a new .

The current problem with this approach is that in addition to involving a new syntax, we will have to wait for optional modules support.

By the way, here’s ’s reaction about my previous post and optional modules:

In the meantime, we have to consider another way to solve this situation.

`NgModule` Refactoring Hell

One of the main challenges with NgModule is refactoring.

Given the following cute and tiny little module:

@NgModule({
  declarations: [
    SandwichFormComponent,
    SandwichPreviewComponent
  ],
  imports: [
    MatButtonModule,
    MatCardModule,
    ReactiveFormsModule
  ]
})
export class CuteLittleSandwichModule {}

It is already a challenge to move to another module.

For instance, it is hard to tell if & should be kept, moved, or duplicated to the new module.

SCAM!!!

What if we created one module for each component?

That is what the SCAM means. It stands for .

As far as I know, this term was coined by in his article about .

I loved the concept so much that I created a simple schematic for that.

You can use it right away like this:

yarn add @wishtack/schematics
yarn ng g @wishtack/schematics:scam sandwich/sandwich-preview

This will generate the following file structure:

app/
  sandwich/
    sandwich-preview/
      sandwich-preview.component.ts|html|...

🧹 Say bye to `.module.ts`

In a response to this article, from the Angular Core Team suggested to just move the NgModule to the .component.ts file and simply get rid of the .module.ts.

It totally makes sense for two reasons:

What about directives & pipes

Well, same applies for directives & pipes. SDAM & SPAM?

WebStorm Auto-Import

For those who are worried about having to import lots of modules, you should definitely try the latest version of WebStorm as it will automatically auto-import modules while you are writing your template. 😱

For the moment, I am not aware of any similar feature on VSCode but I am sure it will come soon 😊

The source code & documentation are here: .