Are Standalone Components changing the way we write Angular code?

As an application grows, the boilerplate code that Angular introduces become heavy and more difficult to maintain. Angular Team strives to make the app architecture lighter, so one of the new features they introduced are Standalone components.

What are Standalone Components in Angular?

Standalone components enable developers to build web applications without the need to use NgModule. They were introduced for the first time in v14 but only in developer preview. From v15, standalone APIs are part of the stable API surface. They can be fully used in Angular Elements, Router, HttpClient and many more.

Besides components, we can create also standalone directives and pipes.

Creating Standalone Component

In v15 Angular CLI introduced a command to generate new standalone components easily via:

ng g componentName --standalone

They should be marked with standalone: true and should not be part of any ngModule. If you try to add a standalone component to module, Angular will throw an error.

Any dependencies that are required for the component can be declared directly into the imports array.