A standalone component is an Angular component marked with `standalone: true`. It does not belong to an NgModule; instead, its metadata declares the modules, components, directives, and pipes its template needs through `imports`. This makes each component responsible for locating its own template dependencies. section 1.3.3 section 2.3.1
Standalone building blocks remove the requirement to organize an application around NgModules. A standalone application can bootstrap its root component with `bootstrapApplication`, keep application-wide providers in `app.config.ts`, and register routes with `provideRouter` rather than `RouterModule.forRoot`. section 1.3.3 section 2.7
To create and use a standalone component:
- Mark the component metadata with `standalone: true`; it cannot also be declared in an NgModule. section 2.3.1
- Add every template dependency to `imports`, including NgModules such as `FormsModule` or individual standalone directives such as `NgIf`. section 1.3.3 section 2.3.1
- Bootstrap a standalone root component with `bootstrapApplication(AppComponent, appConfig)` and place global providers in application configuration. section 1.3.3
- Lazy-load a routed standalone component with `loadComponent` instead of loading an NgModule. section 2.4.2
Login component dependencies
A login component can import `FormsModule` to bind email and password fields with `ngModel`, then import `NgIf` to display a required-fields warning. The component keeps its credentials state and imports beside its own metadata, rather than relying on declarations and imports held by a feature NgModule. section 2.3.1
Listing 2.14 Lazy-loading a component directly
export const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'registration', loadComponent: () => {
return import('./pages/registration.component').then(
(m) => m.RegistrationComponent
);
} },
];
The route configuration shows a regular login route beside a registration route that dynamically imports and lazy-loads one standalone component with `loadComponent`. section 2.4.2
Standalone and NgModule-based code can coexist. A standalone component may import an NgModule, which keeps older libraries usable during adoption. For incremental migration, make new building blocks standalone, convert selected declarations one at a time, move their NgModules from `declarations` to `imports`, and remove remaining modules only as the application becomes ready. section 2.3 section 2.5.1
The approach targets NgModule boilerplate, complexity, and steep learning curves, but migration scale matters: manually dismantling heavily interwoven module graphs may be impractical for large active projects. Angular’s migration schematic is an alternative, while SCAMs can simplify a module-based codebase before further conversion. section 2.5.1 section 2.7
