Component-based architecture (standalone by default)

Angular apps are composed of small, reusable components that encapsulate template (HTML), logic (TypeScript) and styles. Since Angular v19, new components are standalone by default, which means you compose features by directly importing components, directives and pipes-no NgModule ceremony. This simplifies composition, unlocks route-level lazy loading without feature modules, and keeps dependency surfaces explicit and local. (Angular Blog)

What “standalone” changes in practice

• Direct imports: A component declares the Angular/feature pieces it needs via its imports array (e.g. RouterOutlet, common directives, other components). No declarations/exports dance. (angular.dev)
• Flat mental model: “Feature boundaries” are set by routes and component trees, not modules. This makes refactors (split/merge features) less risky. (angular.dev)
• Lazy loading is first-class: Routes can lazy-load components (loadComponent) or route arrays (loadChildren)-both without NgModules. (angular.dev)
• Bootstrap is simpler: You bootstrap a standalone root component with bootstrapApplication, and register cross-cutting providers (router, HTTP) there. (angular.dev)

Minimal, idiomatic setup (Angular 19)

main.ts - bootstrap a standalone app

bootstrapApplication renders a standalone root component and wires providers (router, HTTP). (angular.dev)

app.component.ts - a standalone root component

Because the component is standalone by default, imports is valid without specifying standalone: true. (angular.dev)

app.routes.ts - lazy-load components and route trees

Both loadComponent and loadChildren work with standalone APIs-no feature modules required. (angular.dev)

home.component.ts - importing what you need, where you need it

This shows co-located UI and logic, explicit imports, and the modern template control-flow (@if) available in current Angular. (angular.dev)

A lazily loaded feature with its own routes

When the user first navigates to /products, the router lazy-loads this component (and its route config) as a separate chunk. (angular.dev)

Why this architecture scales

• Tight encapsulation: Each component owns its template, styles, and direct dependencies. Teams compose features like LEGO bricks without module indirection. (angular.dev)
• Slim, on-demand bundles: Route-level splits via loadComponent/loadChildren keep initial payloads small and navigation snappy. (angular.dev)
• Straightforward bootstrapping: bootstrapApplication plus a small provider list is easier to reason about than app modules. (angular.dev)
• Modern reactivity: Signals fit neatly into component state, making UI updates precise and predictable. (They’re part of the current, stable Angular stack.) (Angular Blog)

Key references

• Components are standalone by default (v19) and guidance on imports. (Angular Blog)
• Standalone bootstrapping with bootstrapApplication. (angular.dev)
• Routing & lazy loading in the standalone world. (angular.dev)