🎯AIM to Future-Proof Your Standalone Angular Components

Netanel Basal
Netanel Basal
Published in
2 min readOct 11, 2021

--

I’ve got exciting news! Standalone components, directives, and pipes are closer than ever! The following link contains all the details on the RFC page:

One example from the RFC page

It’s time to be prepared for the future. If you haven’t already, it’s a good idea to use the AngularInlineModule pattern in your Angular application. This pattern eliminates the use of *.module files. Every directive, component, or pipe is accompanied by an inline module defining all of its dependencies. For example:

In the following article, you can learn more about what Angular does under the hood:

For your convenience, I’ve created a schematic that’ll generate inline modules for a directive, component, and pipe:

We’ve been using it in production since Ivy came out and we’re not going back 😋

It allows us to say farewell to modules like SharedModule, CoreModule, etc. All directives, components, and pipe modules are injected with only the dependencies they need, making the code easier to test and reason about.

BUT! The biggest advantage will be to make our lives easier when standalone components, directives, and pipes are eventually released.

Once it does, we can provide a migration script that moves every dependency from AngularInlineModule into the component declaration:

In the case of pipes and directives, we can remove the module and add the standalone property.

What are you waiting for? With this library, your AIM will be perfect! 😉🎯

--

--

A FrontEnd Tech Lead, blogger, and open source maintainer. The founder of ngneat, husband and father.