Switch Now To Angular Standalone Components

Building scalable, enterprise Angular apps comes with some challenges, one of which is to organize project in a way, that something maintained by two-three developers will be good to be developed by several teams like this.

So the organisation of the project is really important. Especially because an enterprise app can consist of anything between 100 and 500 components and same amount of services.

By the way, my name is Tom Smykowski, I’m an expert in building scalable, enterprise applications and in this series I’ll be teaching you how to do it!

Before standalone components were introduced, you had to put every component, directive and pipe into a module. Here’s an example of a module:

@NgModule({
  declarations: [AppComponent, HeaderComponent],
  imports: [CommonModule, FormsModule],
  providers: [SomeService],
  bootstrap: [AppComponent]
})
export class AppModule {}

There were several problems with this approach. First of all, modules aren’t always necessary. Other libraries like React doesn’t require this construct. For a reason, it increases complexity, increases risk of circular dependencies, makes the codebase harder to understand (you have to figure out what module exports your component, especially difficult when working with 3rd party libraries), lazy…