Angular standalone components
A simplified way to build Angular applications
July 3, 2023 | 5 min read
Introduction
Until now, developers have been using NgModules to specify the components, directives, pipes, etc that are available for use in templates, however, after the release of Angular @Component({ selector: '...', templateUrl: '...', styleUrls: ['...'], standalone: true, imports: [ NgIf, NgFor, AsyncPipe, ... ], }) export class FooBarComponent {
Generate a standalone component via the Angular CLI
ng generate component --standalone account-statements
A component generated with --standalone flag is not added to NgModule and contains default imports such as CommonModule to get started with the component right away.
Adopt standalone components incrementally
Standalone components can be seamlessly combined with existing modules. They are easy to implement, and can be adopted incrementally into an app. A standalone component, pipe or directive can also be imported into an existing NgModule configuration, applied incrementally for complex apps, so that you can ensure that there are no breaking changes.
@NgModule({
declarations: [...],
exports: [...]
imports: [
AccountDetailsComponent, // This is a standalone component
CommonModule,
RouterModule.forChild(routes),
.....
],
})
Migrate a component to a Standalone
You can convert a component in one of the following ways:
Using the Migrate to Standalone via schematics
To migrate standalone components, you must satisfy the prerequisites from Angular . Angular provides a ng generate @angular/core:standalone
ng generate @angular/core:standaloneshould be executed at the root of the project.Use this as follows:
Run
ng generate @angular/core:standaloneto convert all components, directives and pipes to standalone. This will try to convert and migrate all the files to use standalone features.Run
ng generate @angular/core:standaloneagain to remove unnecessary NgModule classes. EmptyNgModulesare searched for removed them from the app.Run
ng generate @angular/core:standalonea third time to bootstrap the project using standalone APIs. The schematics change how the app is bootstrapped in themain.tsfile.
Note:
- To avoid any breaking changes to an app with the standalone feature, in Angular, most of the
NgModuleor other files, so you might have to remove and migrated some of the files manually.
Migrate a component manually
The steps below shows how to migrate an existing component to a standalone component
Mark the component as standalone by adding
standalone: trueas the meta data in the@Componentdirective.@Component({ ... + standalone: true,Import all the
dependenciesin the standalone component fromngModules@Component({ ... standalone: true, + imports: [ + TransactionsAccountSelectComponent, //another standalone component + HeaderModule, // non-standalone component can be imported like this + NgIf, + NgFor, + AsyncPipe, + JsonPipe, + ] })Migrate a component to a Standalone Differences between using NgModules and Standalone feature
Bootstrapping an app
Once the
AppComponentis standalone you can get rid of theAppModulescompletely and use
Bootstrapping an Application Changes in the Routing configuration
With standalone feature in place,
NgModuleis no long required for many lazy loading scenarios. You can simply lazy load a standalone component by exporting the routes and usingloadComponentinstead ofloadChildrenand include them insrc/main.tsfiles usingprovideRouter()from@angular/routeras follows.Changes in the Routing configuration Specs for Standalone components
The TestBed configuration now doesn't needs to import all the dependencies used by the component
you are testing and hence reduces the boilerplate code in the spec file.Specs for Standalone component NOTE: After the migration the specs might be broken and might need manual fixes
Improvements on performance using standalone feature
Here are a few ways in which Angular standalone components can contribute to performance improvements:
Reduced bundle size: You can reduce the overall bundle size of your app by using Angular's standalone feature and eliminating NgModules and the boilerplate code that comes with it.
Isolation and lazy loading: You can enhance the performance by encapsulating functionality within standalone components which helps to load all the resource only when it is lazy loaded.
Reusability: Angular standalone components are self-contained, independent, and can be re-utilized across the app.
Bundle size
The actual impact on bundle size will depend on the complexity and size of your Angular component as well as the specific dependencies it requires. The difference in bundle size was not that huge (about 8.5 kb) for a small app which is also mentioned in the table below, but it might make a big difference with the large apps. While using Angular standalone components can reduce bundle size, other factors such as code optimization, tree shaking, and lazy loading can also play a role in optimizing bundle size.
App type Bundle size Non Standalone app 7648528 bytes Standalone app 7640882 bytes
