Don't get me wrong - I really love Angular modules. They are like that office manager who keeps track of everything in their head and runs everything like a nearly infallible machine.
But if you are developing a UI component library, it gets very tedious to have to create a module just so something can use your one component. Modules are meant for groupings, and they are great at that. But for generic components, they can be overkill.
What difference does a module make?
Before standalone, the only way to use a component, directive, or pipe was to declare them in a module that had to be imported by whoever wanted to use them. If you declared multiple items in the same module, it became hard to track what was being imported for what and what was no longer being used. This ran the risk of importing things unnecessarily, causing bloated bundle sizes and subsequently slower app times.
As of Angular 14, the brilliant Angular team added standalone functionality. In other words, components, directives, and pipes can import what they need directly without modules just like any other import.
You can import components, directives or pipes directly to use them!
Lazy load with less files
Before standalone, the only way to lazy load was to create a module with routing to serve as a locator to get to the correct component without any knowledge of what that component is. Now we can point to the component with imports instead of routes.
Should I switch everything to standalone?
I can't think of a good reason to declare components, directives, and pipes with modules ever again. Please let me know if you can think of reasons why you should.
What good are modules then?
Modules are still super useful, just less needed...like a lot less needed. Actually, if you use them just for grouping and are no longer concerned with the dependencies of what you're declaring, how to best use modules will become a lot clearer.
For example, if you're importing the same group of components, directives, and/or pipes across multiple places or want to alter what's being imported in one spot, you should bundle them in a module. Don't use the module to declare anything. Only use it for importing/exporting what you need.
Another example would be if you are using things that rely on each other, like a component that uses a directive to interact with its children. But even then, just use the module to import/export.
Which Angular decorators can be standalone?
- Components
- Directives
- Pipes
How do you become standalone?
By Angular CLI
ng g c componentName --standalone
By component metadata
@Component({
standalone: true,
selector: 'your-selector',
imports: [
CommonModule,
ExampleModule
],
...
})
If you're using an existing decorator, you need to delete it from the module that's declaring it. You can be declared by a module or have standalone turned on but not both.