Building Scalable Angular Apps with Standalone Components

Standalone components removed the need for NgModule boilerplate, but the real win is how they change the way you think about app structure.

Route-level code splitting

Instead of feature modules, each route now lazy-loads its own standalone component directly:

{ path: 'projects', loadComponent: () => import('./pages/projects/projects.component').then(m => m.ProjectsComponent) }

No module wrapper, no barrel file — just the component the route needs.

SSR changes the rules

With provideClientHydration(), anything that touches window, document, or localStorage must be guarded with isPlatformBrowser. It's tempting to skip this until a ReferenceError: document is not defined shows up in the server log — better to guard it from the start in any service that touches browser globals.

Keep content out of components when it grows

Hardcoding arrays of projects or skills directly in a component is fine at first, but once you want to edit content without touching TypeScript, move it to a JSON or Markdown file loaded through a small service. It also makes render paths (like this blog) reusable for future content types.